27
How to use Tailwind CSS in Astro
To be honest, 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.
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, actually.
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 add this to the devOptions
section.
devOptions: {
tailwindConfig: './tailwind.config.js';
}
Now edit the global.css
file in the public/style
directory.
@tailwind base;
@tailwind components;
@tailwind utilities;
Let's modify our src/pages/index.astro
to test out how it works.
<div class="bg-gradient-to-br from-indigo-900 to-green-900 min-h-screen overflow-auto">
<div class="container max-w-5xl mx-auto px-4">
<div class="w-4/5 mx-auto">
<h1 class="mt-32 text-white text-6xl font-bold">
<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 my-10 mx-auto">
<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 mx-auto bg-black text-white p-10 leading-10 rounded-2xl shadow-lg">
mkdir astro<br />
cd astro<br />
npm init astro
</div>
</div>
</div>
And this results in the following:
You can also download this project from GitHub.
27