How to use Tailwind CSS with Astro

June 16, 2021

Astro has first-class support for Tailwind, so it's really easy to add Tailwind's JIT compiler to your Astro website.

Just install Tailwind:

npm install --save-dev tailwindcss

And create a file at tailwind.config.js:

// tailwind.config.js
module.exports = {
    mode: 'jit',
    purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}']
}

And point your astro.config.mjs file to that Tailwind configuration file:

// astro.config.mjs
export default {
    devOptions: {
        tailwindConfig: './tailwind.config.js'
    }
}

Now, create a global stylesheet called src/styles/global.css. In it, add the @tailwind directives that will output Tailwind's styles:

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

Finally, import this CSS file in the <head> of HTML pages, and Tailwind CSS will work in your project!

<head>
    <link
      rel="stylesheet"
      href={Astro.resolve('../styles/global.css')}
    >
</head>

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!