Design System 配色系統導讀:從 Tailwind 到 Material 3,網站配色不用自己發明
整理 7 個主流 design system(Tailwind、Radix、Material 3、Carbon、Ant Design、Primer、Apple HIG)的配色架構:色階怎麼切、neutral 怎麼選、dark mode 三種流派,以及為什麼新專案該用 OKLCH 而不是 HSL。
整理 7 個主流 design system(Tailwind、Radix、Material 3、Carbon、Ant Design、Primer、Apple HIG)的配色架構:色階怎麼切、neutral 怎麼選、dark mode 三種流派,以及為什麼新專案該用 OKLCH 而不是 HSL。
shadcn/ui 不是 npm 套件,它把元件原始碼複製到你的專案,你完全擁有這些程式碼。島島用它建立 packages/ui 元件庫,讓三個 Next.js app 共用同一套 UI。
TailwindCSS 解決的核心問題是 CSS 的全域命名汙染和死碼問題。utility class 讓樣式跟元件放在一起,build 時自動移除沒用到的 class,生產環境的 CSS bundle 通常只有幾十 KB。島島和 NobodyClimb 都用它做 web 端樣式。