Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of writing custom class names and separate stylesheets (.card { padding: 1rem; ... }), you compose designs directly in markup from small, single-purpose classes like p-4, rounded-lg, text-slate-700, and md:flex. A build step scans your source files and generates only the CSS you actually use, so production stylesheets are typically tiny.

Tailwind is now one of the most popular ways to style web applications, used across React, Vue, Svelte, and server-rendered templates, and it underpins component libraries such as shadcn/ui and Tailwind Plus. Tailwind v4 moved configuration into CSS itself, uses native CSS features like cascade layers and custom properties, and ships a much faster Rust-powered engine.

TL;DR

Quick Example

A responsive, accessible card with hover, focus, and dark-mode styles:

Tailwind v4 setup and theme tokens, all in CSS:

A reusable React component with variants and a class-merging helper:

Core Concepts

Utility-First

Each class does one thing (mt-4 → margin-top: 1rem). You build components by combining them. Benefits: no naming, no dead CSS, styles live next to markup, and a constrained scale keeps spacing and color consistent. Trade-off: markup gets long, which you manage with components.

Variants

Variants stack: md:hover:bg-slate-100.

The Theme and Design Tokens

Tailwind's default theme provides spacing, colors, typography, radii, shadows, and breakpoints. In v4, @theme defines tokens as CSS variables that generate utilities and are usable in custom CSS (var(--color-brand-500)). This maps cleanly onto design tokens. v3 projects configure the same through tailwind.config.js.

Arbitrary Values

When you need a one-off, use brackets: top-[117px], grid-cols-[1fr_2fr], bg-[url('/hero.png')]. If the same arbitrary value appears repeatedly, promote it to a theme token.

Reuse Strategies

Dark Mode

The dark: variant uses prefers-color-scheme by default; switch to a class- or data-attribute-based strategy for user-controlled themes. Using CSS-variable tokens lets you theme without doubling every class.

Best Practices

Build Components Early

When a pattern repeats, extract a component instead of copying long class strings.

Sort Classes Automatically

prettier-plugin-tailwindcss orders classes consistently, making diffs and reviews easier.

Merge Conflicting Classes Safely

Use tailwind-merge (usually via a cn() helper) so className overrides like p-2 correctly replace p-4.

Keep Class Names Statically Discoverable

Tailwind scans source text. Write full class names ("bg-red-500"), not concatenations like ` bg-${color}-500 `; map props to complete class strings.

Design Accessible Focus States

Always style focus-visible: states and check color contrast for text utilities. See Accessibility.

Customize the Theme to Your Brand

Replace default palettes and fonts with your tokens so the whole team uses the same scale.

Common Mistakes

Dynamic Class Construction

text-${size} won't be generated because the full class never appears in source. Use lookup maps.

@apply Everywhere

Rewriting every component as @apply classes loses Tailwind's benefits and adds indirection.

Arbitrary Values Instead of Tokens

Dozens of text-[#3a3a3a] and mt-[13px] values erode consistency. Add tokens instead.

Ignoring Mobile-First Semantics

md: means "medium and up." Unprefixed utilities apply to all sizes, so write the mobile style first.

Unreadable Mega-Strings

Very long class lists in one element usually signal a missing component or variant abstraction.

Comparison

FAQ

What is Tailwind CSS?

A utility-first CSS framework that provides small, composable classes for styling directly in markup and generates only the CSS your project uses.

Isn't Tailwind just inline styles?

No. Utilities support responsive breakpoints, hover and focus states, dark mode, and other variants that inline styles can't, and they draw from a shared design system.

What changed in Tailwind v4?

Configuration moved into CSS with @theme, tokens became CSS variables, the engine was rewritten for speed, content detection became automatic, and modern CSS features like cascade layers and container queries are used natively.

How do I reuse styles in Tailwind?

Extract components in your framework, use variant helpers like cva, and reserve @apply for cases where you can't control the markup.

Is Tailwind good for large teams?

Yes, when paired with a customized theme, component library, class sorting, and conventions. The constrained scale helps large teams stay visually consistent.

Related Topics

References