Tailwind CSS v4 brings a new engine, CSS-first configuration, and significantly improved performance to the utility-first CSS framework. When paired with Astro, it creates a blazing-fast development experience for building beautiful, responsive websites.
Setting Up Tailwind v4 with Astro 6
Astro 6 supports Tailwind CSS v4 through the @tailwindcss/vite plugin. The setup is straightforward:
- Install the Vite plugin:
npm install tailwindcss @tailwindcss/vite - Add the plugin to your
astro.config.mjsVite configuration - Import Tailwind in your global CSS:
@import "tailwindcss"
That’s it! No tailwind.config.js file is needed for basic setups. Tailwind v4 uses a CSS-first approach where you configure themes directly in your CSS.
CSS-First Configuration
Tailwind v4 moves configuration from JavaScript to CSS. You can customize your theme using @theme:
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--font-display: "Inter", sans-serif;
}This makes your design tokens more discoverable and easier to maintain. You can also use @variant to create custom responsive or state variants directly in CSS.
Utility-First Design Patterns
With Tailwind, you build UIs by composing utility classes. This approach has several advantages:
- No naming conflicts: Utility classes are deterministic, so you never have naming collisions
- Small bundle sizes: Tailwind only includes the utilities you actually use
- Rapid prototyping: Style elements inline without switching between files
- Consistent design: Built-in design system ensures spacing, colors, and typography are consistent
Responsive Design Made Simple
Tailwind’s responsive prefixes make it easy to build layouts that adapt to any screen size:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Cards automatically reflow at each breakpoint -->
</div>Combining Astro’s island architecture with Tailwind’s utility-first approach gives you a site that’s fast to develop, fast to load, and beautiful at every screen size.