[v4] How to make Tailwind CSS and PostCSS work together in Vite Vue 3 project?

[shilohooo]

Hello everyone:)

I want to use Tailwind CSS and PostCSS in my project.

I find the documentation about Using Vite and Using PostCSS, then I followed what the documentation said.

Tailwind CSS config

/**
 * Tailwind CSS config
 * @author shiloh
 * @date 2025/4/11 10:35
 */
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

PostCSS config

/**
 * Postcss config
 * @author shiloh
 * @date 2025/4/11 8:37
 */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

Vite config

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
      '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
    },
  },
})

Package JSON

{
  "name": "vue3-ts",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "packageManager": "[email protected]",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.11.0",
    "@tailwindcss/postcss": "^4.1.3",
    "@tailwindcss/vite": "^4.1.3",
    "@tsconfig/node22": "^22.0.1",
    "@types/node": "^22.14.0",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/eslint-config-airbnb-with-typescript": "^8.0.0",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.5.0",
    "@vue/tsconfig": "^0.7.0",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.22.0",
    "eslint-plugin-vue": "~10.0.0",
    "jiti": "^2.4.2",
    "npm-run-all2": "^7.0.2",
    "postcss": "^8.5.3",
    "prettier": "3.5.3",
    "tailwindcss": "^4.1.3",
    "typescript": "~5.8.0",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2",
    "vue-tsc": "^2.2.8"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "esbuild"
    ]
  }
}

Then I wrote some test code like this:

<script setup lang="ts"></script>

<template>
  <div class="bg-blue-400 text-white text-3xl h-24 p-4 hover:scale-125 transition-all">Style test</div>
</template>

When I run my app, Tailwind CSS is working, but PostCSS not:(

Has anyone used them together? I can't find any documentation about using Tailwind CSS (latest release) and PostCSS together in Vite:(

Please tell me what is mssing or wrong, thank you very much 🥹

[wongjn]

When using Vite, you don't need PostCSS.

[shilohooo]

When using Vite, you don't need PostCSS.

Why 0.0

I find a StackOverflow question here.

[shilohooo]

Sorry, I didn't check out the related blogs of Tailwind CSS:)

This blog answered my question 😄