DEV Community

Przemek Wolnik
Przemek Wolnik

Posted on

How to add Tailwind CSS to Vite?

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: [],
}
Enter fullscreen mode Exit fullscreen mode

2. Add PostCSS config file

Add a postcss.config.js file to the root of your project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

That's all! You can enjoy using Vite with Tailwind CSS now!

Top comments (2)

Collapse
 
juliann profile image
Julian Romana

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!

Collapse
 
niubo profile image
Rolando Niubo

Thank you! Liked