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.

For component library options that work well with Tailwind, see shadcn vs Material UI. For a broader comparison of styling approaches, check Tailwind vs CSS Modules vs Styled Components.

FAQ

Does Tailwind CSS increase my HTML file size?

Not meaningfully. While your HTML has more class attributes, Tailwind’s production build purges unused classes, resulting in a tiny CSS file (typically 5-10 KB gzipped). The total page weight is usually smaller than traditional CSS approaches.

Can I use Tailwind with custom designs (not just defaults)?

Yes. Tailwind is fully customizable through its configuration file. You can define your own colors, spacing scale, fonts, breakpoints, and more. It’s a design system builder, not a fixed set of styles.

Is Tailwind CSS good for large team projects?

Yes. Tailwind enforces consistency because everyone uses the same utility classes and design tokens. There’s no risk of conflicting class names or CSS specificity wars that plague large projects with custom CSS.

Related: CSS Flexbox & Grid Cheat Sheet · What is Next.js