Learn Tailwind CSS Online — 48 Interactive Lessons with Live Preview

Tailwind CSS is now the dominant CSS framework for modern web development. It ships with Next.js, SvelteKit, Astro, and Laravel by default. Every major design system company has published Tailwind component libraries. And hiring managers who used to ask "do you know CSS?" now ask "do you know Tailwind?" The framework's utility-first approach is genuinely different from writing custom CSS or using component libraries like Bootstrap — and that difference is what makes Tailwind feel confusing at first and extremely productive once it clicks. The Tailwind CSS Playground gives you 48 structured, interactive lessons that teach every layer of Tailwind from first class to production pattern, with a live preview that updates as you type.

The playground uses the official Tailwind Play CDN in every lesson, so the full JIT engine — including arbitrary values, all modifiers, and every built-in utility — is available without any Node.js, npm, PostCSS, or build configuration. Open the playground and start writing Tailwind classes immediately.

The curriculum is organized into 15 chapters that build on each other deliberately. The Foundations chapter opens with the core idea behind utility-first CSS: instead of writing a custom class and then writing CSS for it, you compose utilities directly in HTML. Three lessons cover the utility-first mental model, Tailwind's 10-shade color scale system (bg-blue-500, text-gray-900, border-red-300), and state modifiers (hover:, focus:, active:, disabled:) that apply utilities on interaction.

The Typography, Spacing, and Sizing chapters cover the classes you will use in every project: text-xl, font-bold, leading-relaxed, tracking-wide; p-4, px-6, mt-8, gap-3; w-full, h-screen, max-w-lg, min-h-0. These are the utilities that replace 80% of the custom CSS most developers write by hand.

The Flexbox chapter (3 lessons) covers everything the Flexbox spec provides via Tailwind: flex, flex-row, flex-col, flex-wrap, justify-start/center/between/around/evenly, items-start/center/end/stretch, flex-1, flex-grow, flex-shrink-0, and self-* for overriding individual item alignment. The CSS Grid chapter covers grid-cols-{n}, column and row spanning with col-span-* and row-span-*, and automatic placement with grid-flow-col — including the auto-fill and auto-fit responsive grid patterns that eliminate most media queries for card grids.

The Borders & Effects chapter teaches rounded-* for border radius, border and border-{color}, ring-* for box shadows that work in focus states, shadow-sm/md/lg/xl/2xl, opacity-*, and backdrop-blur-* for glassmorphism effects. The Transitions & Animation chapter adds motion: transition, duration-300, ease-in-out, delay-150 for smooth property changes; scale-105, rotate-45, translate-x-2 for transforms; and the three built-in keyframe animations — animate-spin, animate-pulse, and animate-bounce.

The Responsive Design chapter is where utility-first really demonstrates its power. Every Tailwind utility can be prefixed with a breakpoint — sm:flex-row applies only at 640px+, lg:grid-cols-3 applies only at 1024px+. No media query blocks, no context switching between files. Three lessons cover the breakpoint system, the container centering pattern, and a complete dark mode implementation with dark: modifier classes.

The Group & Peer chapter teaches two of Tailwind's most distinctive patterns. Group modifiers (group, group-hover:, group-focus:) let parent hover states cascade to child elements — one hover on a card div can change the title color, show an arrow icon, and lift the shadow simultaneously. Named groups (group/nav, group-hover/nav:) handle nested interactive regions without conflicts. Peer modifiers (peer, peer-invalid:, peer-checked:, peer-focus:) style sibling elements based on form input state — the foundation of CSS-only form validation UI.

The @apply & Config chapter covers two production workflows: the @apply directive for extracting repeated utility groups into a single reusable class, and custom tailwind.config.js theme.extend entries for adding custom colors, spacing, font families, and breakpoints to the design system.

The Component Patterns chapter (4 lessons) builds complete, real UI with Tailwind: card components with image, body, and footer; responsive navigation bars with mobile hamburger menu states; form elements with labels, inputs, selects, checkboxes, and validation states; and badge and chip patterns for tags, status indicators, and notification counts.

The Accessibility chapter covers sr-only for screen-reader-only text (visually hidden but available to assistive technology), focus-visible: for keyboard-only focus rings that don't appear on mouse click, and aria-* modifiers (aria-checked:, aria-disabled:, aria-expanded:) that style elements based on ARIA attributes — letting you build fully accessible interactive components without JavaScript state management.

The Advanced Patterns chapter (7 lessons) goes deep on Tailwind's most powerful features: arbitrary values in square brackets (w-[327px], grid-cols-[repeat(auto-fill,minmax(180px,1fr))]), arbitrary variants ([&>li]:mb-2, [&:nth-child(3)]:font-bold), the has-* selector modifier, @layer for adding custom utilities without specificity conflicts, motion-safe: for respecting reduced-motion preferences, print: styles for print-specific layouts, animate-pulse skeleton loading screens, and modern dialog/popover HTML patterns styled with Tailwind.

The Tailwind v4 chapter covers the major changes in Tailwind CSS v4: the new CSS-first configuration approach using @import "tailwindcss" and @theme instead of tailwind.config.js, new built-in variants and color features, and how utility composition changes in v4. Understanding these differences is essential for any developer starting a new project or upgrading from v3.