Skip to content

Level 1 · Entry Foundations

Goal: style a complete, responsive page with nothing but utility classes, and be able to say exactly what CSS each class produces and why one class beats another.

Three ideas carry you through all ten modules:

  1. Tailwind is a compiler, not a stylesheet you download. It scans your files for class names and generates only the CSS those classes need. When a class "doesn't work", the question is almost always "did the compiler see it, and what did it generate?". Every lesson shows the generated CSS so you build that habit.
  2. Utilities map to CSS you already know. p-4 is padding, grid-cols-3 is a grid template, items-center is align-items. Tailwind doesn't replace CSS knowledge; it gives it shorter names. Where a lesson depends on a CSS concept, it links to the matching page on the HTML & CSS course.
  3. Variants are prefixes that wrap a rule. hover:, focus-visible:, md: and group-hover: all work the same way: they add a pseudo-class, a selector or a media query around an ordinary utility.

Modules

  1. What Tailwind Is (and Isn't) — the utility-first idea, what the compiler generates, and the honest trade-offs
  2. Installing Tailwind v4: CLI, Vite & Source Detection — the one-line stylesheet, two real setups, and which files get scanned
  3. Utility Basics: Spacing, Sizing & the Scale — how names map to values, and the spacing scale built on one variable
  4. Typography Utilities — sizes with paired line heights, weight, tracking, wrapping and clamping
  5. Colors, Opacity, Backgrounds & Borders — the oklch palette, opacity modifiers, gradients, rings and shadows
  6. Layout & Flexbox Utilities — display, flex items measured, the min-w-0 fix, positioning and z-index
  7. Grid Utilities — minmax(0, 1fr), spans, arbitrary templates and subgrid
  8. Hover, Focus & Other States: group and peer — state variants, parent and sibling states, and the unnamed-peer leak
  9. Responsive Design with Breakpoint Variants — mobile first, max-* ranges, custom breakpoints and the viewport tag
  10. Project — A Landing Page — a full responsive page, checked at three widths

What you need before starting

  • HTML and CSS basics: elements, classes, the box model, and what Flexbox and Grid are for. You don't need to be an expert, but Tailwind is much easier if you can read the CSS it generates. If that's new, start with HTML & CSS Mastery Path.
  • Node.js (a current LTS release) and npm, to run the compiler. Check with node -v.
  • An editor. VS Code with the official Tailwind CSS IntelliSense extension gives you autocompletion and shows the generated CSS on hover (lesson 02).
  • A browser with DevTools. You'll use the Elements and Computed panes constantly.

No accounts, cloud services or paid tools are needed anywhere in this course.

How the examples were checked

Code labelled css under "compiled" or "from the compiler" is real output from Tailwind CSS 4.3.3 (@tailwindcss/cli), trimmed to the relevant rules. Measurements such as column widths, computed display values and file sizes were taken by rendering the example in Chromium. Where a lesson says "we tested", that's what it means. Small details (exact byte counts, the order of declarations) can differ between Tailwind releases; the behaviour taught here is stable across v4.

About versions

This course teaches Tailwind CSS v4, which moved configuration from tailwind.config.js into CSS (@import "tailwindcss" plus @theme), changed several defaults, and rewrote the engine. Most v3 tutorials you'll find online still use the old setup. If you're maintaining a v3 project, Level 3 · 08 covers the migration step by step. Run npm ls tailwindcss to see which version a project uses.