Tailwind CSS在Vite中@tailwind base无输出，主因是PostCSS插件未加载：postcss.config.cjs须为CommonJS格式（module.exports）、插件键名应为tailwindcss: {}（非字符串或错误包名），且content路径需显式包含.vue等扩展名，Vite 8用户须降级至v7并改用@tailwind指令而非@import。
你在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（推荐）
执行npm install vite@7.4.11，确保package.json中vite版本锁定为7.x；再安装@tailwindcss/vite并加入vite.config.ts插件列表。
第三步：改用@tailwind指令直连
在src/style.css顶部写三行标准指令：@tailwind base;→@tailwind components;→@tailwind utilities;，然后确保main.ts里import './style.css'这行存在且位置靠前。
这一步操作起来很简单，直接把文件拖进去就行。
content路径漏写一个.vue，所有组件类名就失效
第一步：打开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编译变慢，还可能触发错误匹配。
