Tailwind CSS

What you'll learn

• Explain the utility-first approach and set up Tailwind CSS v4 in a project.
• Style spacing, typography, colour, flexbox and grid layouts with utility classes.
• Build responsive, interactive and dark-mode interfaces with variants.
• Customise design tokens with @theme and extend Tailwind with arbitrary values and custom utilities.
• Build accessible, reusable components and keep class lists maintainable in production.

Syllabus

Utility-First Fundamentals

1. What Utility-First Means
2. Setting Up Tailwind CSS v4
3. How Classes Become CSS

Spacing, Typography and Colour

1. Spacing and Sizing
2. Typography
3. Colour and Opacity

Layout With Flexbox and Grid

1. Flexbox
2. CSS Grid
3. Positioning and Layering

Responsive Design, States and Dark Mode

1. Mobile-First Breakpoints
2. Hover, Focus, Group and Peer
3. Dark Mode

Customising Tailwind

1. Design Tokens With @theme
2. Arbitrary Values and Properties
3. Custom Utilities, Variants and @apply

Building Components

1. Buttons and Variants
2. Forms
3. Extracting Reusable Components

Modern CSS Features and Accessibility

1. Container Queries
2. Transitions and Animation
3. Accessibility Utilities

Tailwind in Production

1. Editor and Formatting Tooling
2. Conditional Classes and Conflicts
3. Migrating From v3 to v4
4. A Tailwind Project Checklist