切版的反推魔術數字

切版時看到 w-[XXX]px 任意數字，先問「這數字怎麼來的」。如果是從容器尺寸 + padding + gap 反推出來的計算結果，就該改 flex-1 / % / calc()——反推值在容器尺寸變動時會集體失效，且 code 看不出意圖。

反推鏈案例

外層容器 max-w-[1800px]
  └─ section p-6（padding 24px × 2 = 48px）
       └─ 可用寬 = 1800 - 48 = 1752px
            └─ flex gap-6（gap 24px）
                 └─ 左右各得 = (1752 - 24) ÷ 2 = 864px

864 看似任意，實際是 1800px 螢幕下的一半。改 flex-1：

• 不依賴特定螢幕寬
• 容器改 max-w 子元件不用同步改
• code 直接看出「左右等分」的意圖

反射動作

看到 w-[XXX]px 先分類：

1. 內容寬度（label / 表格欄 / UI 控件）→ 保留
2. 反推結果（容器扣 padding / gap 算出來的）→ 改 flex-1 / % / calc()
3. 設計師指定的視覺尺寸（特殊 breakpoint 視覺邊界）→ 保留並加註解（為什麼是這個值）