Tailwind CSS

Tailwind CSS is a utility-first CSS framework that gives developers a large set of low-level utility classes (flex, pt-4, text-lg, bg-slate-900) which compose directly in HTML / JSX, instead of writing custom CSS rules. Tailwind has become the dominant styling approach for modern React, Vue, and Svelte projects.

Core ideas

• Utility-first. Style by composing small primitives; no naming, no CSS file proliferation.
• Design tokens. Spacing, colour, typography, shadow tokens defined in one config and reused everywhere.
• JIT engine. Generates only the utilities a project actually uses; bundle stays small even with a huge utility set.
• Responsive prefixes. md:, lg:, dark:, hover:, focus: compose for breakpoints, modes, and states.
• Plugins. First-party plugins for forms, typography, aspect ratio, container queries, line-clamp.

Companion ecosystem

• shadcn/ui. Copy-paste React components built on Tailwind and Radix; the dominant new design system pattern.
• Tailwind UI. Official paid component library from the Tailwind team.
• Headless UI, Radix UI. Unstyled accessible primitives often paired with Tailwind for styling.
• Tailwind CSS v4. Reduced configuration, native cascade layers, faster engine.

🔗

Related Terms React, Vue, Svelte, Next.js.