Dhairya Shah's Blog

How to integrate Tailwind CSS with Astro

How to integrate Tailwind CSS with Astro

Dhairya Shah's photo
Dhairya Shah
·

1 min read

Astro is a new web framework in the market that allows developers to fast-build web applications. If you are new to Astro then check out my article on Getting Started with Astro.

In this article, we are focused on how to integrate Tailwind CSS with Astro.

Our first step will be to install Tailwind CSS,

Install Tailwind CSS Package

In order to use Tailwind CSS, we need to install tailwindcss and autoprefixer npm packages.

npm install -D tailwindcss autoprefixer

After installing both packages, we need to initialize tailwind. 

npx tailwindcss init

After initializing, two files will be created tailwind.config.js and postcss.config.js inside the root directory.

Inside, tailwind.config.js add the following code,

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

After doing this, open postcss.config.js and add the following code,

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Adding stylesheet

Now inside /src/styles create a CSS file global.css, and add the following code,

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

After doing this, import global.css into your Astro page or layout.

---
import '../styles/global.css'
---
<body>
  <div class="bg-gray-100 font-mono text-2xl">Hello World</div>
</body>

That's all for TailwindCSS to work with Astro.

Thank you for reading

Follow me on Twitter.

Thanks for reading!

Tailwind CSSCSSAstro