How to Add Tailwind CSS to Astro

Tailwind is a popular way to style a site. Instead of writing CSS rules, you add small classes like text-lg or mt-4 straight to your HTML. Astro has a command that sets it up for you.

Step 1: Run the setup command

In your project folder, run:

npx astro add tailwind

Astro shows you each change it’s about to make and asks you to confirm. Say yes to all of them.

The command does three things:

1. Installs tailwindcss and the @tailwindcss/vite plugin
2. Adds the plugin to astro.config.mjs
3. Creates src/styles/global.css containing a single line, @import "tailwindcss";

Step 2: Load the stylesheet

Tailwind only works on pages that load that CSS file. The easiest way is to import it in your layout, so every page gets it. Open src/layouts/Layout.astro and add the import at the top:

---
import '../styles/global.css';
---

If your project doesn’t have a layout yet, lesson 4 of our course shows how to share a layout across pages.

Step 3: Use a class

Open a page and add some Tailwind classes:

<h1 class="text-3xl font-bold text-blue-700">Welcome to my website</h1>
<p class="mt-4 text-lg">I built this with Astro.</p>

Start your dev server with npm run dev. The heading should be large, bold and blue.

Where to go from here

The Tailwind documentation lists every class. The ones beginners use most are spacing (p-4, mt-2), text (text-xl, font-bold), colour (text-blue-700, bg-gray-100) and layout (flex, grid, gap-4).

You don’t have to use Tailwind. Astro’s built-in scoped styles are enough for many sites, and we use plain CSS on this one. Pick whichever you find easier to read.

Frequently asked questions

Do I need a tailwind.config file?

Not with Tailwind 4. Settings go in your CSS file instead, using the @theme rule. The command in this guide sets up everything you need to start.

Can I use Tailwind and my own CSS together?

Yes. Astro components can have their own style tags, and Tailwind classes work alongside them.