How to use Tailwind CSS with Astro

Astro has first-class support for Tailwind CSS, so it’s really easy to add Tailwind to your Astro website.

To add Tailwind, run this command in the terminal:

npm run astro add tailwind

That will install and set up the appropriate package (@astrojs/tailwind) in your astro.config.mjs file, like this:

import tailwind from "@astrojs/tailwind";

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

Now, just restart the dev server and Tailwind will be included in your site and working! You can start using Tailwind classes in your .astro and React/Vue/Svelte/etc files.

The terminal command above also created a tailwind.config.cjs configuration file, which you can use to customize Tailwind CSS as is standard.