DEV Community

Przemek Wolnik
Przemek Wolnik

Posted on

How to add Tailwind CSS to Vite?

#tailwindcss #vite #javascript

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