postcss和tailwind css报错90%是插件未加载：因postcss版本低于8、vite项目误配postcss.config.cjs、配置文件非commonjs格式或插件名错误（如"@tailwindcss/postcss"）导致构建链中断。
PostCSS 和 Tailwind CSS 同时用报错，90% 是插件没加载成功，不是你写错了 CSS —— 本质是构建链断了，得从配置源头修。
PostCSS 版本低于 8 导致 tailwindcss 插件拒绝启动
错误信息里出现 plugin tailwindcss requires PostCSS 8，说明当前项目实际运行的 PostCSS 是 7.x（比如 postcss@7.4.2），但 Tailwind v4+ 强制要求 ≥8.4.31。
- 运行
npm ls postcss查看真实安装版本；如果输出含postcss@7.x，就是它在挡路 - 必须连带卸载：
npm uninstall postcss autoprefixer tailwindcss（只卸tailwindcss不够） - 重装指定兼容版本：
npm install -D postcss@^8 autoprefixer@^10 tailwindcss@latest - 删掉
node_modules和package-lock.json后再npm install，避免旧版残留干扰
Vite 项目里还留着 postcss.config.cjs 就会冲突
你用了 @tailwindcss/vite，却还手动写了 postcss.config.cjs，Vite 会优先走自己的集成逻辑，导致你配的插件被跳过或重复注册。
- 确认
vite.config.ts中已正确引入：import tailwindcss from '@tailwindcss/vite'，并加入plugins: [tailwindcss()] - 直接删掉项目根目录下的
postcss.config.cjs（或.js），不是注释掉，是彻底删除 - 保留
tailwind.config.cjs，确保content字段覆盖所有模板路径，例如：./src/**/*.{js,ts,jsx,tsx,html,vue}
postcss.config.cjs 格式或写法不合法
PostCSS 8.x 默认只认 CommonJS 的 module.exports，ES module 导出（export default）或对象键名写错都会让插件静默失效。
- 文件必须叫
postcss.config.cjs（不能是.js），且内容为纯 CommonJS： module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };- 插件名必须是
tailwindcss（无引号、无前缀、无@），"@tailwindcss/postcss"是官方已澄清的误导性包名，根本不存在 - 若需控制顺序（如搭配
postcss-modules），必须用数组写法：plugins: [ require('postcss-modules'), require('tailwindcss'), require('autoprefixer') ]
@apply 或嵌套语法（&）报错，其实是插件链缺失
@apply 报 Cannot apply unknown utility class，或写 &.hover 提示 Nested CSS was detected, but CSS nesting has not been configured correctly，都不是语法问题，而是 PostCSS 没走到对应插件。
-
@apply失效：先确认文件是否进了 PostCSS 流水线（Vite 默认只处理src/下的.css；lang="scss"需确保 Sass 编译在 PostCSS 之前） - 嵌套语法报错：必须在
postcss.config.cjs中显式添加'tailwindcss/nesting': {}，且该行必须排在tailwindcss: {}之前 - Vue/Svelte 单文件组件中
@apply静默失效：检查是否用了<style scoped></style>，并在<style></style>块第一行加@reference "tailwindcss";
最容易被忽略的一点：Tailwind v4 的插件名必须是 tailwindcss，不是字符串也不是带作用域包名；而 Vite 用户删掉 postcss.config.cjs 不是偷懒，是绕过所有格式陷阱的最稳解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
