Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a comprehensive set of low-level utility classes for building fully custom designs directly in HTML markup, without writing traditional hand-authored CSS. Instead of predefined components, Tailwind gives you composable building blocks like flex, pt-4, text-center, and rotate-90 that can be combined to construct any design, directly in your markup.

Since version 4, Tailwind is powered by a new high-performance engine built partly in Rust (the Oxide engine) with a CSS-first configuration model, offering full builds up to 5x faster and incremental builds over 100x faster than v3. It integrates natively with Vite, PostCSS, and standalone CLI builds, and ships first-class plugins for frameworks like Next.js and tooling like the Vite plugin and PostCSS plugin.

What You Get

• A utility class engine covering layout, spacing, typography, color, flexbox/grid, transitions, and responsive/state variants (hover, focus, dark mode, arbitrary breakpoints)
• A CSS-first configuration model (v4) using @theme directives instead of a JavaScript config file, plus automatic content detection so no manual content globs are required in most setups
• The Oxide engine — a Rust-based parser and scanner (crates/oxide) that dramatically speeds up full and incremental builds
• First-party build integrations: @tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, and a standalone binary with no Node.js dependency
• An upgrade tool (@tailwindcss/upgrade) that automates migration from v3 configs and class names to v4
• A plugin API for extending the design system with custom utilities, variants, and component classes

Common Use Cases

• Styling a new web app or marketing site entirely with utility classes instead of maintaining a separate CSS/SCSS codebase
• Rapidly prototyping and iterating on UI designs directly in JSX/HTML without context-switching to stylesheet files
• Building a consistent design system by constraining spacing, color, and typography scales through the @theme configuration
• Enforcing dark mode, responsive layouts, and interactive states (hover/focus/active) via built-in variants rather than custom media queries
• Integrating utility-first styling into component libraries and design systems shared across a Next.js, Vite, or framework-agnostic build pipeline

Under The Hood

Architecture Tailwind v4’s core lives in packages/tailwindcss/src, where index.ts orchestrates a compilation pipeline: raw CSS with @tailwind/@import directives is parsed by a hand-rolled CSS parser (css-parser.ts) into an AST (ast.ts), at-rules like @apply and @import are substituted (apply.ts, at-import.ts), then compile.ts’s compileCandidates() walks candidate class strings, resolves them against a DesignSystem (design-system.ts) built from theme tokens (theme.ts), and emits sorted, deduplicated CSS AST nodes that are serialized back to CSS (toCss). Class-name scanning and file-system globbing are delegated to the Rust tailwindcss-oxide crate (crates/oxide), which uses rayon for parallelism and a custom fast-glob/ignore implementation to scan source files for candidate utility strings at native speed, communicating with the JS/TS core over a Node native addon (crates/node). The monorepo (managed with pnpm workspaces + Turborepo) separates the core engine (packages/tailwindcss) from build-tool integrations (@tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, @tailwindcss/webpack), a browser-only build (@tailwindcss/browser), and a v3-to-v4 codemod tool (@tailwindcss/upgrade).

Tech Stack The core engine is TypeScript compiled with tsup, targeting dual CJS/ESM output with .d.mts type declarations. The scanning layer is Rust (edition 2021) using rayon for parallel file walking, regex and a custom fast-glob/ignore implementation for candidate extraction, and napi-style bindings (crates/node) to expose the scanner to JavaScript. lightningcss is used for CSS minification/transforms, and @parcel/watcher-style file watching backs the dev-mode incremental rebuild path. Testing uses Vitest for the TypeScript layers (*.test.ts colocated with source, 44+ test files) and cargo test for the Rust crates; Playwright covers browser-integration tests. The workspace is orchestrated with pnpm + Turborepo and versioned via scripts/version-packages.mjs.

Code Quality Test coverage is dense and colocated — nearly every core module (ast.ts, compile.ts, candidate.ts, css-parser.ts, theme.ts) has a matching .test.ts file plus, for hot paths, a .bench.ts benchmark file (e.g. candidate.bench.ts, css-parser.bench.ts, intellisense.bench.ts), reflecting an explicit performance budget alongside correctness. Snapshot tests (__snapshots__) pin generated CSS output for regression safety. TypeScript is used in strict mode throughout with explicit exported types (DesignSystem, AstNode, Candidate, Variant), and Rust code is organized into small, single-responsibility crates (ignore, classification-macros, oxide, node) rather than one monolithic crate, easing independent testing and review.

API Design The public surface is deliberately small: a CSS-first @import "tailwindcss" entry point plus a handful of named exports (css.exports) for compatibility shims (colors, defaultTheme, plugin) aimed at projects migrating from the v3 JS-config model. Zero-config setup is the default — content scanning, theme defaults, and build wiring require no manual configuration for common frameworks — while power users can still extend the design system via @theme CSS directives or the JS plugin() API for custom utilities and variants. Documentation is hosted separately at tailwindcss.com rather than in the repo, but the README and CONTRIBUTING docs point clearly to install instructions per build tool (Vite, PostCSS, CLI, standalone binary), keeping the getting-started path short regardless of framework.