Blog
4 min read

What Is Tailwind CSS? Why Every AI-Built App Seems to Use It

Tailwind CSS styles your app with small utility classes written straight in the HTML. What Tailwind is, how it differs from normal CSS and Bootstrap, why AI tools love it, what changed in Tailwind v4, and how to read those long class lists.

Open the code of almost any app built with Lovable, v0, Bolt or Claude, and you'll see HTML covered in strings like flex items-center gap-4 rounded-lg bg-white p-6 shadow-md. That's Tailwind CSS — and once you can read it, a lot of AI-generated code makes much more sense.

The short version

Tailwind CSS is a way of styling web pages with lots of tiny, single-purpose class names — "utilities" — written directly on the elements they style. Instead of writing CSS rules in a separate file, you compose the look from building blocks.

(Need a refresher on what CSS is? See HTML, CSS and JavaScript explained.)

Normal CSS vs Tailwind

With normal CSS, you invent a class name and define it elsewhere:

<button class="buy-button">Buy now</button>

.buy-button {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

With Tailwind, the styles are the class names:

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Buy now</button>

Each class does one thing: bg-blue-600 sets the background, px-4 adds horizontal padding, rounded-lg rounds the corners. Tailwind generates only the CSS for classes you actually use, so the final file stays small.

Reading Tailwind classes

Most class names follow patterns you'll pick up quickly:

Class Meaning
p-4, px-4, mt-2 padding all round, padding left/right, margin top
text-lg, font-bold text size, weight
bg-gray-100, text-red-600 background and text colours (100 light → 900 dark)
flex, grid, gap-4 layout
w-full, max-w-md width
rounded-lg, shadow-md corners, shadow

Prefixes apply a class only in certain situations:

So p-4 md:p-8 means "padding 4 on phones, padding 8 on larger screens".

Why AI tools love Tailwind

  • Everything is in one place. The model writes the structure and the styling together, in one file, without coordinating a separate stylesheet.
  • No naming. It never has to invent class names or worry about clashes.
  • Consistency. Spacing and colours come from a fixed scale, so generated designs look tidy by default.
  • It's everywhere. Tailwind is extremely popular, so models have seen huge amounts of it. Component libraries like shadcn/ui are built on it too.

The downsides

  • Long class lists can be hard to read and review.
  • Repetition. The same 12 classes on 30 buttons — the usual fix is a reusable component (a <Button> in React).
  • You still need to understand CSS. Tailwind is CSS with shorter names; when layout breaks, CSS knowledge is what fixes it.

Tailwind vs Bootstrap

Bootstrap gives you finished components — a btn btn-primary button looks like a Bootstrap button. Tailwind gives you building blocks and no default look. Bootstrap is faster for a standard-looking admin page; Tailwind is easier to make look like your design. Most new projects, and nearly all AI app builders, choose Tailwind.

What changed in Tailwind v4

Tailwind v4 (current releases are in the 4.x line) simplified setup. The biggest difference you'll notice:

  • Configuration moved into CSS. Older projects had a tailwind.config.js file. In v4 you add @import "tailwindcss"; to your CSS and customise colours and fonts with a @theme block in the CSS itself.
  • Faster builds from a new engine.

If an AI tool generates a tailwind.config.js for a v4 project — or v4 syntax for a v3 project — that version mismatch is a common source of "my styles aren't applying". Check the tailwindcss version in package.json and tell your AI tool which one you're on.

The summary

  • Tailwind styles elements with small utility classes written directly in the markup.
  • Prefixes like hover:, md: and dark: apply styles conditionally.
  • AI tools favour it because structure and style live together.
  • v4 moved configuration into CSS; version mismatches cause many styling bugs.

EasySpawn gives Claude Code a server where it can run your app's dev server and build, so styling changes are checked in a real running app rather than guessed at. See how it works or join the waitlist.

Related: What Is shadcn/ui? · What Is React? · What Is Vite? · Web Accessibility Basics · How to Center a Div

Keep reading