如何在Vite项目中配置Tailwind CSS？-css教程-PHP中文网

vue3 + vite 项目必须用 @tailwindcss/vite 插件，不能只装 tailwindcss；content 路径漏掉 .vue 就会白屏；样式入口必须用 @tailwind 指令，不能 import 'tailwindcss/tailwind.css'。

如何在vite项目中配置tailwind css？

直接上结论：Vue3 + Vite 项目必须用 @tailwindcss/vite 插件，不能只装 tailwindcss；content 路径漏掉 .vue 就会白屏；样式入口必须用 @tailwind 指令，不能 import 'tailwindcss/tailwind.css'。

为什么 `@tailwindcss/vite` 是唯一可靠选择

老式 PostCSS 配置（postcss.config.js + tailwindcss()）在 Vue SFC 里根本扫不到 <template></template> 中的 class，改完 class 必须刷新页面；CLI 模式（npx tailwindcss -i）更不行——它压根不解析 .vue 文件，动态 class 如 :class="`text-${size}`" 全丢。

@tailwindcss/vite 是 Vite 原生插件，直接参与构建流程，能准确识别 SFC、JSX、TSX 里的所有 class 字符串
它自动注入 @tailwind base/components/utilities，还顺带跑 autoprefixer，不用再配 postcss.config.js
热更新（HMR）精准：改一个 bg-red-500，样式立刻生效，不刷页面

`content` 路径写错等于没配

Tailwind 不靠文件后缀自动推断，全靠 content 数组显式声明扫描范围。路径错一个字符，生产环境就 purge 掉全部 utility 类——页面变成无样式的白板。

必须包含 .vue：["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"]，不能只写 {js,ts}
路径是 glob 模式，** 表示递归子目录，./src/App.vue 和 ./src/components/Button.vue 都会被扫到
如果用了 <style scoped></style>，里面的 class 名也得出现在 content 路径下，否则照样丢失

样式入口必须用 `@tailwind` 指令

在 src/index.css（或 src/assets/tailwind.css）里写：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

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

然后在 main.ts 或 main.js 里 import './index.css'。别用 import 'tailwindcss/tailwind.css'——那是全量打包，体积暴增，且无法 tree-shaking。

@tailwind 指令让插件知道“这里要注入生成的 CSS”，不是简单引入一个静态文件
文件名随意，但路径必须和 vite.config.ts 中的 import 一致
如果项目有多个 CSS 入口（比如主题切换），每个都要加这三行指令

Vite 配置和依赖版本对齐

@tailwindcss/vite 不是“装了就行”，它和 tailwindcss 主版本强绑定。v4.x 插件配 v3.x 的 tailwindcss，构建会静默失败——没报错，但 class 全不生效。

查版本：npm list tailwindcss @tailwindcss/vite，确保两者主版本号一致（如都是 3.4.17）
Vue3 项目推荐用 tailwind.config.ts（需装 @types/node），但 postcss.config.js 必须保留 JS 格式——PostCSS 不认 TS
如果已有 postcss.config.js（比如 RuoYi 等脚手架自带），别覆盖它；要么删掉，要么把 tailwindcss() 和 autoprefixer() 手动加进 plugins 数组