postcss版本低于8导致@tailwind解析失败，需卸载postcss、autoprefixer、tailwindcss后重装兼容版本；vite项目应删postcss.config.cjs并改用@tailwindcss/vite插件。
PostCSS 版本低于 8 导致 @tailwind 指令解析失败
报错信息里出现 plugin tailwindcss requires PostCSS 8，说明当前项目实际加载的是 PostCSS 7.x（比如 postcss@7.4.2），而 Tailwind v4+ 强制依赖 PostCSS 8+。这不是配置写错了，是 node_modules 里混进了旧版。
执行 npm ls postcss 查看真实版本树；如果输出中含 postcss@7.x，就得连带清理：
- 运行
npm uninstall postcss autoprefixer tailwindcss（别只卸tailwindcss） - 删掉
node_modules和package-lock.json - 重装：
npm install -D postcss@^8 autoprefixer@^10 tailwindcss@latest
注意：Vite 项目建议直接删掉 postcss.config.cjs，改用 @tailwindcss/vite 插件——手动配这个文件反而会干扰自动注入，导致 @tailwind 指令完全不生效。
动态 class 绑定中混用任意值语法触发 WXML 转义错误
在 uni-app 或 Taro 小程序中，:class="['text-[#333]', isActive && 'text-[#ff6b6b]'] 这类写法会导致编译器把方括号内容当字符串原样输出到 WXML，产生双引号转义，最终报 unexpected character \。
根本原因是小程序模板引擎无法处理含特殊字符的动态 class 字符串。解决方案很直接：
- 避免在
:class数组里直接写text-[#333]这类任意值 - 改用静态类 + 条件控制：
class="text-[#333] {{ isActive ? 'text-[#ff6b6b]' : '' }}"（Taro）或class="text-[#333]" :class="{ 'text-[#ff6b6b]': isActive }"（uni-app） - 更稳妥的做法是提取为预设类，比如在
tailwind.config.js的theme.extend.colors里定义brand: '#333'，再用text-brand
shadow-[]、bg-[] 等任意值类写法不符合 JIT 解析规则
不是所有带方括号的写法都能被 Tailwind JIT 正确识别。常见失效场景包括：
-
shadow-[inset_0_0_0_1px_red inset_0_0_0_2px_blue]—— 错在空格分隔，必须用英文逗号：shadow-[inset_0_0_0_1px_red,inset_0_0_0_2px_blue] -
rounded-[12px]或border-[2px]—— 这些前缀（rounded-、border-）根本不支持任意值语法，JIT 不会生成对应 CSS -
bg-[url('/img.png')]中路径含空格或未编码特殊字符（如my image.png）——需 URL 编码或改用相对路径
支持任意值的前缀有限，优先确认文档列表：bg-、text-、mt-、w-、grid-cols-、duration-、shadow- 是安全的；rounded-、place-items-、transition- 则不行。
任意值类与基础类特异性冲突导致样式不生效
w-full 和 w-[80px] 同时存在时，后者常被覆盖——不是写法错，是两者生成的选择器特异性完全相同（都是 .w-full 和 .w-\[80px\]，specificity = 0,1,0），而 Tailwind 默认按字典序输出 CSS，w-full 往往排在前面。
不能靠调整 HTML 中 class 顺序来解决，浏览器不认这个。正确做法是提升任意值类的特异性：
- 用
[&]:w-[80px]：编译后生成.w-full.w-\[80px\]（specificity = 0,2,0），稳压w-full - 避免
!important，它破坏可维护性，且在某些构建流程中会被 PurgeCSS 移除 - 若需全局覆盖，可在
tailwind.config.js中设important: true，但仅限根容器等极少数场景
最易被忽略的一点：这个特异性问题在开发时未必立刻暴露，往往上线后才发现某处宽度/颜色没按预期渲染——因为本地热更新可能偶然让 CSS 加载顺序“碰巧”对了，而构建产物是确定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
