DEV Community

loading...

How to add Tailwind CSS to Vite?

przemwo profile image Przemek Wolnik ・1 min read

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!

Discussion (1)

pic
Editor guide
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!