Skip to content
Astro Tips

Tailwind v4 alpha

Astro ^4.0.0

Tailwind 4.0 plans to introduce some big changes, including a new Vite plugin, which will improve accuracy and performance.

On top of the Vite plugin v4 comes with some major changes, most notably a redesign of the tailwind.config.mjs. The plan is to continue to support using the existing configs, but steer users toward using the entry point .css file as the config file.

Setup

  1. Install Tailwind’s official Vite plugin

    Terminal window
    npm install --save-dev tailwindcss@next @tailwindcss/vite@next

  2. Add the plugin to Astro config and enable Lightning CSS

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import tailwindcss from '@tailwindcss/vite';
    

    // https://astro.build/config
    export default defineConfig({
      vite: {
        plugins: [tailwindcss()],
        css: {
          transformer: 'lightningcss'
        }
      }
    });

  3. Import the CSS file that imports Tailwind into your .astro components

    Instead of Astro’s Tailwind integration importing the default Tailwind .css file for you, you’ll need to do this yourself. Either import this .css file into a shared layout, or into the individual .astro components/pages you’d like to use Tailwind in.

    src/styles/tailwind.css
    @import "tailwindcss";
    src/layouts/Layout.astro
    ---
    import "../styles/tailwind.css";
    ---
    <!doctype html>
    <html lang="en">
      <head>
        <!-- ... -->
      </head>
      <body>
        <article class="max-w-2xl">
          <slot />
        </article>
      </body>
    </html>