@tailwind指令仅在构建工具指定的主css入口文件中生效，因jit编译器只扫描该文件一次，不递归解析@import或跨文件收集指令；若分散写入多个文件，仅最后一个指令生效，其余丢失。
@tailwind 指令只在入口 CSS 文件中生效，其他地方写等于白写
为什么不能在多个 CSS 文件里分别写 @tailwind base、@tailwind components、@tailwind utilities
Tailwind 的 JIT 编译器（v4.0+ 默认）启动时只扫描一次你项目中被构建工具明确指定的“主 CSS 入口文件”，比如 src/styles.css 或 src/main.css。它不会递归解析 @import 链，也不会跨文件收集 @tailwind 指令。
常见错误现象：
- 你在
a.css里写@tailwind base，又在b.css里写@tailwind utilities，然后在入口里@import "a.css"; @import "b.css"—— 最终只生成utilities对应的样式，base和components全部丢失 - 某些旧文档提过“可分散引入”，那是 PostCSS 插件时代的手动配置，Oxide 引擎已不支持
为什么 @tailwind base 必须放在最前，且不能跳过
@tailwind base 不只是重置样式，它注入三类关键内容：* 和 ::before/::after 的 box-sizing: border-box、HTML 元素默认字体与行高、以及底层 CSS 自定义属性（如 --tw-shadow）。这些是后续所有类生效的前提。
容易踩的坑：
- 删掉
@tailwind base后，padding/margin行为会异常，因为box-sizing没被设为border-box -
@tailwind components中的类（如.prose）依赖base定义的排版变量，提前引入会报未定义变量错误 - 用 Vite + Vue SFC，在
<style></style>块里写@tailwind会静默失败——Vite 不把组件内<style></style>当作构建入口
PostCSS 没跑，@tailwind 就只是注释
@tailwind 不是标准 CSS 规则，而是 Tailwind 构建流程识别的指令。如果 PostCSS 没参与构建，这些指令会被当作普通注释忽略，输出 CSS 里连一行实际样式都不会有。
验证方法：
- 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，检查输出文件是否包含大量生成规则，而不是原样保留@tailwind - 确认
postcss.config.js（或.cjs）里启用了tailwindcss插件，且路径正确 - 终端日志里看不到 PostCSS 处理痕迹？那大概率是构建链路没接上，不是
@tailwind写错了
真正卡住人的往往不是语法顺序，而是那个“入口 CSS 文件”有没有被构建系统真正读到，以及 PostCSS 是否真正在链路里跑了——多看一眼终端输出，比反复改 @tailwind 位置更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
