Tailwind CSS is a styling framework where you design directly in the HTML using many small, single-purpose class names. Instead of writing a separate stylesheet rule for a button, you write class="px-4 py-2 rounded-lg bg-emerald-700 text-white" and the button is padded, rounded, green and white-texted.
How the utility-first approach works
Each Tailwind class sets roughly one CSS property using a value from a shared scale: p-4 is padding of 1rem, text-lg is a set font size, gap-6 is spacing between items. Prefixes apply styles conditionally: md:flex only from medium screens up, hover:bg-emerald-800 on hover, dark: in dark mode. Those breakpoint prefixes generate media queries for you.
Tailwind scans your project files for class names and generates CSS only for the ones you actually use, so the final stylesheet stays small. Version 4, released in early 2025, moved configuration into the CSS file itself and rebuilt the engine for speed. Colours, fonts and spacing live in a theme, which acts as a lightweight design system.
An example: one pricing card, three plans
A gym's site shows three membership cards. In a React project, the card is one component styled with Tailwind classes, and the "most popular" plan just adds ring-2 ring-emerald-600. Because each card's styles sit right next to its markup, changing the design means editing one file, not hunting through a stylesheet to find which rule applies.
Trade-offs worth knowing
Critics point out that markup gets long and cluttered, and that it is a different habit from classic stylesheets. Supporters value that styles cannot leak between components and that nobody has to invent class names. Unlike Bootstrap, Tailwind ships no finished look, so sites built with it do not share a default appearance. Generated sites from We.Inc use Tailwind CSS with React, Vite and TypeScript.
For an owner, the practical point is maintainability: Tailwind is widely known among front-end developers, so a site built with it is easy to hand over.
Common Tailwind mistakes
- Building class names from string pieces. Tailwind only finds complete names in your files, so
"bg-" + colourproduces no CSS. - Hard-coding arbitrary values everywhere like
mt-[13px], which abandons the consistent spacing scale. - Copying the same long class list into many places instead of making one component.
- Forgetting mobile-first order. Unprefixed classes apply to phones; prefixes add larger-screen changes.
Related terms
- CSS: what Tailwind compiles into.
- Bootstrap: the component-first alternative.
- Design system: the shared scales Tailwind's theme encodes.
- Vite: a common build tool for Tailwind projects.