Tailwind CSS : Core Architecture

Foundational mental model for Tailwind CSS. Every other skill in this package assumes the reader has internalised the philosophy and content-scanning model documented here.

Quick Reference

Tailwind in one sentence

ALWAYS describe Tailwind as : a utility-first, constraint-based, content-scanned CSS framework where every utility class maps to a token in a centrally defined design system and the build step emits only the utilities found as literal complete tokens in source files.

Four invariants

1. ALWAYS treat the theme (tailwind.config.js in v3, @theme { } in v4) as the single source of design truth. Colours, spacing, typography, breakpoints, shadows, radii belong there, never inlined as arbitrary values for system-level decisions.
2. ALWAYS write classes as literal complete tokens in source. NEVER assemble class names with string concatenation or template literals at runtime.
3. ALWAYS compose multiple single-purpose utilities directly in markup. NEVER reach for @apply to "clean up" utility lists; extract a component instead when the same combination appears 3+ times.
4. ALWAYS rely on the cascade order Tailwind emits (base then components then utilities). NEVER fight specificity by re-declaring utility properties in custom CSS.

When Tailwind WINS