How to integrate Tailwind CSS with Astro
I am 17 years old and a young passionate and self-taught frontend web developer and have an intention to become a successful developer. I usually write about JavaScript and Web Development and share some tips in the articles.
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!
