Tailwind CSS Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

Tailwind CSS is a compiler that turns class names like p-4, md:grid-cols-3 and hover:bg-sky-700 into exactly the CSS your pages use. Teams adopt it because styling stays next to the markup it affects, design decisions become a shared vocabulary, and the stylesheet stops growing with every new page. It also has a reputation for "unreadable class soup" and "magic that breaks". Both reputations come from the same place: using the utilities without understanding what the compiler does with them. This course teaches both — how to build with Tailwind, and what is actually happening each time you do.

It teaches Tailwind CSS v4, which moved configuration into CSS (@import "tailwindcss" and @theme) and rewrote the engine. Level 1 covers what the compiler generates, installation and source detection, spacing, typography, colour, Flexbox, Grid, state variants including group and peer, and mobile-first breakpoints, ending with a responsive landing page. Level 2 makes Tailwind fit a real product: design tokens with @theme, a custom theme, dark mode without a flash, arbitrary values, @apply and @utility, ARIA and data-attribute variants, container queries, forms and motion, ending with an application dashboard. Level 3 opens up the engine: scanning and generation, cascade layers and Preflight, custom utilities and plugins, accessibility, the Typography plugin, class merging, design systems, migrating from v3 (with the official upgrade tool run on a real project) and production performance, ending with a tested component library. Level 4 is production: team conventions and linting, multi-brand and runtime theming, right-to-left layouts, print and accessibility media variants, modern CSS features, legacy CSS, server-rendered templates, debugging and automated testing, ending with a SaaS marketing site and app shell with a full test suite.

Every lesson has a How It Actually Works section — why bg-${color}-500 never generates CSS, why an unlayered stylesheet beats every utility, why a brand override in a section silently does nothing, why focus:outline-none with a ring leaves high-contrast users without a focus indicator.

Compiled, rendered and measured — including our own mistakes

Every compiled CSS snippet in this course is real output from Tailwind 4.3.3, and every measurement (column widths, contrast ratios, computed styles, file sizes, test results) was taken in Chromium while it was written. Several checks found problems in this course's own earlier examples — button colours below WCAG contrast, focus rings that vanish in forced-colours mode — and the lessons say so and show the fix. Where something couldn't be observed in an automated browser (screen-reader speech, other browsers' rendering), the lesson says that too.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	What the compiler does, v4 installation and source detection, spacing and sizing, typography, colour and borders, Flexbox, Grid, state variants, responsive breakpoints	9 topics + 1 project (a landing page)
Level 2 · Intermediate	`@theme` tokens, theme customisation, dark mode, arbitrary values, `@apply` and `@utility`, advanced variants, container queries, forms, motion	9 topics + 1 project (a dashboard)
Level 3 · Advanced	The scanner and compiler, layers and Preflight, plugins, accessibility, typography, class merging, design systems, v3→v4 migration, production builds	9 topics + 1 project (a component library)
Level 4 · Master	Conventions and linting, multi-brand theming, RTL, media variants, modern CSS, legacy CSS, server templates, debugging, testing	9 topics + 1 capstone (a SaaS site and app shell)

How to use this site¶

Know your CSS. Tailwind gives CSS shorter names; it doesn't replace it. If Flexbox, Grid or the cascade are unfamiliar, work alongside HTML & CSS Mastery Path — many lessons here link to the matching page there.
Keep the compiled CSS open. Most lessons show what a class compiles to. Look at your own output the same way; it answers most "why doesn't this work?" questions.
Test like a user who isn't you. Keyboard only, dark mode, a phone, "reduce motion", forced colours. Several lessons show how to automate those checks.
Next steps. For component frameworks, see React, Vue.js, Angular and Next.js Mastery Paths; for browser testing, Playwright Mastery Path.
Do the Exercise at the end of each lesson; the module-10 projects build on them.