Ben Borgers

⇢ Twitter

How to use Tailwind CSS with Astro

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 in the public/ folder, which I called public/global.css. In it, add the @tailwind directives that will output Tailwind’s styles:

/* public/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

<head>
    <link rel="stylesheet" href="/global.css">
</head>

--

Last updated June 16, 2021