How to use tailwind in astro

AstroHow-ToBeginner · 3 min read

How to Use Tailwind CSS in Astro: Setup and Example

To use Tailwind CSS in an Astro project, install Tailwind via npm, create a tailwind.config.cjs file, and include Tailwind directives in a CSS file imported in your project. Then, build your Astro components using Tailwind utility classes for styling.

📐

Syntax

Using Tailwind in Astro involves these parts:

Install Tailwind CSS: Add Tailwind and its dependencies via npm.
Configure Tailwind: Create a tailwind.config.cjs file to customize your setup.
Include Tailwind styles: Use a CSS file with Tailwind directives (@tailwind base;, @tailwind components;, @tailwind utilities;) and import it in your Astro project.
Use Tailwind classes: Add utility classes directly in your Astro component HTML for styling.

bash and javascript and css and astro

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

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

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

// In your Astro project entry (e.g., src/layouts/BaseLayout.astro)
---
import '../styles/global.css';
---
<html>
  <body>
    <slot />
  </body>
</html>

💻

Example

This example shows a simple Astro component styled with Tailwind CSS classes after setup.

astro

---
import '../styles/global.css';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro + Tailwind Example</title>
  </head>
  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <main class="bg-white p-8 rounded shadow-lg text-center">
      <h1 class="text-3xl font-bold text-blue-600 mb-4">Hello from Astro + Tailwind!</h1>
      <p class="text-gray-700">This box is styled using Tailwind utility classes.</p>
    </main>
  </body>
</html>

Output

A centered white box on a light gray background with a blue heading and gray paragraph text.

⚠️

Common Pitfalls

Common mistakes when using Tailwind in Astro include:

Not listing all relevant file extensions in the content array of tailwind.config.cjs, so Tailwind misses your classes.
Forgetting to import the CSS file with Tailwind directives in your project entry or layout.
Using outdated Tailwind config syntax or missing postcss setup if needed.
Not restarting the Astro dev server after installing Tailwind or changing config files.

javascript

/* Wrong tailwind.config.cjs content (missing .astro files) */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'], // Missing .astro files
  theme: { extend: {} },
  plugins: [],
};

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

📊

Quick Reference

Remember these key points when using Tailwind in Astro:

Install Tailwind and dependencies with npm.
Configure tailwind.config.cjs with all source file extensions.
Import your Tailwind CSS file in your main layout or entry point.
Use Tailwind utility classes directly in your Astro components.
Restart your dev server after setup changes.

✅

Key Takeaways

Install Tailwind CSS and its dependencies via npm in your Astro project.

Configure tailwind.config.cjs to include all your source files, including .astro files.

Import the CSS file with Tailwind directives in your main layout or entry file.

Use Tailwind utility classes directly in your Astro component HTML for styling.

Restart the Astro dev server after installing or changing Tailwind configuration.