必须在入口CSS文件中按顺序写@tailwind base、components、utilities指令，因其是Tailwind编译器识别的样式注入指令，仅扫描主入口文件且顺序不可错，否则静默失效。
为什么必须在入口 CSS 文件里写 @tailwind 指令
因为 @tailwind 不是普通 CSS 规则，而是编译器识别的“样式注入指令”——它告诉 Tailwind 的构建工具（比如 Oxide 引擎）：“请把 base / components / utilities 这三块预编译好的 CSS 片段，按顺序塞到这里”。如果写在非入口文件、或被 @layer 包裹、或放在 @import 后面，它就失效了。
- 入口文件指你项目中被构建工具明确指定为“主 CSS 入口”的那个文件，通常是
src/styles.css或src/main.css，不是组件内<style>块，也不是通过 JSimport动态加载的 CSS - 顺序不能错：
@tailwind base必须在最前（重置和基础排版），@tailwind components居中（自定义组件类），@tailwind utilities在最后（所有工具类，依赖前面的基础） - 若用 Vite + Vue SFC，在
<style>里写@tailwind会静默失败——Vite 默认不把单文件组件里的<style>当作构建入口，也不会触发 Tailwind 编译流程
@tailwind base 实际注入了什么
它不只是一个 reset.css。它包含三类关键内容：HTML 元素默认样式（如 button 的字体继承、input 的边框）、CSS 自定义属性（--tw-shadow 等用于阴影/过渡的底层变量）、以及全局作用的 @layer base 规则（比如 *, ::before, ::after { box-sizing: border-box }）。
- 如果你删掉
@tailwind base，box-sizing: border-box就不会自动应用，导致 padding/margin 行为与预期不符 -
@tailwind base中的字体设置（font-family,line-height）会影响所有未显式覆盖的文本元素，跳过它等于放弃 Tailwind 的排版一致性保障 - 它不包含任何工具类（如
text-lg），也不生成响应式断点逻辑——那些都由@tailwind utilities负责
为什么不能把 @tailwind 拆开放进多个文件
Tailwind 的 JIT（Just-In-Time）引擎在启动时只扫描一次入口 CSS 文件，提取所有 @tailwind 指令并按出现顺序合并生成最终样式表。它不会递归解析 @import 链、也不会跨文件收集指令。
- 例如你在
a.css写@tailwind base，在b.css写@tailwind utilities，再在入口里@import "a.css"; @import "b.css"—— 构建后只会生效最后一个@tailwind指令（即utilities），前面的base和components全部丢失 - 某些旧文档提到“可分散引入”，那是基于 PostCSS 插件时代的手动配置，Oxide 引擎（v4.0+ 默认）已彻底移除该能力
- 按需加载场景（如 Vue 组件内
import "@/assets/tailwind-card.css"）可行，但前提是这个tailwind-card.css本身就是一个完整入口：含全部三个@tailwind指令，且不依赖外部上下文
v4.0 下 @tailwind 和 @theme 的位置关系
@theme 必须出现在 @tailwind utilities 之前，但可以跟 @tailwind base 或 @tailwind components 混排——只要确保它在 utilities 前即可。这是因为 utilities 生成类名时要读取 @theme 定义的变量（如 --color-primary-500），而 base 和 components 不依赖这些值。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@tailwind utilities; @theme { --color-primary-500: #3b82f6; }→text-primary-500类不会生成 - 正确写法：
@tailwind base; @theme { --color-primary-500: #3b82f6; } @tailwind utilities; -
@breakpoints同理，也必须在@tailwind utilities前，否则md:p-4这类响应式类不会被识别
