如果在 Vite 里用了 Tailwind CSS，却发现 @tailwind base 完全没有输出，问题通常就出在 PostCSS 插件没有被正确加载。

先看 postcss.config.cjs。它必须写成 CommonJS 形式，也就是用 module.exports。

再看插件配置。键名应当写成 tailwindcss: {}，不能写成字符串，也不能填错包名。同时，content 路径也得明确把 .vue 这类扩展名包含进去。

还有一点很关键：Vite 8 用户需要降级到 v7，并且把 @import 改成 @tailwind 指令来使用。

你在Vite项目里写了@tailwind base，却看不到任何CSS输出。

浏览器开发者工具里查不到body重置样式，控制台也不报错。这不是代码写错了，而是Vite根本没把Tailwind当一回事处理。

确认PostCSS插件是否真正加载

检查配置文件导出格式

第一步：打开项目根目录下的postcss.config.cjs，检查导出格式是否为CommonJS。

【必须用module.exports = { ... }】，不能是export default { ... }或ES模块语法；如果用了type: "module"，Node版本必须≥14.18且配置文件后缀得是.cjs。

检查插件键名是否写对

第二步：验证插件对象键名是否准确。

• 写"tailwindcss"带引号是错的
• "@tailwindcss/postcss"根本不存在
• 正确写法是tailwindcss: {}（无引号、无路径）

手动编译验证是否生效

第三步：运行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch手动编译一次。

如果输出CSS里有大量基础规则，如*, ::before, ::after { box-sizing: border-box; }，说明Tailwind本身工作正常。

如果输出为空或只有注释，则问题出在PostCSS链路未打通。

VSCode里@tailwind标黄但项目能跑？先关掉它的“假报警”

方法一：直接屏蔽警告

打开VSCode设置（Ctrl+,），搜索css.lint.unknownAtRules，把值从warning改成ignore。

改完立刻生效，不用重启。

方法二：装插件获得真能力

安装最新扩展Tailwind CSS IntelliSense。它不光消黄，还能补全类名、预览颜色、跳转配置。

但前提是tailwind.config.cjs必须放在项目根目录，且content字段显式写出扩展名，比如["./src/**/*.{vue,ts,jsx}"]。

如果写成["./src/**/*"]，插件就扫不到任何文件。

【editor.quickSuggestions.strings必须设为true】。这是90%人漏掉的开关，Tailwind类名都在字符串里，这个关了，补全就彻底哑火。

Vite 8用户特别注意：@import "tailwindcss"根本不会解析

先删掉无效写法

第一步：删掉style.css里的@import "tailwindcss"，这行在Vite 8下纯属无效文本。

降级Vite到v7.x

第二步：降级Vite到v7.x（推荐）。

执行npm install vite@7.4.11，确保package.json中vite版本锁定为7.x；再安装@tailwindcss/vite并加入vite.config.ts插件列表。

改用@tailwind指令

第三步：改用@tailwind指令直连。

• 先在src/style.css文件顶部补上三行标准指令
• 顺序别弄反：@tailwind base;→@tailwind components;→@tailwind utilities;
• 再检查main.ts，确认import './style.css'这行确实存在，而且尽量放在靠前的位置

这一步操作起来很简单，直接把文件拖进去就行。

content路径漏写一个.vue，所有组件类名就失效

先定位content数组

第一步：打开tailwind.config.cjs，定位content数组。

核对是否覆盖全部模板文件

第二步：逐条核对路径是否覆盖全部模板文件。

• Nuxt 3默认要加./components/**/*.{vue,ts}
• Vue3+Vite项目常见漏项是./src/App.vue或./src/pages/**/*.vue

扩展名必须显式声明

第三步：检查扩展名是否显式声明。

写["./src/**/*"]等于白写，必须是["./src/**/*.{js,ts,vue,jsx,tsx}"]。

多一个.vue，少一个.tsx，都会导致对应文件里的bg-red-500被JIT扫描器跳过。

移除无关扫描路径

第四步：删掉node_modules和dist这类无关路径。

它们会让JIT编译变慢，还可能触发错误匹配。