Sign in Get started

Free tutorial · 27 lessons

Tailwind CSS Tutorial

Learn Tailwind CSS v4 step by step with live examples on every page: utility classes, colours, typography, spacing, flexbox, grid, responsive design, container queries, hover and focus states, dark mode, animation, theming with @theme, reusable components, forms, accessibility and upgrading from v3.

Start learning →

Tailwind Basics

  1. Tailwind CSS Introduction — What Tailwind CSS is, how utility-first styling works, and why it's become one of the most popular ways to style websites.
  2. Get Started with Tailwind CSS — Three ways to add Tailwind CSS to a project: the Play CDN for quick experiments, the Vite plugin for apps, and the CLI for any site.
  3. Reading Utility Classes — How Tailwind class names are built, the spacing scale, modifiers such as hover: and md:, and opacity with a slash.
  4. Colors — Tailwind's colour palette, shades from 50 to 950, text, background and border colours, and transparency with the slash syntax.
  5. Typography — Font size, weight and family, line height, letter spacing, text colour and alignment, truncating text, and balanced headings.
  6. Padding, Margin and Gaps — Adding space inside and around elements with padding, margin, space-between and gap utilities.
  7. Width, Height and Size — Setting widths and heights with the spacing scale, fractions, screen units and max-width, plus the size-* shortcut.
  8. Borders, Radius, Shadows and Rings — Border width and colour, rounded corners, box shadows, rings for focus states, and dividers between items.
  9. Tailwind CSS History & Versions — How Tailwind CSS started as a side project in 2017, how utility-first CSS went mainstream, every major version from 0.1 to 4.3 on one timeline, and what changed in v4.

Layout

  1. Display and Position — Showing and hiding elements, block and inline, relative and absolute positioning, sticky headers and z-index.
  2. Flexbox — Building rows and columns with flex: direction, alignment, justification, wrapping, grow and shrink, with live examples.
  3. CSS Grid — Laying out content in rows and columns with grid: columns, spans, gaps, auto-fitting card grids and page layouts.
  4. Responsive Design — Mobile-first breakpoints with sm:, md:, lg:, xl: and 2xl: prefixes, and how to build layouts that adapt to any screen.
  5. Container Queries — Making components respond to the size of their container instead of the screen, with @container and @sm:, @md: variants.

Interactivity and States

  1. Hover, Focus and Other States — Styling interactive states with variants: hover, focus, focus-visible, active, disabled, first, last, odd and more.
  2. Group, Peer and Has — Styling an element based on its parent's or sibling's state with group-*, peer-* and has-* variants.
  3. Dark Mode — Adding dark mode with the dark: variant, following the system setting or a toggle with a class, and choosing good dark colours.
  4. Transitions and Animation — Smooth hover effects with transition and duration, transforms like scale and rotate, built-in animations, and respecting reduced motion.

Customizing Tailwind

  1. Theme Variables (@theme) — Customizing colours, fonts, spacing and breakpoints with CSS theme variables in @theme, Tailwind v4's CSS-first configuration.
  2. Arbitrary Values and Properties — One-off values with square brackets such as w-[37rem] and bg-[#bada55], CSS variables in classes, and arbitrary properties.
  3. Reusing Styles — How to avoid repeating long class lists: loops, components and partials, @apply for small cases, and custom @utility classes.
  4. Styling Forms — Accessible, good-looking form inputs, selects, checkboxes and validation states with Tailwind utilities.

Tailwind in Real Projects

  1. Tailwind with React, Vue, Laravel and Next.js — How Tailwind fits into popular frameworks: setup, writing classes in JSX and templates, conditional classes, and component libraries.
  2. Accessibility with Tailwind — Accessible Tailwind interfaces: focus styles, screen-reader-only text, colour contrast, motion preferences, and ARIA-based styling.
  3. Upgrading from Tailwind v3 to v4 — What changed in Tailwind CSS v4, the renamed and removed classes, the new CSS-first setup, and how to upgrade a project safely.
  4. Best Practices and Common Mistakes — Writing maintainable Tailwind: full class names, components, consistent tokens, readable class order, and avoiding the common mistakes.
  5. Tailwind CSS Next Steps — Where to go next: practice projects, the Tailwind in Production course, cookbook recipes, interview questions and official resources.

Was this page helpful?