What is Tailwind CSS integration in Astro?

Astroframework~5 mins

Tailwind CSS integration in Astro

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Introduction

Tailwind CSS helps you style your website quickly using ready-made classes. Integrating it with Astro lets you build beautiful sites easily.

You want to add fast, consistent styling to your Astro project.

You prefer using utility classes instead of writing custom CSS.

You want responsive design without writing media queries manually.

You want to keep your styles organized and easy to maintain.

You want to use a popular CSS framework that works well with modern tools.

Syntax

Astro

1. Install Tailwind CSS and its dependencies:
   npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind config:
   npx tailwindcss init -p

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

4. Create a CSS file (e.g., src/styles/global.css) with Tailwind directives:
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. Import the CSS file in your Astro project (e.g., in src/layouts/BaseLayout.astro):
   ---
   import '../styles/global.css';
   ---

Make sure the content array in tailwind.config.cjs matches your Astro file locations to enable proper CSS purging.

Import the Tailwind CSS file once in your main layout or root component to apply styles globally.

Examples

This config tells Tailwind where to look for class names in your Astro project files.

Astro

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

This CSS file includes Tailwind's base styles, components, and utility classes.

Astro

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

Importing the global CSS in a layout applies Tailwind styles to all pages using this layout.

Astro

---
import '../styles/global.css';
---
<html lang="en">
  <body>
    <slot />
  </body>
</html>

Sample Program

This Astro component uses Tailwind classes to center a heading with blue text on a light gray background.

Astro

---
import '../styles/global.css';
---
<html lang="en">
  <head>
    <title>Astro + Tailwind Example</title>
  </head>
  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind in Astro!</h1>
  </body>
</html>

OutputSuccess

Important Notes

Use Tailwind's utility classes to build layouts quickly without writing custom CSS.

Check your browser's developer tools to see applied styles and debug if needed.

Keep your tailwind.config.cjs updated if you add new file types or folders.

Summary

Tailwind CSS integration in Astro lets you style fast with utility classes.

Install Tailwind, configure content paths, add Tailwind directives in CSS, and import it in your layout.

Use Tailwind classes in your Astro components for responsive, clean design.