前言

最近想學如何用 tailwinds 變更主題顏色，剛好看到了 Theming Tailwind with CSS Variables
Tailwind Labs 自己出的教學影片，這部影片是透過 tailwind 搭配 css variable
還沒設定好 tailwinds 可以看 Tailwind 官方的教學 Get started with Tailwind CSS

設定 CSS 顏色變數

在你的 input css 檔設定你想要的 theme 的顏色
以影片示範的來說明

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-text-base: 255, 255, 255;
    --color-text-muted: 199, 210, 254;
    --color-text-inverted: 79, 70, 229;
    --color-fill: 67, 56, 202;
    --color-button-accent: 255, 255, 255;
    --color-button-accent-hover: 238, 242, 255;
    --color-button-muted: 99, 102, 241;
  }
  .theme-swiss {
    --color-text-base: 255, 255, 255;
    --color-text-muted: 254, 202, 202;
    --color-text-inverted: 220, 38, 38;
    --color-fill: 185, 28, 28;
    --color-button-accent: 255, 255, 255;
    --color-button-accent-hover: 254, 242, 242;
    --color-button-muted: 239, 68, 68;
  }
  .theme-neon {
    --color-text-base: 17, 24, 2;
    --color-text-muted: 47, 67, 6;
    --color-text-inverted: 235, 250, 204;
    --color-fill: 179, 255, 23;
    --color-button-accent: 36, 52, 3;
    --color-button-accent-hover: 55, 79, 5;
    --color-button-muted: 212, 255, 122;
  }
}、

大致說明一下：

• css 宣告變數是在最前面加上--(兩個連接線) --color-text-base 表示宣告了 color-text-base 變數，這樣就可以拿來使用了
• 在 :root 下面的變數的顏色，是預設的顏色、.theme-swiss 、.theme-neon 則是自訂的 theme (主題)，變數名稱都一樣，只需改變不同主題對應的顏色

設定 config 檔

在 tailwind 可以客製 class 的 config 檔案面設定 class name，並把 css 變數對應到 class
以影片的範例說明

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`
    }
    return `rgb(var(${variableName}))`
  }
}

module.exports = {
  theme: {
    extend: {
      textColor: {
        skin: {
          base: withOpacity('--color-text-base'),
          muted: withOpacity('--color-text-muted'),
          inverted: withOpacity('--color-text-inverted'),
        },
      },
      backgroundColor: {
        skin: {
          fill: withOpacity('--color-fill'),
          'button-accent': withOpacity('--color-button-accent'),
          'button-accent-hover': withOpacity('--color-button-accent-hover'),
          'button-muted': withOpacity('--color-button-muted'),
        },
      },
      gradientColorStops: {
        skin: {
          hue: withOpacity('--color-fill'),
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• textColor -字體顏色，只有字體適用、backgroundColor-背景顏色，只有背景試用，或是你也可以用 colors 就會全部都適用
• 以 textColor 舉例，下面是 skin，在下面是 base，你的 class name 就會是 text-skin-base ，一開始不太懂為甚麼要多個 skin，後來才意識到 text-base 是 tailwind 裡面原本就有的 class，所以客製的時候可能也需要注意一下
• 把 css variable 用 var() 包住，指定到對應的 class name，ex. text-skin-base 對應的 variable 是var(--color-text-base) ，這樣使用這個 class text-skin-base 時，字體顏色就會是對應到變數 var(--color-text-base) 所宣告的顏色

設定 Theme

在想要的區塊加上剛剛在 css 檔有先寫好的 theme 的 class name，整個區塊裡面使用的 class 就會套用那個 theme 裡面宣告的變數的顏色
以影片的範例說明

<div class="sm:m-6 space-y-6">
  <!-- theme-swiss -->
  <div class="theme-swiss relative bg-skin-fill max-w-4xl mx-auto overflow-hidden sm:rounded-2xl">
    ...
  </div>

  <!-- 無 theme -->
  <div class="relative bg-skin-fill max-w-4xl mx-auto overflow-hidden sm:rounded-2xl">
    ...
  </div>
  

• 有 class="theme-swiss" 的區塊，這裡使用了 bg-skin-fill ，他對應的--color-fill 的 rgb 就會是185, 28, 28
• 無 theme 的那個區塊，裡面的顏色就會對應到 :root 下面宣告 --color-fill 的顏色，rgb 就是67, 56, 202

小小紀錄

自己在的時候有設計可以點選按鈕換後更換不同主題，但不知道為甚麼要先直接寫了 class name 後 complie，點了按鈕才有作用，如果沒有先寫過一次 class name 直接點按鈕的話，其他 theme 的顏色並不會 compile，後來是把 @layer 移掉後才沒有這樣的問題

小小心得

整體來說很好用，只要換個 theme class，對應的顏色就會跟著變，config 客製 class name 搭配 css variable，寫起來很清楚也很好擴張，雖然也可以用 colors 套用所有屬性的顏色，但影片是把 background、text、gradient 不同屬性分開寫，或許這樣也比較清楚，也不用擔心改了甚麼會不會影響到其他屬性的顏色，比較要注意的是命名不要跟原本 tailwind class name 重複。

參考資料

Theming Tailwind with CSS Variables (Youtube 影片)
影片的 Source code
Tailwindcss 官方