Tailwind CSS

Pronunciation: TAYL-wind see-es-ES

Updated October 3, 20262 min read

In short

Tailwind CSS is a utility-first CSS framework: instead of custom stylesheets, you style elements with small, single-purpose classes right in your HTML.

What is Tailwind CSS?

Tailwind CSS was created by Adam Wathan and first released in 2017. Traditional CSS means inventing class names like .card-header and writing their styles in a separate file. Tailwind turns this around: it provides thousands of tiny classes, each doing one thing, such as p-4 for padding, bg-blue-600 for a background color or rounded-lg for rounded corners, and you combine them on the element.

Prefixes add conditions without leaving the HTML: md:flex applies only on medium screens and up, hover:bg-blue-700 only on hover and dark:text-white only in dark mode. The values come from a design scale of spacing, colors and font sizes, which keeps a site consistent, and you can customize that scale for your own brand.

Tailwind scans your files for the classes you actually use and generates only that CSS, so the final stylesheet stays small. Version 4, released in 2025, moved configuration into CSS itself and rebuilt the engine for much faster builds. It works with any framework, including React, Vue and plain HTML.

A common misconception is that Tailwind is the same as inline styles. Its classes support responsive breakpoints, hover and focus states, dark mode and a shared design scale, none of which inline styles can do. Long class lists can be hard to read, which teams usually solve by extracting repeated pieces into components.

Key takeaways

Tailwind CSS styles elements with small, single-purpose utility classes.
Prefixes such as md:, hover: and dark: apply styles conditionally.
A shared design scale keeps spacing, colors and sizes consistent.
Only the classes you use end up in the final CSS.
Repeated class lists are usually extracted into components.

Example

A responsive card styled with utility classeshtml

<div class="max-w-sm rounded-lg bg-white p-6 shadow md:flex md:max-w-xl dark:bg-zinc-900">
  <img class="h-16 w-16 rounded-full" src="/ada.jpg" alt="" />
  <div class="mt-4 md:mt-0 md:ml-6">
    <h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Ada Lovelace</h2>
    <p class="text-zinc-600 dark:text-zinc-400">Mathematician and writer</p>
    <button class="mt-3 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Follow</button>
  </div>
</div>

Readers ask

Is Tailwind CSS better than plain CSS?

It's a different way to write CSS rather than a replacement. Tailwind speeds up styling and keeps designs consistent, while plain CSS gives you full control and no extra build step. Many projects mix the two.

Does Tailwind make websites slower?

No. Tailwind generates only the classes you use, so the final stylesheet is usually small, often smaller than hand-written CSS for the same site.

What is the difference between Tailwind and Bootstrap?

Bootstrap provides ready-made components such as buttons and navbars with a recognizable look. Tailwind provides low-level utilities, so you build your own design from them.