ElianCodes

← Back to blog

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@latest

The 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 autoprefixer

That’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
  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.