Search⌘ K

Modern CSS with Tailwind

0%

1.Introduction

Why Tailwind About This Course

2.Getting Started with Tailwind

Quick Start Add Tailwind Features Quiz Yourself on Tailwind

3.Tailwind Basics

Tailwind Utilities Preflight Duplication Using @apply for Duplication Prefixes Retro Designs: Introduction Quiz Yourself on Tailwind Basics

4.Typography

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

5.The Box

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

6.Page Layout

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

7.Animation

Simple Animations Animation Properties Retro Designs: Animation Quiz Yourself on Animation

8.Responsive Design

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

9.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

Project

Build an Interactive E-Library Using Next.js and Tailwind

10.Conclusion

What's Next?Congratulations

11.Appendix

Installing Tailwind Typography Plug-in

Modern CSS with Tailwind

Quiz Yourself on Animation

Let's check your concepts on animation.

We'll cover the following...

Technical Quiz

1.

Which class is used to rotate an element?

A.

skew-x-{degrees}

B.

rotate-{degrees}

C.

translate-x-{size}

D.

skew-y-{degrees}

1 / 4