Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes, you apply small, single-purpose classes directly in your HTML.

<!-- Traditional CSS -->
<button class="primary-btn">Click me</button>

<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

No separate CSS file. No inventing class names. You style everything inline with utility classes.

Why developers use it

Speed. Once you know the class names, you style things incredibly fast without switching between HTML and CSS files.

Consistency. Tailwind gives you a design system out of the box — a fixed set of colors, spacing values, font sizes. Everything looks cohesive without effort.

No dead CSS. Tailwind scans your files and only includes the classes you actually use. A typical production build is 5-10 KB of CSS.

Responsive design is easy:

<div class="text-sm md:text-base lg:text-xl">
  Responsive text
</div>

md: means “at medium screens and up.” lg: means large screens. No media queries to write.

Tailwind vs. Bootstrap

	Tailwind	Bootstrap
Approach	Utility classes	Pre-built components
Looks like	You decide	Bootstrap-y (unless customized)
Learning curve	Memorize utilities	Learn component names
Customization	Total control	Override Bootstrap styles
Bundle size	Tiny (only used classes)	Larger (includes everything)

Bootstrap gives you a <button class="btn btn-primary"> that looks like a Bootstrap button. Tailwind gives you building blocks to make a button that looks however you want.

The “ugly HTML” argument

The biggest criticism: Tailwind HTML looks messy.

<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">

That’s a lot of classes. But in practice, you extract repeated patterns into components (React, Vue, Astro) so you only write it once:

function Card({ children }) {
  return (
    <div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
      {children}
    </div>
  );
}

Now you just use <Card> everywhere.

Getting started

npm install -D tailwindcss @tailwindcss/vite

Add it to your CSS:

@import "tailwindcss";

That’s it. Start using classes. See the Tailwind CSS cheat sheet for a quick reference of the most common utilities.

When to use Tailwind

Good fit: component-based frameworks (React, Vue, Svelte, Astro), new projects, teams that want design consistency.

Not ideal: content-heavy sites where you can’t add classes to HTML (like Markdown rendered by a CMS), or if you genuinely prefer writing traditional CSS.