@apply在vue sfc中不生效主因是postcss-loader未处理style块，导致tailwind插件未解析；常见于vue cli配置覆盖、vite插件未注册或scoped样式隔离冲突。
@apply 在 Vue SFC 中不生效，绝大多数情况不是语法写错，而是 postcss-loader 根本没处理该 <style></style> 块。 它被当成了普通 CSS 直接透传，@apply 这个 Tailwind 特有指令压根没进 Tailwind 插件的解析流程。
Vue CLI 项目中 postcss-loader 配置被覆盖
Vue CLI 默认启用 postcss-loader，但如果你在 vue.config.js 中手动配置了 css.loaderOptions.postcss，却只写了插件数组，就容易漏掉关键项：
- 错误写法：
plugins: [require('tailwindcss'), require('autoprefixer')]—— 缺少postcss.config.js的自动加载逻辑，且未指定configFile - 正确做法：显式传入配置路径，确保
tailwind.config.js被读取：configFile: path.resolve(__dirname, 'postcss.config.js') - 更稳妥方案：直接删掉
vue.config.js里的postcss配置，改用标准postcss.config.js文件（内容为module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }）
Vite 项目中 postcss 插件未注册或版本冲突
Vite 4.3+ 内置 PostCSS 8，但若你手动安装了新版 postcss 或 tailwindcss，可能因 peer dep 不匹配导致插件静默失效：
- 运行
npx tailwindcss --version和npx postcss --version，确认postcss版本 ≥8.4.31（对应tailwindcss@3.4.3） -
vite.config.js中必须显式声明插件：css: { postcss: { plugins: [require('tailwindcss'), require('autoprefixer')] } } - 若已装
vite-plugin-tailwind，请禁用默认 postcss 处理，否则双重编译会把@apply当非法规则报错：error: @apply is not a valid css rule
@apply 出现在 scoped 样式里却无效
这是最隐蔽的坑：scoped 模式下，Vue 会给 <style scoped></style> 加属性选择器（如 [data-v-f3f266ba]），而 Tailwind 的 @apply 展开后生成的类是全局规则，无法匹配这个属性选择器。
- 现象：样式完全不渲染，devtools 里连展开后的规则都看不到
- 本质：Tailwind 插件在
scopedstyle 块里仍会执行@apply，但生成的 CSS 被 Vue 的 scope 机制隔离掉了 - 解法只有两个：
scoped块里别用@apply；或者改用<style></style>全局块 + 类名组合控制作用域
真正卡住人的往往不是“怎么配”，而是“配了但没生效”——这时候要盯住构建日志里有没有 postcss 插件加载记录，以及检查 devtools 的 Styles 面板里，那个 <style></style> 块是否真的被解析成了带展开类的 CSS，而不是原样挂着 @apply 注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
