tailwind 与 scss 可混合使用但不可混写，@apply 仅在 postcss 处理阶段生效，须写在 .css/.module.css 中；scss 负责变量与逻辑（配置层），tailwind 负责原子样式（应用层），二者需通过分层协作而非语法叠加实现。
能混合，但不能混写——Tailwind 和 SCSS 必须分层协作，不是语法叠加。
SCSS 文件里直接写 @apply 会报错
很多人以为在 .scss 文件里写 @apply 就能用 Tailwind 工具类，结果编译时报 Unknown word。这是因为 PostCSS 默认不解析 SCSS 语法，@apply 是 Tailwind 的 PostCSS 插件指令，必须在 PostCSS 处理阶段生效，而 SCSS 解析器（如 postcss-scss）只负责把嵌套、变量等转成标准 CSS，不识别 @apply。
- ✅ 正确做法：所有含
@apply的样式都写在.css或.module.css文件里，由 Tailwind 的 PostCSS 插件处理 - ❌ 错误做法：在
button.scss里写@apply px-4 py-2 bg-blue-500 - ⚠️ 注意：即使装了
postcss-scss，它只是让 PostCSS 能读 SCSS 语法，不代表 Tailwind 插件就能在 SCSS 文件中运行
SCSS 负责变量和逻辑，Tailwind 负责原子样式
二者分工明确：SCSS 做「配置层」，Tailwind 做「应用层」。比如你想统一按钮的圆角、阴影、禁用态透明度，这些应该抽成 SCSS 变量；而具体某个按钮用什么 padding、hover 颜色，仍用 Tailwind 类名或 @apply 组合。
- SCSS 中定义：
$btn-radius: 0.375rem、$btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) - Tailwind 配置中引用：
theme.extend.borderRadius或theme.extend.boxShadow，通过theme: { extend: { borderRadius: { 'btn': '0.375rem' } } }注入 - 组件中使用：
class="rounded-btn shadow-btn hover:shadow-md"，而不是在 SCSS 里写.btn { border-radius: $btn-radius; }
PostCSS 配置必须显式指定 parser
如果你的项目同时有 .css 和 .scss 文件，且想让 Tailwind 在两者中都生效，PostCSS 配置不能只靠插件列表——postcss-scss 不是插件，是解析器，必须设为 parser 字段值。
- ✅ 正确配置（
postcss.config.js）：module.exports = { parser: 'postcss-scss', plugins: { 'tailwindcss': {}, 'autoprefixer': {}, } } - ❌ 常见错误：把
'postcss-scss': {}写进plugins对象里，这会导致解析失败 - ⚠️ Vite 用户注意：如果在
vite.config.ts中用了css.postcss配置，它会覆盖postcss.config.js，此时需把parser移到 Vite 配置中
组件库封装建议用 tv + SCSS 变量桥接
纯 Tailwind 写组件容易类名爆炸，纯 SCSS 又失去原子化优势。推荐用 tailwind-variants（tv）做组件骨架，再用 SCSS 变量控制设计系统基础值（如间距标尺、字体大小阶梯），最后在 Vue/React 组件中组合使用。
-
tv定义按钮变体：const button = tv({ base: 'inline-flex items-center justify-center font-medium transition-colors', variants: { variant: { primary: 'bg-blue-600 text-white hover:bg-blue-700', outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50', }, size: { sm: 'text-sm px-3 py-1.5', md: 'text-base px-4 py-2' } } }) - SCSS 中同步定义
$spacing-sm: 0.375rem，供设计文档和非 Tailwind 场景（如 Canvas 渲染）复用 - Vue 组件中：
:class="button({ variant: 'primary', size: 'md' })"，类名完全受控，无冗余
真正难的不是怎么写，而是决定哪些该交给 SCSS（全局约束）、哪些留给 Tailwind（局部表达）、哪些必须用 tv 或 clsx 封装（跨组件一致性）。三者边界一旦模糊，维护成本就指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
