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: [],
}

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!

Comments

[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!

[Rolando Niubo]

Thank you! Liked