不能直接在@tailwind指令里写SCSS语法，因其由PostCSS解析而非SCSS预处理器处理；需配置postcss-scss解析器且版本匹配，SCSS中引用Tailwind变量须用var()而非Sass变量，自定义类应置于@layer utilities中以防PurgeCSS误删。
为什么不能直接在 @tailwind 指令里写 SCSS 语法
Tailwind 的 @tailwind base、@tailwind components、@tailwind utilities 是 PostCSS 插件解析的指令，不是 CSS 预处理器语句。如果你在 main.css 里混用 @use 或嵌套写法，会直接报 Unknown word 错误——因为默认 PostCSS 解析器只认标准 CSS，根本不理解 SCSS 语法。
必须显式配置 postcss-scss 解析器（不是插件）
PostCSS 本身不支持 SCSS；postcss-scss 是一个独立的 parser（解析器），不是 plugins 列表里的插件。把它错加进 plugins 对象里，完全无效。
-
postcss.config.js中必须写parser: 'postcss-scss' - 版本要匹配：
postcss@8.4.38+postcss-scss@4.0.9是当前最稳组合（2026 年实测） - 只对
.scss文件生效；.css文件仍走默认 parser，别混后缀
正确示例：
module.exports = {
parser: 'postcss-scss',
plugins: {
'tailwindcss': {},
'autoprefixer': {},
}
}
SCSS 文件中如何安全引入 Tailwind 并复用其变量
你可以在 src/assets/styles/main.scss 里用 @use 加载 Tailwind 的 theme，但注意：它导出的是 CSS 自定义属性（--tw-xxx），不是原生 Sass 变量。所以不能直接 $blue-500，得用 var(--tw-blue-500)。
- 先确保
tailwind.config.js启用了theme.extend并导出你需要的值（如 spacing、colors） - 在 SCSS 中用
@use 'tailwindcss/theme' as *;（需 Tailwind v3.4+） - 若需生成复合类（如
.card-shadow-lg-sm），用@each遍历map-get(theme('boxShadow'), 'lg')等，但注意：这些值是字符串，不能参与计算
典型错误：试图在 @each 循环里用 lighten($color, 10%) —— Tailwind 导出的不是 Sass color 对象，而是 CSS 字符串，Sass 函数无法处理。
自定义类与 Tailwind 工具类共存时 PurgeCSS 不丢样式的关键
如果你手写 SCSS 生成一堆类似 .mt-1-5（对应 margin-top: 0.375rem）的类，它们不会被 PurgeCSS 自动保留——除非你把类名显式写进 content 配置里，或用 @layer utilities 声明。
- 推荐做法：所有自定义工具类都包在
@layer utilities { ... }里，Tailwind 会识别并纳入 purge 范围 - 避免硬编码像素值（如
mt-[17px]）：这种 arbitrary value 写法虽能用，但上线后大概率被 PurgeCSS 当成死代码删掉 - 如果必须扩展间距/颜色，优先走
tailwind.config.js的theme.extend.spacing或theme.extend.colors，而不是 SCSS 生成
真正容易被忽略的一点：Vite 项目里若同时存在 vite.config.ts 的 css.postcss 配置和 postcss.config.js，以 vite.config.ts 为准——很多人改了 postcss.config.js 却没生效，就是卡在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
