@apply 报“Unexpected CSS”错误主因是PostCSS未处理该文件或处理顺序被截断：Vite默认仅处理src/下.css文件；SCSS中混用@use与@apply会封闭作用域致类名不可见；scoped样式绕过postcss-loader使@apply失效。
@apply 报 “Unexpected CSS” 错误，基本不是语法写错了，而是 PostCSS 根本没处理这个文件，或者处理顺序被其他预处理器（如 Sass）截断了——@apply 被当成了非法 CSS 规则直接拒收。
PostCSS 没接管这个文件（最常见）
你写了 @apply bg-blue-500，但构建后完全没效果，控制台也不报错？大概率是该 CSS 文件压根没进 PostCSS 流水线。
- Vite 默认只处理
src/下的.css文件；public/、assets/或自定义路径下的文件不会触发 Tailwind 插件 - 用了
<style lang="scss">却没配好链式处理：Sass 编译必须在 PostCSS 之前，否则@apply还没被展开就进了 Sass 解析器，直接报Unexpected CSS或静默丢弃 - Next.js 的
app/目录下，全局 CSS 必须叫app/globals.css，否则@tailwind指令不被识别，整个 Tailwind 流程就断了
SCSS/Sass 文件里混用 @use 和 @apply
SCSS 的 @use 是模块导入机制，它会提前封闭作用域，导致 Tailwind 插件无法注入工具类上下文。此时 @apply 看起来“存在”，但实际找不到任何类名，PostCSS 解析器就会把它当成非法规则扔掉。
- 别在同一个
<style lang="scss">块里同时写@use "xxx"和@apply text-red-500 - 如果必须用 SCSS 变量，改用
@layer+ 全局.css文件定义，再通过@import引入 - Vite 项目中，确认
vite.config.ts的css.preprocessorOptions.scss没覆盖默认的 PostCSS 链路
@apply 出现在 <style scoped> 里却报错
Vue/Svelte 的 scoped 模式默认绕过 postcss-loader，@apply 指令根本不会进 Tailwind 插件——浏览器或构建工具看到的就是裸的 @apply，自然判定为 Unexpected CSS。
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件中，
<style scoped>块里的@apply永远不会生效，无论你装了多少插件 - 解法只有两个：
<style>全局块里用@apply，或直接在模板里组合工具类（class="bg-blue-500 text-white rounded"） - Tailwind v3.3+ 要求
<style>块顶部第一行写@reference "tailwindcss";，但这个只对非 scoped 有效；scoped 下写了也白写
真正卡住人的地方往往不是配置漏了哪一行，而是你以为在跑 Tailwind，其实连 PostCSS 都没进来——先确认文件路径、后缀、lang 属性、构建工具的默认规则，比调配置更关键。
