Tailwind CSS动态类名无法生成，因其JIT编译器仅静态扫描源码中写死的完整字符串字面量，不执行JS插值或推测变量值，故text-${color}-600等模板字符串在构建时未被解析，对应CSS规则未生成。
为什么直接抄 Tailwind 的 class 名在 SCSS 里不“按需”
SCSS 本身没有运行时或构建时的类名提取能力。你写 @each 循环生成 .p-2、.m-4 等类，编译后就是全量输出——哪怕项目里只用了 .p-2，其余几百个间距类照样进 CSS 文件。Tailwind 的“按需”靠的是 PostCSS 插件 + content 静态扫描，而纯 SCSS 没这层机制。
所以所谓“在 SCSS 中实现类似 Tailwind 的按需”，本质是：用 SCSS 写出可配置、易裁剪的工具类生成逻辑，再靠人工或脚本控制哪些被实际 @import，而非指望编译器自动剔除未用类。
用 map + @each 批量生成工具类的正确姿势
这是最贴近 Tailwind 工具类组织方式的 SCSS 写法，但必须配合显式开关才能接近“按需”效果：
-
$spacers、$spacing-types、$spacing-directions这些 map 要拆开定义，方便单独注释或覆盖 - 每个
@each块应包裹在条件判断中，例如@if $enable-spacing-utilities { ... } - 避免把所有工具类塞进一个大文件；按功能拆成
_spacing.scss、_text.scss、_flex.scss，按需@import - 方向映射中
"x": "left right"这种字符串拼接要加引号，否则 SCSS 解析失败
示例节选（仅生成 padding）：
立即学习“前端免费学习笔记（深入）”；
$enable-padding-utilities: true !default;
@if $enable-padding-utilities {
@each $type-key, $type-prop in ("p": "padding") {
@each $dir-key, $dir-prop in ("t": "top", "b": "bottom", "l": "left", "r": "right", "x": "left right", "y": "top bottom") {
@each $size-key, $size-val in (1: 0.25rem, 2: 0.5rem, 3: 1rem) {
.#{$type-key}#{$dir-key}-#{$size-key} {
@if $dir-prop == "left right" {
#{$type-prop}-left: $size-val;
#{$type-prop}-right: $size-val;
} @else if $dir-prop == "top bottom" {
#{$type-prop}-top: $size-val;
#{$type-prop}-bottom: $size-val;
} @else {
#{$type-prop}-#{$dir-prop}: $size-val;
}
}
}
}
}
}
如何让 SCSS 工具类真正“按需”加载
关键不在生成逻辑，而在导入控制和变量开关。SCSS 的“按需”是开发阶段的人为裁剪，不是构建阶段的自动剔除：
- 在入口
main.scss中，只@import真实需要的模块，比如只引入_spacing.scss和_text.scss，跳过_shadow.scss和_border.scss - 所有模块顶部声明
$enable-*: false !default，并在@import前重置为true，例如：$enable-flex-utilities: true;→ 再@import "flex"; - 禁用整组工具类时，不要删
@import行，而是设对应$enable-变量为false，避免破坏依赖顺序 - 若用 Vite 或 Webpack，可借助插件（如
postcss-scss-vars）把 SCSS 变量注入到 JS，实现更细粒度的条件编译（但复杂度陡增）
动态类名拼接在 SCSS 里根本不可行
像 className={`p-${size}`} 这种写法，在 SCSS 里无法生成对应类——因为 SCSS 编译发生在构建前期，它看不到 JS 运行时的变量值。JIT 模式能处理部分模板字面量（如 tw`p-${size}`），但那是 Tailwind 的 PostCSS 插件干的，和 SCSS 无关。
如果你坚持用 SCSS 实现类似效果，只有两个现实选择：
- 手动列出所有可能的
size值，写死在 map 里，比如(sm: 0.25rem, md: 0.5rem, lg: 1rem) - 改用
@apply封装进组件级样式，把动态逻辑留在 JS 层，SCSS 只管提供原子规则
别试图让 SCSS “猜”运行时类名，它没这个能力。所谓“类似 Tailwind 的按需”，在 SCSS 体系里，就是靠人控 + 拆分 + 开关，而不是靠工具自动推导。这点最容易被高估，也最常导致体积失控。
