管理 Tailwind 當中的變數可以這樣做

最近在開發新架構過得很充實，我們列出了一些最佳實踐並嘗試實踐在專案當中，其中一項是「每個 UI 元件不應該有魔法數值」，舉例：某卡片有大小版本，大的最大寬 600px，小的最大寬 300px。

如果沒想太多用 Tailwind 寫可能就會像是這樣：lg:max-w-[600px] max-w-[300px]。但整個產品都充斥這種魔法數字會讓人有夠頭痛！！！特別是在：

1. 設計端沒有良好設計系統（想怎麼設計就怎麼設計）
2. 開發端被嚴格審視 Pixel Perfect（把 RWD 看得跟 AWD 一樣）

會產出精美的大便 💩。

UI 設計師也應當留意設計下的每個數值應該背後都要有依據，如果產品不是一次性開發，那麼建立設計系統是必須的。與前端合作，其實很多 UI 前期工作做得好，前端也能受益（元件怎麼切、怎麼管理、開放那些接口、怎麼命名……）。

回歸主題，請替每個數值定義好名稱，真的不行就定義元件內的變數，而不是寫死數值。

• 絕對要避免的 5 項 Tailwind 反模式🔗