Tachyons CSS库如何快速构建UI，实现功能性类名体系？

本文共计1270个文字，预计阅读时间需要6分钟。

它不是依靠语义命名（例如：

常见错误是试图“猜”类名，比如写 pt3 却忘了 t 代表 top —— 实际上 pt3 是对的，但有人误写成 padding-t3 或 padt3，这些根本不会生效。

• ma0、mt3、mb4 这类缩写必须严格按官方前缀表来，m=margin，p=padding，t=top，b=bottom，l=left，r=right，x=horizontal，y=vertical
• 数值级数默认是 0–7，对应 0, .25rem, .5rem, .75rem, 1rem, 1.25rem, 1.5rem, 2rem；想改就得重编译 CSS 或用自定义构建
• 响应式写法是加前缀，比如 sm-pa2 表示在 small 断点及以上才生效，不是 pa2-sm —— 顺序错就失效

如何避免 tachyons 在真实项目中变成“类名爆炸”

它本身不约束组合方式，一个元素写七八个类很常见，比如 pa3 bg-white br2 shadow-1 flex items-center justify-between。问题不在多，而在失控：没人知道哪些类该复用、哪些该删、哪些已废弃。