這次我將分享在專案中學習如何將設計稿的主色與輔色，轉換為色票並應用在程式碼中的方法。此專案使用了 Tailwind CSS 與 DaisyUI，並且是透過 create-next-app 指令建立的 Next.js 專案。以下是如何在 Tailwind 的配置檔案中設定網站的配色主題。

由於 Next.js 預設已經整合了 Tailwind，只需編輯 tailwind.config.ts 檔案，即可套用專案的網站配色。

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      spacing: {
        "128": "25px",
      },
      colors: {
        primary: {
          100: "#BAE5FF",
          200: "#70C0EF",
          300: "#1E4E6C",
        },
        accent: {
          orange: "#ED9C5A",
          green: "#24948E",
        },
        background: "#EEF0F3",
        white: {
          DEFAULT: "#FAFAFA",
          dark: "#131313",
        },
        gray: {
          100: "#EDEDED",
          200: "#D1D1D1",
          300: "#B6B6B6",
          400: "#919191",
          500: "#626262",
          600: "#3A3A3A",
        },
      },
    },
  },
  plugins: [require("daisyui")],

  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#70C0EF", // 修改此處為你想要的 btn-primary 顏色
          "primary-focus": "#1E4E6C", // 這是當按鈕被點擊或聚焦時的顏色
          "primary-content": "#FFFFFF", // 按鈕內容顏色  
      
        },
      },
    ],
  },
};
export default config;

• theme：在這裡，我們可以定義或擴展 Tailwind CSS 的預設主題。
• container：設置容器為置中對齊。
• extend：用於擴展 Tailwind 的預設配置，例如新增自定義的背景圖、間距、顏色等。
• colors：在這裡，我們自定義了主色 (primary)、輔色 (accent)、背景 (background)、白色 (white) 和灰色 (gray) 等顏色方案。
• plugins：引入了 DaisyUI 作為 Tailwind 的插件來增強 UI 元件。
• daisyui：這一部分配置了 DaisyUI 的主題。
• mytheme：這是自定義的主題配置，其中包括主色調 (primary)、按鈕被點擊時的焦點色 (primary-focus) 和按鈕內容的顏色 (primary-content)。

參考資源
daisyui
tailwindcss