Back To Course Home

Modern CSS with Tailwind

0% completed

Introduction

Why Tailwind About This Course

Getting Started with Tailwind

Quick Start Add Tailwind Features Quiz Yourself on Tailwind

Tailwind Basics

Using @apply for Duplication

Retro Designs: Introduction

Quiz Yourself on Tailwind Basics

Typography

Size and Shape Color and Opacity Alignment and Spacing Tailwind Forms Retro Designs: Font Styling

The Box

Box Padding and Margins Borders Background Style Gradients Background Images Image Features Retro Designs: The Box Quiz Yourself on Typography and Box

Page Layout

Layout Features Tables Grids Span Flexbox Order and Wrap Box Alignment Retro Designs: Page Layout Quiz Yourself on Page Layout

Animation

Simple Animations

Animation Properties

Retro Designs: Animation

Quiz Yourself on Animation

Responsive Design

Tailwind Screen Widths and Breakpoints Hide Based on Size Flex on Larger Devices Quiz Yourself on Responsive Design

Customizing Tailwind

Customizing and Configuration File Basics Screen Width Default Color Spacing Change Generated Classes A Tour of the Prefixes Declaring Variants Access Tailwind from JavaScript Purge CSS Quiz Yourself on Customizing Tailwind

Conclusion

What's Next?Congratulations

Appendix

Installing Tailwind Typography Plug-in

Retro Designs: Animation

Make Retro Designs more attractive using animation.

We'll cover the following

Explanation

Congratulations! We have completed all three of the important customizations, including typography, image augmentation, and page layout. Finally, it’s time to animate individual elements and implement animation properties. In this chapter, we learned to animate page buttons. The animation properties we learned were bounce, spin, rotation, translation, border color, transition color, transition opacity, transition shadow, and skew. Let’s take a look at an example of those:

Get hands-on with 1400+ tech skills courses.