管理 Tailwind 当中的变量可以这样做

最近在开发新架构过得很充实，我们列出了一些最佳实践并尝试实践在项目当中，其中一项是「每个 UI 组件不应该有魔法数值」，举例：某卡片有大小版本，大的最大宽 600px，小的最大宽 300px。

如果没想太多用 Tailwind 写可能就会像是这样：lg:max-w-[600px] max-w-[300px]。但整个产品都充斥这种魔法数字会让人有够头痛！！！特别是在：

1. 设计端没有良好设计系统（想怎么设计就怎么设计）
2. 开发端被严格审视 Pixel Perfect（把 RWD 看得跟 AWD 一样）

会产出精美的大便 💩。

UI 设计师也应当留意设计下的每个数值应该背后都要有依据，如果产品不是一次性开发，那么建立设计系统是必须的。与前端合作，其实很多 UI 前期工作做得好，前端也能受益（组件怎么切、怎么管理、开放那些接口、怎么命名……）。

回归主题，请替每个数值定义好名称，真的不行就定义组件内的变量，而不是写死数值。

• 绝对要避免的 5 项 Tailwind 反模式🔗