Published on 04/23/2022 20:48 by Elian Van Cutsem
Tailwind CSS in Astro
Since Astro 24, the documentation of Tailwind CSS in Astro has disappeared. Not because it’s not supported, but because it now holds true to the Tailwind CSS documentation itself. If you still need a guide on how to use them both, look no further!
Setup Astro
Installing and setting up Astro is really easy. You can read the documentation on it right here!
In the following examples I’ll be using NPM, but feel free to use Yarn or PNPM, all of those have a dedicated Astro create command
npm create astro@latestThe Astro create script will ask a few questions, like where to install and what template to use. Feel free to use whatever suits you most, I tend to mostly choose the minimal template since I don’t like boilerplate.
After running the above command, Astro will be ready to use. (Don’t forget to cd into the folder where you initialised your project). After you’re done installing the dependencies, run npm run dev to see it come to life on port 3000 (look here to change the port)!
Install TailwindCSS
Now that we’re done setting up Astro, we can advance on installing and using Tailwind CSS with it.
Installing packages
To use Tailwind CSS, we’ll need to install both Tailwind CSS & autoprefixer as developer dependencies:
npm install -D tailwindcss autoprefixerThat’s all we need to do since Astro uses Vite under the hood, we don’t need to install PostCSS, since PostCSS comes with Vite by default.
Configuration Files
After installing Tailwind, we’ll need to add the Tailwind configuration file by running npx tailwindcss init or by adding the tailwind.config.js file manually in the root of the project and adding following content:
module.exports = {
content: ["./src/**/*.{astro}"],
theme: {
extend: {},
},
plugins: [],
};Keep in mind I added astro as the extension there. If you’re going to use other extensions like vue or tsx, don’t forget to add them as well.
Next, let’s add the PostCSS configuration file postcss.config.js in the root of your project:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};Adding a stylesheet
Now that all installations and configurations are out of the way, let’s create your stylesheet and import it in your project.
You can call the CSS-file whatever you want, I’ll call mine global.css and add it in /src/styles directory.
@tailwind base;
@tailwind components;
@tailwind utilities;when you import this file in your Astro page or layout, all default browser styles will be erased, so it should be instantly be clear to see if it worked.
---
import "../styles/global.css";
---
<body class="bg-green-300 text-white"> </body>This is all to get basic Tailwind CSS working in Astro!
Written by Elian Van Cutsem
← Back to blog
