@tailwind指令未生效的主因是postcss未参与构建流程；需检查终端日志确认输出css是否注入规则，验证postcss.config.js配置、构建工具插件（如postcss-loader）、@tailwind base必须置于最前且仅在入口css中声明。
@tailwind 指令本身不“引入”样式，它只是 PostCSS 插件识别并替换的占位符；没跑 PostCSS，@tailwind base 就是普通注释，压根不会生成任何 CSS。
为什么 @tailwind 指令没生效？
最常见原因是 PostCSS 根本没参与构建流程——指令还在源文件里原样躺着，输出 CSS 里既没重置规则，也没 text-red-500 这类工具类。
- 检查终端启动日志：运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，看输出文件是否真的被注入了上千行规则；如果输出文件内容和输入一模一样，说明 PostCSS 链路断了 - 确认
postcss.config.js中启用了tailwindcss插件，且路径指向正确的tailwind.config.js（比如require('tailwindcss')({ config: './tailwind.config.js' })） - Webpack 用户必须配
postcss-loader，Vite 默认支持但需确保没被css.preprocessor配置意外绕过
@tailwind base 必须放在最前面
顺序不是约定俗成，而是层叠依赖刚性要求：@tailwind base 提供 html、body、* 等全局重置和排版变量（如 --tw-prose-links），后续层级直接依赖这些定义。
- 把
@tailwind components写在base前面 → PostCSS 报错 “undefined variable”，因为.prose里用了base定义的--tw-prose-body - 把
@tailwind utilities放中间 → 工具类会被components的同名声明覆盖（比如bg-red-500被.btn-primary的background-color压住） - 多写一个
@tailwind base→ 页面字体突然变大、边距失控，因为重置规则被重复应用两次
别在非入口 CSS 文件里写 @tailwind
PostCSS 只处理被主构建流程“看见”的入口文件，比如 Vite 中被 app.js 显式 import '../css/app.css' 的那个文件，或 Webpack 中配置为 entry 的 CSS。
- 在
Button.module.css或header.scss里写@tailwind utilities→ 构建时静默忽略，连警告都没有 - 用
@import引入其他 CSS 后再写@tailwind→ PostCSS 不会递归解析@import目标，指令失效 - 在 Laravel Blade 模板里用
<link rel="stylesheet">引入已编译的 CSS → 绕过了 PostCSS，@tailwind从一开始就没机会被处理
真正卡住人的从来不是语法记不牢，而是构建链路里哪个环节悄悄漏掉了 PostCSS —— 多盯一眼终端里 postcss-loader 或 vite 的日志输出，比反复检查 @tailwind 顺序更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
