Learn Tailwind CSS (v4) by doing. Each lesson is a set of live, editable examples — read the why, then tweak the code and watch the preview update.
Tailwind is shorthand for CSS, not a replacement — be comfortable with both of these first.
Before you start
If you want to practice the exercises in this course on your computer:
Ctrl+`).pnpm create next-app@latest my-app --yes if you are using pnpm, or npx create-next-app@latest my-app --yes if you are using npm. This creates a my-app folder containing a Next.js project that already includes Tailwind CSS.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.app/page.tsx — the page updates every time you save the file.Core Concepts
Get hands-on with Tailwind's utility-first approach — read class names like CSS shorthand, reach for arbitrary values, and learn the modifiers that tweak any utility.
Spacing & Sizing
Control padding, margin, width, height, and the gaps between elements — the utilities you'll reach for in nearly every component.
Flexbox
Build real layouts with Tailwind's flexbox utilities — direction, alignment, wrapping, and growth — then put it all together in a navbar.
Grid
Lay out two-dimensional designs with grid-template-columns, spanning, gaps, and auto-flow — then build a responsive card grid.
Typography
Style text with font family, size, weight, color, alignment, and truncation utilities — the core toolkit for readable UI copy.
Backgrounds, Borders & Effects
Add color, gradients, borders, shadows, and rings to give elements depth and visual hierarchy.
Responsive Design
Design mobile-first and adapt layouts at each breakpoint with sm:, md:, lg:, and container queries.
States & Dark Mode
Style elements based on interaction, sibling/parent state, and color scheme — hover, focus, group, peer, and dark mode.
Theming, Animations & Reuse
Define your own design tokens with @theme, animate with transitions and keyframes, and extract repeated utility groups into reusable classes.