Dev.to WebDev 🛠 Dev 👁 0 📖 3 min read

A Free Tailwind CSS Curriculum — 81 Chapters, From Utility Classes to Engine Internals

A Free Tailwind CSS Curriculum — 81 Chapters, From Utility Classes to Engine Internals Most Tailwind tutorials teach the same thing: flex, p-4, text-lg, bg-blue-500, hover:, md:. Then they stop. The real questions com

A Free Tailwind CSS Curriculum — 81 Chapters, From Utility Classes to Engine Internals

Most Tailwind tutorials teach the same thing: flex, p-4, text-lg, bg-blue-500, hover:, md:. Then they stop.

The real questions come after that. How does the scanner actually find class names? What changed in v4's Rust rewrite? How do you write a plugin? Why is my CSS bundle growing?

I found a curriculum that answers those. It's on KandZ Tuts, and it's 81 chapters, organized as a single progression from the utility-first paradigm to the internals of the engine.

Here's the breakdown.

Foundations (1–6)

The utility-first paradigm vs BEM, setup via @tailwindcss/vite and the CLI, the CSS-first configuration syntax (@import "tailwindcss" and @theme), the Lightning CSS Rust engine architecture, automatic content detection, and native CSS variables as design tokens.

Layout Primitives (7–19)

Spacing scale, sizing utilities, the OKLCH color system, arbitrary values (-[...]), typography, text alignment and truncation, Flexbox, flex grow/shrink/order/basis, Grid, dynamic grid sizes, box model, positioning, and z-index stacking contexts.

Visual Styling (20–29)

Backgrounds and color-mix(), gradients, borders and rings, shadows, opacity and backdrop filters, 2D transforms, 3D transforms, transitions, animations, and enter/exit animations with @starting-style.

Variants (30–41)

Pseudo-class variants, state variants, structural variants, the not-* variant, group-* and peer-*, named groups and peers, responsive breakpoints, custom breakpoints and container queries, dark mode strategies, media condition variants, arbitrary variants, and data attribute variants.

Architecture (42–55)

Cascade layers, @apply and custom utilities, @utility and @variant directives, @plugin, the typography plugin, form styling, the container query plugin, RTL with logical properties, accessibility utilities, headless component libraries, tailwind-merge and cva, the shadcn/ui pattern, CSS preprocessing and nesting, and upgrading from legacy configs.

Advanced Patterns (56–66)

Dynamic theme switching, fluid typography with clamp(), custom color functions, aspect ratio, Grid subgrid, custom scrollbars and scroll-driven animations, masking and clip-path, the View Transitions API, custom keyframes, Web Components and Shadow DOM, and micro-frontend CSS isolation.

Plugin Development (67–69)

Custom JavaScript plugins with the plugin API, dynamic functional utilities, and custom variant functions.

Engine Internals (70–74)

The Rust-based parsing engine, AST code scrapes and JIT generation, class name hashing and bundle minification, custom ESLint and Stylelint rules, and CI/CD unused-class auditing.

Beyond the Browser (75–79)

Email templates with Maizzle and react-email, Server-Driven UI, legacy CSS migration, performance profiling, and the standalone binary CLI for non-Node workflows.

Chapter 80: How the Scanner, Class Parser, and CSS Writer Work Together

Chapter 81: The Cheatsheet

Why the Engine Internals Matter

Chapters 70–80 are the reason to read this curriculum.

Most resources stop at "here's how @apply works." This one goes into how Tailwind actually generates CSS—the Rust-based Oxide engine, AST scanning, JIT on-demand class generation, class hashing, and the interaction between the scanner, parser, and writer.

That's what lets you diagnose a bloated bundle instead of guessing at content paths. It's the difference between using Tailwind and understanding it.

The v4 Rewrite

Chapters 3–6 cover what changed in Tailwind v4: the CSS-first configuration that replaced tailwind.config.js, the @theme directive, native CSS variables as design tokens, and the Rust engine that dropped full builds from seconds to milliseconds.

If you learned Tailwind on v3, these chapters are the migration path. If you're starting fresh, they're the reason v4 feels different from every tutorial written before 2025.

The Plugin Section

Chapters 67–69 are unusual for a Tailwind curriculum. Most stop at using utilities. This one teaches you to extend the framework—custom plugins with the plugin API, dynamic functional utilities, and custom variant functions.

If you've ever wanted to add a utility that Tailwind doesn't ship, this is where that gets explained.

Who This Is For

  • Beginners: Start at Chapter 1 and read in order.
  • Experienced Tailwind developers: Jump to Chapter 70 (the Rust engine), Chapter 67 (plugin development), or Chapter 74 (CI/CD auditing) if those are gaps.
  • Design system architects: Start at Chapter 6 (design tokens) and read through Chapter 56 (multi-brand theming).

The Link

Tailwind CSS — KandZ Tuts

Free, no signup, 81 chapters.

If you've been writing Tailwind for years but never understood how the scanner works, or you're starting from scratch and want a path that doesn't stop at flex, this is the most complete free curriculum I've found.

What Tailwind topics do you wish had better free resources? Let me know in the comments.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.