直接抄tailwind类名无效，因其依赖theme.spacing等映射逻辑与purgecss扫描机制；scss需手动设方向、符号、步长三组变量并统一单位，响应式须用@each嵌套媒体查询，自定义类须通过@layer utilities或配置content路径确保不被删除。
为什么不用直接抄Tailwind的class名？
因为Tailwind的mt-4、flex这些类名背后是整套theme.spacing、theme.flexbox映射逻辑，硬搬命名但没配值或单位换算规则，生成的CSS就只是“看起来像”，实际响应式、负值、断点前缀全失效。更关键的是，SCSS里没法复用Tailwind的PurgeCSS扫描机制——你写的.ml-2若没在HTML里显式出现，它照样会打包进最终CSS，白占体积。
用SCSS循环生成原子类的关键参数怎么设？
核心是控制三组变量：方向（t/r/b/l/x/y）、符号（正/负）、步长（0.25rem起跳，别一口气从0到24）。真实项目里，@for $i from 1 through 12比1 through 24更安全，因为超过mt-12（3rem）的边距极少用；负值只对mt/mb/ml/mr有意义，-mx这种组合几乎没人用，写了反而增加维护负担。
-
$spacing-unit: 0.25rem必须统一，否则mt-2和py-4的数值关系就乱了 - 方向缩写要严格对齐：用
my不用vert，否则团队里有人写my-2有人写vert-2，原子化就退化成命名混乱 - 别生成
mb-0这类冗余类——SCSS里margin-bottom: 0直接写内联style或用重置更轻量
如何让SCSS原子类支持响应式前缀？
SCSS本身不解析md:mt-4这种写法，必须手动展开。最简方案是嵌套@each循环：
@each $breakpoint, $value in (sm: 640px, md: 768px, lg: 1024px) {
@media (min-width: $value) {
@for $i from 1 through 12 {
.#{$breakpoint}-mt-#{$i} { margin-top: $i * 0.25rem; }
.#{$breakpoint}-flex { display: flex; }
}
}
}
注意两点：一是$breakpoint变量名必须和你HTML里写的前缀完全一致（md:mt-4对应.md-mt-4），二是媒体查询必须包住整个循环块，否则生成的CSS会漏掉断点逻辑。
自定义原子类时最容易被删掉的坑
很多人加了.shadow-card后上线发现样式没了，不是代码写错，是PurgeCSS根本没扫描到这个类名。SCSS生成的类名如果没在content配置的文件路径里被字符串匹配到（比如只写了src/**/*.tsx但你的SCSS在styles/atoms.scss），它就会被当成“未使用”干掉。解决方法只有两个：
- 把SCSS原子文件路径加进
tailwind.config.js的content数组（不推荐，Tailwind不解析SCSS） - 改用
@layer utilities并确保该文件被@import进主CSS入口（推荐，但得接受它绕过PurgeCSS，体积稍大）
真正稳的做法：别用SCSS手撸shadow-card，直接在tailwind.config.js里extend.boxShadow，让Tailwind自己生成——毕竟你想要的不是“像Tailwind”，而是“和Tailwind一样能被构建流程识别”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
