原子类命名遵循「属性-值」映射规律，如mt-4表示margin-top:1rem；前缀（mt、p、bg）对应CSS属性，数值来自预设scale，响应式前缀（md:）为修饰符而非新类名。
为什么原子类命名看起来混乱但其实有规律
原子类不是随意起名的，而是按「属性-值」映射生成的。比如 mt-4 表示 margin-top: 1rem，text-center 对应 text-align: center。框架如 Tailwind、Windi CSS 或 UnoCSS 都遵循这套映射逻辑，只是前缀和分隔符略有差异。
-
mt= margin-top，mb= margin-bottom，ml= margin-left，mr= margin-right -
p-开头是 padding，bg-是 background，text-控制文字样式，flex-属于 flex 布局相关 - 数值部分通常来自预设 scale（如
1→0.25rem，4→1rem），不是随意数字 - 响应式前缀如
md:text-lg表示「在 medium 断点及以上生效」，不是新增一类类名，而是修饰已有类
不靠死记，用 IDE 和工具链降低记忆负担
真正写代码时没人靠背熟全部类名。关键在于让编辑器帮你联想、补全、跳转和校验。
- 装官方插件：Tailwind CSS IntelliSense（VS Code）、Windi CSS IntelliSense，能实时提示可用类、显示对应 CSS、悬停查看定义
- 启用
tailwind.config.js中的content路径扫描，确保自定义 class 和动态拼接（如class={`${show ? 'block' : 'hidden'}`）也能被识别 - 用
@apply封装高频组合（如@apply flex items-center justify-between p-4 bg-gray-50 rounded-lg;），只在需要复用或语义化时才提取，不滥用 - 避免手写
class="mt-2 ml-4 text-sm font-medium text-gray-700"这种长串——先写结构，再用插件补全，比凭空回忆快得多
哪些原子类真该优先熟悉，哪些可以完全不记
掌握 20% 的高频类，能覆盖 80% 的日常布局和排版需求。其余类遇到再查，效率更高。
- 必须条件反射的：
flex/grid/hidden/block/inline/text-系列（text-sm,text-lg,text-gray-600）/bg-（bg-white,bg-blue-500）/px-/py-（px-4,py-2） - 可随时查文档的：border-radius 变体（
rounded-tl-md）、阴影深度（shadow-lg）、过渡动画（transition-all）、伪类（hover:bg-blue-600）——它们有固定模式，不用记全，知道存在即可 - 几乎不用记的：颜色变体全集（
bg-red-100到bg-red-900）、所有断点组合（sm:mt-1 md:mt-2 lg:mt-3）——靠插件补全或复制已有用例更可靠
动态 class 拼接容易出错，怎么写才安全
用模板字符串或条件表达式拼原子类时，空格和重复 class 是常见 bug 来源。
立即学习“前端免费学习笔记（深入）”；
- 别手写空格连接：
class="mt-2 ${active ? 'text-blue-600' : 'text-gray-400'}"—— 容易漏空格或加多空格 - 改用数组 +
join(' ')：class={classes(['mt-2', active && 'text-blue-600', !active && 'text-gray-400']).join(' ')}（配合clsx或twMerge更稳妥） - 注意
twMerge能自动合并冲突 class（如text-red-500 text-blue-500→ 保留后者），而原生拼接会全部生效导致样式异常 - 服务端渲染（SSR）或静态生成（SSG）项目中，确保动态 class 在构建期可被扫描到，否则可能被 PurgeCSS 误删
