Subscribe

How to use Tailwind CSS in Astro

✍️

Installing and using Tailwind CSS in Astro

25 Jul, 2021 Β· 2 min read

It's never been easier to include Tailwind CSS in a framework.

Why? Astro has build-in support for Tailwind! πŸ₯³ And yes, even the Tailwind JIT compiler.

I'll write down this quick guide to get you started setting up Tailwind CSS in an Astro project.

Installing Tailwind CSS in an Astro project

Let's start with a basic Astro project.

mkdir astro-tailwind && cd astro-tailwind
npm init astro

You can choose any of the templates. It doesn't matter.

Now let's install Tailwind CSS.

npm install -D tailwindcss

The next step is to create a tailwind.config.js file to tell Tailwind which files to purge and enable the JIT compiler.

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

Then we can Astro that it should use this Tailwind config file by modifying the astro.config.js file and adding this to the devOptions section.

devOptions: {
  tailwindConfig: './tailwind.config.js';
}

Create a global.css file in the src/assets directory.

@tailwind base;
@tailwind components;
@tailwind utilities;

Let's modify our src/pages/index.astro to test how it works.

The first thing we need to do is load our stylesheet in the head section:

Edit 25-10: This is Astro's new way of loading assets

<head>
  <!-- Other stuff -->
  <link rel="stylesheet" href={Astro.resolve("../assets/style/global.css")} >
</head>
<div
  class="min-h-screen overflow-auto bg-gradient-to-br from-indigo-900 to-green-900"
>
  <div class="container max-w-5xl px-4 mx-auto">
    <div class="w-4/5 mx-auto">
      <h1 class="mt-32 text-6xl font-bold text-white">
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" />
        Welcome to
        <a href="https://astro.build/">Astro</a>
      </h1>
    </div>
    <div class="w-4/5 mx-auto my-10">
      <h3 class="text-gray-300">
        Build faster websites with less
        <strong class="text-white">client-side Javascript</strong>
        <br />
        This is how easy it is to get started
      </h3>
    </div>
    <div
      class="w-2/5 p-10 mx-auto leading-10 text-white bg-black shadow-lg rounded-2xl"
    >
      mkdir astro<br />
      cd astro<br />
      npm init astro
    </div>
  </div>
</div>

And this results in the following:

Tailwind starter in Astro

You can also download this project from GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Computed Nano Stores

6 Sep, 2022 Β· 2 min read

Computed Nano Stores

Astro Nano Stores maps

5 Sep, 2022 Β· 3 min read

Astro Nano Stores maps

Join 1903 devs and subscribe to my newsletter