Tailwind

Tailwind 4 integrates with Astro via Vite. `npx astro add tailwind` does the wiring.

3 min read Level 1/5 #astro#tailwind#css

What you'll learn

Install Tailwind with `astro add`
Use utilities in `.astro` files
Recognize when Tailwind fits (and when it doesn't)

Tailwind is a popular utility-first CSS framework. Astro integrates it via Vite — one command and you’re set.

Install

npx astro add tailwind

This installs Tailwind 4, the Vite plugin, and adds a small CSS import to your project. The wizard prints the next step (importing the generated CSS in your base layout).

Use Utilities Anywhere

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

<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
  <slot />
</div>

No <style> block needed — and no scoping concerns either, because utilities don’t collide.

With `class:list`

For conditional utilities, mix Tailwind with class:list:

<button
  class:list={[
    "px-4 py-2 rounded",
    kind === "primary" && "bg-blue-500 text-white",
    kind === "danger"  && "bg-red-500 text-white",
  ]}
>
  <slot />
</button>

When Tailwind Fits

Speed-focused builds where design decisions are still moving
Teams without a dedicated design system
Projects where you want minimal CSS overhead

When Not

A strong existing design system with semantic tokens
Sites that lean on rich, hand-crafted visual designs (still doable in Tailwind, just more work)

Up Next

Content collections — the killer feature for Markdown-driven sites.

Content Collections →