Using Tailwind with AstroJS

Tailwind CSS is a very popular framework, and you might be already using it yourself, but whilst the tailwind site has instructions for installing it on NextJS, Vue, Nuxt, Vite and 12 other JS frameworks you won't find any instructions for Astro.

So I went ahead and did a bit of trial and error to get Tailwind working with Astro.

Installing Tailwind

First thing is to install the Astro helpers and Tailwind CSS package. I use pnpm but you can do this with npm or yarn as well.

pnpm
install
@astrojs/
tailwind
tailwindcss

Then, apply this integration to your astro.config.* file using the integrations property:

import {defineConfig} from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
    // ...
    integrations: [tailwind()],
});

And it's as easy as that. Maybe Tailwind need to copy/paste this article onto their website? Anyway, now you can get into your layouts first and get them all styled with Tailwind utilities and then move onto the rest of the pages.