必须按 base → components → utilities 顺序写，因为 Tailwind 的三层样式存在层叠依赖：base 提供全局重置和排版基础，components 依赖 base 的变量定义原子类，utilities 需最后注入以覆盖前两者；PostCSS 未运行则 @tailwind 指令仅被当注释忽略。
直接在你的 CSS 文件顶部写 @tailwind base、@tailwind components、@tailwind utilities 就行，但顺序不能错，且必须确保 PostCSS 已正确配置并运行。
为什么必须按 base → components → utilities 顺序写？
Tailwind 的三层样式有明确的层叠依赖关系：base 提供重置和默认排版（如 html、body、*, ::before, ::after），components 依赖这些基础规则定义原子类（比如 .btn），utilities 则是纯工具类，需在最上层覆盖前两者。顺序颠倒会导致样式被意外覆盖或失效。
-
@tailwind base必须放在最前，否则自定义字体、行高、边距等全局重置不生效 -
@tailwind components中的类（如.prose）会用到base定义的排版变量，提前引入会报未定义变量错误 -
@tailwind utilities最后引入，保证text-red-500这类类能覆盖components里的颜色声明
PostCSS 没跑？@tailwind 指令就只是注释
很多人写了 @tailwind 却没效果，根本原因是 PostCSS 没参与构建流程。Tailwind 不是纯 CSS 库，它靠 PostCSS 插件解析并注入实际样式。
- 确认
postcss.config.js中已启用tailwindcss插件，且路径指向正确的tailwind.config.js - 检查构建命令是否调用了 PostCSS（例如 Vite 默认支持，但 Webpack 需配
postcss-loader） - 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch可手动验证指令是否被处理——输出文件里应该有大量生成的 CSS 规则，而不是原样保留@tailwind
常见错误：在非入口 CSS 文件里写 @tailwind
@tailwind 指令只应在你最终打包/导入的主 CSS 文件中出现一次，通常叫 index.css 或 app.css。如果误写在某个组件局部 CSS 里（比如 Button.module.css），构建时会被忽略或报错。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 等工具只会处理被
import或@import的顶层 CSS 入口文件 - 多个
@tailwind base会导致重复重置样式，页面可能突然变大或字体崩坏 - 如果用 CSS-in-JS（如 styled-components），
@tailwind完全不适用——得改用tailwindcss-jit的插件模式或预编译方案
真正卡住人的往往不是语法，而是 PostCSS 是否真正在链路里跑了、以及那个入口 CSS 文件是不是真的被构建系统“看见”了。多看一眼终端里 PostCSS 的日志输出，比反复检查 @tailwind 写法更有效。
