版本

node: >= 18.0.0

vue: 3.5.13

vite: 6.3.1

tailwindcss: 4.1.6

@tailwindcss/vite: 4.1.6

tailwindcss

• ? 細粒度類庫
  提供數千個原子級CSS類（如 text-center、bg-blue-500、p-4）
• 🧩 組合式開發
  通過類名組合構建完全自定義的UI，無需編寫自定義CSS
• 🚫 無預設組件
  不強制使用特定樣式的組件

項目創建

創建項目：my-app

$ pnpm create vue
$ cd my-app
$ pnpm i

@tailwind/vite 插件目前只支持 ESM 規范，所以你的項目的 package.json 需要設置 "type": "module"

tailwindcss 配置

$ pnpm i tailwindcss @tailwindcss/vite -D

vite.config.js

vite 中配置 @tailwindcss/vite 插件；

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from "@tailwindcss/vite";// https://vite.dev/config/
export default defineConfig({plugins: [vue(),tailwindcss(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

css

在 main.js 中的入口 css 文件中添加：

main.css

tailwind-Theme variables

@import "tailwindcss";
@config "../../tailwind.config.js";
// @plugin "@tailwindcss/typography"; // 如果需要插件時，添加// 自定義顏色等
@theme {--color-abcd: red;
}

tailwind.config.js

沒有需求時，不創建該配置文件也可以

在根目錄位置創建 tailwind.config.js；

可以配置一些自定義的顏色變量等；

export default {content: ["./src/**/*.{js,ts,jsx,tsx,vue}"],theme: {extend: {colors: {"my-primary": "#42b883",},},},plugins: [],
};

VSCode 插件

安裝插件 Tailwind CSS IntelliSense，可以在鼠標移動到 class 時提示對應的樣式；

使用

App.vue

<template><header><div class="text-amber-700 text-2xl font-bold">Hello Vue</div><div class="text-my-primary text-2xl font-bold">Hello Vue</div><div class="text-abcd text-2xl font-bold">Hello Vue</div><div class="my-title">Hello Vue</div></header>
</template><style scoped>
@reference  "./assets/main.css";.my-title {@apply text-purple-700 text-2xl font-bold;
}
</style>

tailwind css v4 文檔