Free course

Tailwind CSS Course

Learn the utility-first approach, spacing, layout, typography, responsive states, customization, and common Tailwind CSS pitfalls.

6 modules · 35 lessons · No signup

Prerequisites: CSS

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Translate deliberate CSS design decisions into maintainable Tailwind utility classes.

Take this course offline

Subscribe to my newsletter to get every free book, downloadable course, and complete software download.

Get the downloads

Course contents

  1. Why utilities

    Understand utility-first composition and its tradeoffs.

    1. ✓ Why Tailwind CSS
    2. ✓ Utilities map to CSS
    3. ✓ Try Tailwind in the browser
    4. ✓ Install Tailwind CSS with Vite
    5. ✓ How class detection works
    6. ✓ Check your understanding: utility-first Tailwind

  2. Spacing and sizing

    Use the spacing scale, dimensions, borders, and backgrounds.

    1. ✓ Use the spacing scale
    2. ✓ Use logical spacing utilities
    3. ✓ Width, height, and maximum size
    4. ✓ Borders, radius, and focus rings
    5. ✓ Use arbitrary values carefully

  3. Flexbox and Grid

    Translate familiar CSS layouts into utilities.

    1. ✓ Build a Flexbox layout
    2. ✓ Build a Grid layout
    3. ✓ Position elements
    4. ✓ Center content deliberately
    5. ✓ Build a responsive card layout
    6. ✓ Check your understanding: layout and spacing

  4. Typography and color

    Style readable text and accessible color systems.

    1. ✓ Set text size and weight
    2. ✓ Use font families
    3. ✓ Apply colors and opacity
    4. ✓ Add a dark color scheme
    5. ✓ Style readable prose
    6. ✓ Check your understanding: typography and colors

  5. Responsive and interactive states

    Compose mobile-first, focus, hover, group, and peer states.

    1. ✓ Use mobile-first responsive variants
    2. ✓ Style interaction states
    3. ✓ Coordinate state with group and peer
    4. ✓ Use container query variants
    5. ✓ Respect reduced motion
    6. ✓ Check your understanding: responsive design and states

  6. Customization and debugging

    Work with theme tokens and diagnose generated-class problems.

    1. ✓ Customize with theme variables
    2. ✓ Add a custom utility
    3. ✓ Know when to write CSS
    4. ✓ Debug missing classes
    5. ✓ Build a complete Tailwind page
    6. ✓ Check your understanding: customization and gotchas