Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of giving you pre-built components like buttons and cards, it gives you small, single-purpose classes — things like flex, pt-4, text-center, and bg-blue-500 — that you compose directly in your HTML. The result is that your CSS never grows unboundedly and your designs stay consistent without writing custom stylesheets.

How utility-first works in practice

The premise takes some adjustment if you're used to writing semantic CSS. Instead of defining a .card class in a stylesheet, you put the styling directly on the element in your template. This feels repetitive at first but has practical advantages: you can see all the styling for an element in one place, you can't accidentally break something else by changing a shared class, and the final CSS bundle only contains the classes you've actually used.

Customisation and the config file

Tailwind is configured through a tailwind.config.js file where you define your design tokens — colours, spacing scale, typography, breakpoints, and more. The framework generates utility classes from these values, so your Tailwind setup reflects your specific design system rather than a generic default. Plugins extend the framework further for things like forms, typography, and aspect ratios.

Performance

Tailwind scans your templates and only generates CSS for the classes you've used. In production builds the stylesheet is typically very small. This is a significant improvement over approaches that ship a large CSS framework and then override it, where unused styles accumulate over time.

Pricing

Tailwind CSS is open source and free. Tailwind Labs, the company behind it, generates revenue through Tailwind UI — a commercial component library built with Tailwind — and through Headless UI, their unstyled component library.