Tailwind CSS is a utility-first CSS framework which can help you fall in love with CSS again.
Vite is a modern webpack (I know, I know... I did a little simplification here).
In this article I'm gonna show you how to make them work together in three easy steps.
1. Add Tailwind CSS config file
Add a tailwind.config.js
file to the root of your project.
module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {},
variants: {},
plugins: [],
}
2. Add PostCSS config file
Add a postcss.config.js
file to the root of your project.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
3. Add required packages to your project
Add Tailwind CSS, PostCSS and Autoprefixer packages to your project's dev-depnendencies:
npm i tailwindcss postcss autoprefixer -D
That's all! You can enjoy using Vite with Tailwind CSS now!
Top comments (2)
The initial build time is kinda long using tailwind with vite but thanks to this plugin github.com/windicss/vite-plugin-wi... you can greatly enhance your development experience!
Thank you! Liked