必须在项目主入口css文件中严格按顺序写入三行@tailwind指令并被main.js/ts显式import，否则box-sizing失效、字体错乱、组件样式偏移；因vite不扫描sfc内style，且tailwind仅识别主入口css中的指令，顺序错或未import将导致base未注入、自定义属性缺失、整套机制失能。
必须在项目主入口 CSS 文件中，按严格顺序写入三行 @tailwind 指令，并确保该文件被 main.js 或 main.ts 显式 import —— 任何跳过、错位、拆分或放错位置的操作，都会导致 box-sizing 失效、字体继承错乱、组件库样式偏移等静默问题。
为什么不能在 App.vue 的 <style></style> 里写 @tailwind
Vite 默认不把单文件组件里的 <style></style> 当作构建入口，PostCSS 插件（包括 @tailwindcss/vite）根本不会扫描它。你写的 @tailwind base 会被原样输出到 CSS 中，终端日志里看不到解析记录，生成的样式表里也没有 .text-lg 这类工具类。
- 现象：页面看起来“差不多”，但
padding/margin行为异常，button字体突然变小，textarea圆角消失 - 原因：
@tailwind base未生效 →*, ::before, ::after { box-sizing: border-box }没注入 → 所有尺寸计算逻辑回归浏览器默认 - 验证方式：检查最终打包出的 CSS 文件，搜索
box-sizing；若只有你自己写的，说明@tailwind base完全没跑
@tailwind base 必须放在最顶部，且顺序不可调换
@tailwind 不是普通 CSS 规则，而是 Tailwind 编译器识别的注入指令。它只扫描主入口 CSS 文件一次，按出现顺序拼接三段预编译内容：base → components → utilities。顺序错，整个链就断。
-
@tailwind base必须是文件第一行（前面不能有@import、注释或空行） -
@tailwind components必须在中间，它依赖base提供的自定义属性（如--tw-shadow） -
@tailwind utilities必须在最后，所有响应式、深色模式、hover/focus 变体都靠它生成 - 错位示例：
@tailwind utilities写在最前 → 构建后只有工具类，没有重置、没有font-family、line-height全崩
入口 CSS 文件必须被 main.js 显式 import，不能靠插件“自动发现”
@tailwindcss/vite 插件不会自动导入任何 CSS 文件；它只接管构建流程。如果你新建了 src/assets/tailwind.css，但 main.js 里没写 import '@/assets/tailwind.css'，那这个文件压根不会进 PostCSS 流水线。
- 正确路径：
main.js→import './assets/tailwind.css'→ Vite 加载 → PostCSS 解析 → Tailwind 编译器提取@tailwind指令 - 常见错误：只在
vite.config.js里配了插件，但忘了在main.js中 import 对应 CSS 文件 - 别信“自动注入”：插件不会读取
tailwind.config.js.content去反向找 CSS 文件；content 字段只管扫描哪些文件里写了类名，不管 CSS 从哪来 - 验证方法：删掉
main.js中的 import，重启 dev server —— 终端不再打印 “Tailwind CSS: processed X files”，说明已脱钩
最容易被忽略的是：你以为 @tailwind base 只是重置样式，其实它还注入了所有底层 CSS 自定义属性（--tw-*），这些变量是 @apply、dark:、阴影、过渡效果的基础设施。漏掉它，不是少几个 class，而是整套机制失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
