Guides

If you have looked at modern web code and seen class names like flex items-center gap-4 rounded-lg bg-blue-600, you have met Tailwind CSS. It is one of the most popular ways to style websites in 2026, and it works very differently from the CSS most people learn first. This guide explains what Tailwind is, how it works, and whether it suits your project.

Tailwind CSS is a utility-first CSS framework. Instead of writing custom style rules in a separate file, you build a design by combining small, single-purpose classes directly in your HTML. One class sets the padding, another the colour, another the font size. Together they style the element, and you write almost no CSS by hand.

How Tailwind differs from traditional CSS

Traditional CSS asks you to name things - a card, a button - and then describe each one in a stylesheet. Tailwind flips that around. It hands you a large toolbox of ready-made utility classes, and you assemble them like building blocks. The styling lives in the markup, right next to the element it affects, instead of in a file far away.

That sounds like a small change, but it removes two everyday frustrations: inventing good class names, and jumping between your HTML and your CSS file to keep them in sync. With Tailwind, what you see in the markup is what you get.

Why developers like it

The main appeal is speed and consistency. You build straight in the HTML, using a fixed design system of spacing, colours and sizes that ships with Tailwind. Because those values are limited on purpose, a whole team's pages line up and look consistent without much effort or arguing over pixels.

• flex - turns an element into a flexbox container for layout
• p-4 and m-2 - set padding and margin from a fixed spacing scale
• text-center - centres the text inside an element
• bg-blue-600 and text-white - pick a background and text colour from the palette
• rounded-lg - rounds the corners of an element
• shadow-md - adds a medium drop shadow

Tailwind also keeps the file you ship small. It scans your project, sees which utility classes you actually used, and strips everything else out of the production build. So even though the toolbox is enormous, the final stylesheet is tiny - which helps the page load quickly.

The honest downside

The common criticism is that the markup gets cluttered. A single element can carry a dozen classes, which some developers find ugly or hard to read at first. It is a real trade-off: you swap tidy CSS files for busier HTML.

The usual answer is to extract repeated patterns into components - in React, Vue or with Tailwind's own tools - so you write the long list of classes once and reuse it everywhere. Done that way, the clutter mostly disappears and the speed remains.

How to start using Tailwind

Getting started is quick. To simply try it, you can drop in the Tailwind Play CDN script and start writing utility classes on a plain HTML page with no build step at all. It is the fastest way to experiment, though it is meant for prototyping rather than production.

For a real project, you install Tailwind through your build tool - a Vite or PostCSS plugin, or the official integration for frameworks like Next.js, Nuxt or SvelteKit. From Tailwind v4 onward the setup is leaner, configured largely in CSS itself, and the build step scans your files for the classes you actually use so the shipped stylesheet stays small. Once it is wired in, you write classes and the framework handles the rest.

Tailwind vs Bootstrap: utility-first or component-first?

The framework Tailwind is most often compared to is Bootstrap, and the difference is philosophical. Bootstrap is component-first: it ships ready-made components like buttons, cards and navbars that look a certain way out of the box, so you get a finished look fast but tend toward a recognisable style. Tailwind is utility-first: it gives you the raw building blocks and no pre-designed components, so you can build any look you want but do more of the assembly yourself.

Neither is objectively better. Bootstrap can be quicker for a standard admin panel or a prototype where a conventional look is fine. Tailwind tends to win when you want a custom design without fighting a framework's defaults, and when a team values consistency through a shared design system. Many developers who start on Bootstrap move to Tailwind once they want more control over the final appearance.

The bottom line

Tailwind CSS is a utility-first framework that styles pages by composing small classes in your markup, backed by a built-in design system and a tiny production build. It is not the only way to write CSS, and it is not for everyone - but its speed and consistency are why so many sites in 2026 are built with it.