@apply在<style scoped>中不生效，因Vue的scoped机制添加属性选择器隔离样式，且postcss-loader默认不处理scoped块，导致Tailwind插件无法解析@apply；解法为改用全局<style>块或模板直接使用工具类。
@apply 在 <style scoped> 里根本没被解析
Vue 的 <style scoped> 块默认绕过 postcss-loader，@apply 指令压根不会进 Tailwind 插件的处理流程。它被当成普通 CSS 直接透传，浏览器自然报错或静默忽略。
- 现象：devtools 的 Styles 面板里看不到任何展开后的规则，甚至没有对应类名的 CSS 块
- 本质不是语法错，而是构建链路断了——
postcss-loader根本没加载这个<style>块 - Vue CLI 项目中若手动配置了
css.loaderOptions.postcss，但只写了plugins数组，就会漏掉自动读取postcss.config.js的逻辑 - Vite 项目需在
vite.config.js的css.postcss.plugins显式注册tailwindcss，否则插件静默不生效
scoped 属性选择器把 Tailwind 类“隔离”掉了
Vue 给 <style scoped> 里所有选择器加了 [data-v-xxxx]，而 Tailwind 生成的类（如 .text-red-500）是全局裸类，匹配不上带属性的选择器。
- 你写
.text-red-500 { @apply text-red-500; }，编译后变成.text-red-500[data-v-xxxx] { color: #ef4444; } - 但目标元素上并没有
data-v-xxxx属性（尤其子组件内部），样式完全不触发 -
:deep()可穿透，但它必须配合scoped使用，且不能单独写成:deep(.text-red-500)—— 必须有前置锚点，比如.container :deep(.text-red-500) - 预处理器影响语法：Sass/SCSS 用
::v-deep（已弃用但兼容），CSS 或 Less 用:deep，且 Vite + Vue 3 才支持
别在 scoped 块里硬刚 @apply，换思路更稳
强行在 scoped 里用 @apply 或 :deep() 容易踩坑，维护成本高。真正落地快的解法是绕开限制本身。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 把需要
@apply的样式挪到全局<style>块里，用类名组合控制作用域（比如加个组件前缀.my-card__header） - 模板里直接用工具类：
<div class="text-red-500 p-4">—— 这种写法天然兼容 scoped，也不依赖 postcss 处理 style 块 - 如果必须封装样式逻辑，用
defineProps+class动态拼接，避免在样式块里做条件判断 - 注意 purge 配置：确保
tailwind.config.js的content字段包含所有.vue文件路径，否则 JIT 模式下类名会被删掉
真正卡住人的从来不是“怎么写”，而是“谁在处理这行代码”
检查构建日志里有没有 postcss 插件加载记录，打开 devtools 的 Styles 面板看那条规则到底存不存在、是否被 [data-v-xxx] 包裹、是否被其他样式覆盖——这些比翻文档更快定位问题。scoped 不是 bug，是机制；Tailwind 也不是魔法，它只对进入它 pipeline 的 CSS 起作用。
立即学习“前端免费学习笔记（深入）”；
