鐵人賽到今天終於能來說說 tailwind 和 shadcn 的客製化組合技：

承上篇

成功在專案中安裝 shadcn 之後，在專案的根目錄會生成 components.json，這個檔案是整個 shadcn 組件系統的核心設定檔，用來記錄你是怎麼安裝、管理和客製化這些 UI 元件。

components.json 的個別欄位介紹：

• $schema：指定 JSON schema，讓編輯器有 autocomplete 與驗證功能。
• style：決定元件的預設風格，之前是 default，但現在已經改成 new-york。
• rsc：是否支援 React Server Components（Next.js 14 預設是 true）。
• tsx：是否使用 TypeScript + TSX（如果設 false，會生成 JS 版本）。
• tailwind：tailwind 相關設定：
  • config：tailwind.config.ts 的位置，如果使用 Tailwind v4，因這個版本不用 tailwind.config.ts 做樣式管理，可以是空字串。
  • css：哪個 CSS 檔案負責導入 Tailwind。
  • baseColor：預設基礎色盤（像 slate、zinc）。
  • cssVariables：是否使用 CSS 變數來做 theming（主題樣式控制）。如果是 false 的話則用 utility class（Tailwind 的 class）來做樣式控制。
• aliases：決定不同類型的檔案要放在哪裡：
  • components：專案的元件的放置位置。
  • utils：工具函式的路徑。
  • ui：加入的 shadcn 元件的放置位置（常見是 @/components/ui)。
  • hooks：專案的 hook 資料夾的位置。
  • lib：專案的 lib 資料夾的位置。

之前在 DAY 04 已經介紹 Tailwind v3 透過 tailwind.config.ts 來進行客制化的樣式管理，所以在配置components.json 時，一定要在 config 欄位指定 tailwind.config.ts，但在 Tailwind v4 之後，則預設用 @theme，直接在 CSS 檔裡定義。

回到我們上篇建立的 Next.js 專案，假設我們需要新增一套有深淺模式的色票：

1. 首先需要在 :root 中 .dark 中分別加入色票的變數
   為示範，我在 :root 加入

   :root {
     --brand: #fff000; //黃色
     ...
   }
   

   在 .dark加入

   .dark {
     --brand: #545011; //灰黃色
     ...
   }
   

2. 再來就是在 @theme inline 中把在 :root 與 .dark 定義好的變數（即 --brand）映射到 Tailwind 的色票名稱（像是 --color-brand），這樣就能透過 bg-brand、text-brand 等 utility class 直接使用，並且會隨著主題自動切換。

   @theme inline {
     --color-brand: var(--brand);
     ...
   }
   

3. 最後假設我想定義所有 shadcn 的預設按鈕顏色都是 brand 的話，直接進入 components/ui/button.tsx進行修改 (即反白處)：
   

4. 這樣能在淺色模式與深色模式中自動切換啦