必须在postcss.config.js中显式配置plugins数组包含tailwindcss()，否则@tailwind指令报错；content字段须为字符串数组，@tailwind与@layer顺序不可颠倒，且webpack/vite需确保css经postcss处理链。
PostCSS 配置文件必须存在且 plugin 数组里有 tailwindcss()
PostCSS 不会自动识别 @tailwind 指令，没配置插件时直接写 @tailwind base 会报 Unknown rule @tailwind。必须显式把 tailwindcss 加进 plugins 数组。
常见错误：
- 只装了
tailwindcss但没在postcss.config.js里引用它 - 用的是
module.exports = { plugins: { tailwindcss: {} } }这种对象写法（仅部分框架如 Taro 支持），标准 PostCSS 要求数组形式 - 路径错写成
require('tailwindcss')('./tailwind.config.js')却漏传配置路径，导致content不生效
正确写法（推荐）：
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
]
}
tailwind.config.js 的 content 字段必须是字符串数组
content 决定 Tailwind 扫描哪些文件提取 class 名——写错就丢样式，尤其构建后才暴露问题。
- ❌ 错误：
content: "./src/**/*.{js,ts,jsx,tsx}"（不是数组） - ✅ 正确：
content: ["./src/**/*.{js,ts,jsx,tsx}"] - Vue 项目要加
.vue，Svelte 加.svelte，Taro/uni-app 还得包含.html和.config.ts等模板类文件 - 路径是相对于项目根目录，不是
tailwind.config.js所在位置
开发中可临时设为 content: [] 禁用 Purge，但上线前务必改回——否则 CSS 体积暴涨数倍。
@tailwind 指令顺序和 @layer 的位置不能乱
@tailwind base、@tailwind components、@tailwind utilities 不是普通 CSS 规则，而是触发三阶段样式注入的指令。你自定义的 @layer 必须紧贴对应指令之后，中间不能穿插其他 CSS。
- ❌ 错误顺序：
@layer components { .btn { @apply py-2; } } @tailwind components; - ✅ 正确顺序：
@tailwind components; @layer components { .btn { @apply py-2; } } -
@layer base必须跟在@tailwind base后面，@layer utilities同理 - 所有
@layer块都只能用一次，重复声明会覆盖而非合并
Webpack / Vite 等构建工具容易忽略的加载器配置
即使 postcss.config.js 写对了，CSS 文件也可能绕过 PostCSS 处理链。
- Webpack 用户检查
css-loader是否设置了importLoaders: 1（或更高），否则@import或url()引入的 CSS 不会进 PostCSS - Vite 默认启用 PostCSS，但若用了
css.preprocessorOptions（如scss），需确认是否覆盖了默认 PostCSS 插件 - Next.js 13+ App Router 中，
app/globals.css会自动走 PostCSS，但pages/下的 CSS 需手动确保被postcss-loader处理
最稳妥的验证方式：在 CSS 文件里写个 @tailwind utilities，然后跑构建，看输出文件里有没有生成 .p-4、.text-center 这类规则——没有就说明 PostCSS 链断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
