不能在 中写 @tailwind 指令，因其需在全局未作用域样式中由 PostCSS 插件解析；应将 @tailwind 放入 src/style.css 并全局引入，组件内直接使用类名。
不能直接在 里写 @tailwind 指令，也不能靠 scoped 样式“穿透”到 Tailwind 的原子类上——Tailwind 的类名是全局生效的，scoped 只作用于你手写的 CSS 规则。
为什么 @tailwind 会报错
Tailwind 的 @tailwind base、@tailwind components、@tailwind utilities 必须在**未作用域限制的全局样式入口**中解析，PostCSS 插件只扫描非 scoped 的 CSS 文件（如 src/style.css）。一旦放进 ，Vite 或 Vue 的样式处理链会把它当普通 CSS 处理，跳过 Tailwind 编译阶段，结果就是：@tailwind 被原样输出成无效 CSS 规则，控制台报 Unknown at rule @tailwind。
- Vue 单文件组件的
本质是通过属性选择器（如data-v-f3f2d1a2）做样式隔离，不参与 PostCSS 的 Tailwind 解析流程 -
@tailwind不是 CSS 标准语法，它依赖@tailwindcss/postcss插件识别并展开为真实 CSS，而该插件默认不处理 scoped 块 - 即使强行用
:deep()或::v-deep，也解决不了编译缺失问题——类根本没生成
正确做法：全局引入 + 组件内直接用类名
把 Tailwind 当作“全局样式系统”来用，而不是“可 scoped 的 CSS 模块”。你在 src/style.css（或 src/assets/styles.css）里写三行 @tailwind 指令，然后在 main.ts 中 import 它；之后所有 .vue 文件的模板里，都可以自由写 class="text-lg p-4 bg-blue-500" 这类类名，无需任何额外声明。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 确保
tailwind.config.js的content字段包含"./src/**/*.{vue,js,ts,jsx,tsx}"，否则生产构建时会删掉未被扫描到的类 - 不要在
里尝试覆盖 Tailwind 类（比如写.bg-blue-500 { background-color: red !important }），这违背原子化设计原则，且容易因 specificity 冲突失效 - 若真需局部定制（如某个按钮微调圆角），优先用内联
style或新增一个带前缀的自定义 utility（在theme.extend.utilities里定义）
想局部禁用/覆盖某几个 Tailwind 类？别硬 scoped
Scoped 样式无法影响 Tailwind 已生成的类，但你可以用更可控的方式实现局部约束：
- 用
!important是反模式，应避免；真正需要覆盖时，在tailwind.config.js的theme.extend里扩展新类，例如btn-hero: "px-8 py-3 rounded-full font-bold" - 如果某组件必须完全隔离样式（比如嵌入第三方页面），用
（不加 scoped）+ CSS 层叠上下文（all: unset后重置）更可靠，但这和 Tailwind 无关 - Vite 插件
@tailwindcss/vite支持按目录启用 JIT 扫描，但不支持 per-component 配置——Tailwind 天然不是组件级样式方案
最易被忽略的一点：很多人以为加了 scoped 就能“安全地”在 style 块里写 @layer components { .btn { @apply py-2 px-4 } }，但只要这个 没被 PostCSS 正确识别为 Tailwind 上下文，@apply 就会静默失败，最终渲染出无样式的元素——这类问题只能靠检查构建产物 CSS 是否含对应规则来定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
