How do I add tailwindcss to vite version 0 to 3? (not including V4)

Question

I'm using vite 0.16.6 and wanted to migrated a vuepress site to using vite.

However I was unsure how to configure vite to using tailwindcss.

in my index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

Answer 1

After some digging, looks like that we have to include a postcss.config.js in the root directory of the application

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

for Vite V4

OTOMOTIF/a/79538862/2312051

Answer 2

Vite has built-in support for PostCSS:

npm -D install tailwindcss autoprefixer

vite.config.ts

import { defineConfig } from "vite"
import tailwind from "tailwindcss";
import autoprefixer from "autoprefixer";

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwind, autoprefixer],
    }
  }
})

Answer 3

yarn add tailwindcss @tailwindcss/typography @tailwindcss/ui -D

yarn tailwind init note : you can use npm

crate file : postcss.config.js and add :

module.exports={
 plugins: [
  require('tailwindcss'),
  require('autoprefixer'),
  ]
 }

Replace the contents of src/index.css file with:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Answer 4

I wrote a vite tailwind plugin https://github.com/axe-me/vite-plugin-tailwind

it enabled the jit compiler by default and it also have a tailwind config viewer

Answer 5

Although this is an old question, newcomers still need relevant information. The question originally referred to v3, where TailwindCSS could only be integrated into Vite via PostCSS. Many good answers were provided for this implementation.

TailwindCSS v4

However, since January 2025, with the release of TailwindCSS v4, a new @tailwindcss/vite Vite plugin has been introduced, allowing direct integration of TailwindCSS into Vite without PostCSS. See:

npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

app.css

@import "tailwindcss";

• Get started with TailwindCSS using Vite - TailwindCSS v4 Docs
• Upgrading your TailwindCSS projects from v3 to v4 - TailwindCSS v4 Docs
• Cannot build frontend using Vite, TailwindCSS with PostCSS - StackOverflow
• Problem installing TailwindCSS with Vite - StackOverflow

Answer 6

If you want to create a vite project that includes tailwind, the create-vite-tailwind initializer package is what you want.

$ npm create-vite-tailwind
...
$ npm run dev