Setup Tailwind CSS in Astro

Astro

Astro is a new Static Site Generator in the block. There are multiple reasons for me to be excited about this.

The first one is its BYOF ( Bring your own framework ) approach. It means that I can use React, preact, Vue, or Svelte to write components and layouts and everything in Astro.

The second one is its promise of 0 js output. By default, Astro renders all of the sites to just plain Html. It means that all the framework code I’ve written will be converted to just plain old Html.

Quoting from its release post,

100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.

Let’s learn how to add Tailwindcss to our Astro site.

Setup Tailwind CSS

There is a section about adding Tailwind CSS in Astro docs.

But after following it, I was left with some problems like gradients not working, etc.

So I made this guide on how to make Tailwind CSS work with Astro

Install Tailwind

Let’s start by installing the required dependencies from npm.

npm i tailwindcss@latest postcss@latest autoprefixer@latest

The above command Installs Tailwind and Autoprefixer into our project.

The reason why we Installed Autoprefixer is, Tailwind CSS uses Autoprefixer for things like background gradient clipping.

Configuration

We have to create 2 files at the root of our project.

First, create a file named tailwind.config.cjs and fill it with the below code.

module.exports = {
  content: [
    "./public/**/*.html",
    "./src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}",
    // Tailwind will look for classes in
    // all of the above framework files.
  ],
  // more options here
};

The tailwind.config.cjs is used to customize and configure tailwind CSS.

Next up is our postcss.config.cjs. Fill it with the below code.

// postcss.config.cjs
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

If we didn’t add Autoprefixer here, Tailwind features like bg-clip-text won’t work.

Up next, we have to create a CSS file to link to. Create a file named global.css in the styles folder inside our src folder and add the below code.

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

Linking the CSS file

This is the part that is a little bit confusing. The Astro docs says to link the global.css in the following syntax.

<head>
  <style global>
    @import "../styles/global.css";
  </style>
</head>

<!-- DON'T work -->

But if we link it like this, there’s a problem. It’s detailed in this issue. Basically, we’d have to restart our server every time a new Tailwind class is used.

Later on, I got help in Astro discord. Specifically from Muhymin.

Fix

Instead of linking the CSS like we are told in the docs, we have to link it the old way.

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

<style global></style>

The Astro.resolve was the preferred method for linking CSS before moving to the current method. After a recent update, using Astro.resolve started to break production builds.

It won’t include the link to the style tag if we used it.

But adding an empty <style> tag fixes the issue.🤯

By no means we can say that the bug is fixed. In the meantime, we can use this method for using Tailwind CSS properly in Astro.

Astro Community

I want to say one thing about the Astro community. The support we get there is mind-blowing.

It’s named Astro Lounge and you can join it by clicking here

End

Thank you for reading this far. If you found a typo or you just wanna have a chat, hit me up on Contact Page

Muhammed Mukhthar CM