How to add tailwind to astro

AstroHow-ToBeginner · 4 min read

How to Add Tailwind CSS to Astro Projects Quickly

To add Tailwind CSS to an Astro project, install Tailwind and its dependencies, then create a tailwind.config.cjs file. Next, include Tailwind directives in your global CSS and configure Astro to use that CSS file. Finally, run your Astro project to see Tailwind styles applied.

📐

Syntax

Here is the basic setup syntax to add Tailwind CSS to an Astro project:

npm install -D tailwindcss postcss autoprefixer: Installs Tailwind and required tools.
npx tailwindcss init: Creates tailwind.config.cjs for customization.
Create a CSS file with Tailwind directives: @tailwind base;, @tailwind components;, @tailwind utilities;.
Import this CSS file in your Astro project entry point.

bash and css and astro

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* src/components/Layout.astro */
---
import '../styles/global.css';
---
<html>
  <body>
    <slot />
  </body>
</html>

💻

Example

This example shows a minimal Astro project using Tailwind CSS for styling a heading and a button with responsive colors and spacing.

bash css astro

/* 1. Install Tailwind and dependencies */
npm install -D tailwindcss postcss autoprefixer

/* 2. Initialize Tailwind config */
npx tailwindcss init

/* 3. Create src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 4. Import global.css in src/components/Layout.astro */
---
import '../styles/global.css';
---
<html lang="en">
  <body class="bg-gray-100 p-6">
    <slot />
  </body>
</html>

/* 5. Use Tailwind classes in src/pages/index.astro */
---
import Layout from '../components/Layout.astro';
---
<Layout>
  <h1 class="text-4xl font-bold text-blue-600 mb-4">Welcome to Astro with Tailwind!</h1>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Click Me</button>
</Layout>

Output

A webpage with a light gray background, a large blue heading saying 'Welcome to Astro with Tailwind!', and a blue button that darkens on hover.

⚠️

Common Pitfalls

Common mistakes when adding Tailwind to Astro include:

Not importing the global CSS file where Tailwind directives are declared, so styles don't apply.
Forgetting to configure content paths in tailwind.config.cjs, causing Tailwind to purge needed styles.
Using outdated Tailwind or Astro versions that lack compatibility.

Always ensure your tailwind.config.cjs content array includes all Astro and JS/TS files where Tailwind classes appear.

/* Wrong tailwind.config.cjs (missing content paths) */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* Correct tailwind.config.cjs */
module.exports = {
  content: [
    './src/**/*.{astro,js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

📊

Quick Reference

Step	Command / File	Purpose
1	npm install -D tailwindcss postcss autoprefixer	Install Tailwind and dependencies
2	npx tailwindcss init	Create Tailwind config file
3	src/styles/global.css	Add Tailwind directives (@tailwind base; etc.)
4	Import global.css in Astro layout or root	Apply Tailwind styles globally
5	Configure content paths in tailwind.config.cjs	Enable Tailwind to scan Astro files for classes

✅

Key Takeaways

Install Tailwind and dependencies with npm before setup.

Create and configure tailwind.config.cjs with correct content paths.

Add Tailwind directives in a global CSS file and import it in Astro.

Verify your Astro components use Tailwind classes for styling.

Watch for missing imports or wrong config causing styles not to apply.