夏卡樵の開發日誌

問題起因

當我們開啟一個tailwind css搭配css variables的專案時，我們預設會使用global.css來管理我們的css variables。

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 41 44% 93%;
    --primary-foreground: 222.2 84% 4.9%;
  }
}

並在tailwind.config.ts中定義這些樣式。

theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        }
      }
    }
}

但當我們這樣做時，會發現原本IDE能很聰明的辨別global.css中的顏色變數，並顯示內建的color picker，但此時這個方便的功能卻失效了。這對一個對專案color scheme還不熟的開發者來說是很不方便的。

而造成這現象的原因是，該寫法中css variable只是一串意義不明的數字，IDE無法得知這串數字代表的是rgb或hsl等等的顏色。

// IDE知道這是代表顏色
--primary: #FF0000;
--primary: rgb(255, 0, 0);
--primary: hsl(41, 44%, 93%);
// IDE不知道這是代表顏色
--primary: 41 44% 93%;

這時如果我們想將tailwind config中的顏色定義搬到global.css中改成這樣：

primary: {
  DEFAULT: 'var(--primary)'
}

將會造成另一個問題，那就是tailwind不知道var(--primary)代表的是什麼，因此tailwind無法替我們生成帶有opacity的class例如 bg-primary/40，此舉造成的代價是很大的，我們將無法自由的使用透明度。

解法1：Color Preview by Extension

至此我們可以知道rgb(), hsl()這種顏色定義(Color Space)必須包含在tailwind.config.ts中，而global.css中也只能定義單純的數值，當前tailwind 3.4版本並沒有其他解法，只能搜尋有沒有IDE的插件能夠辨別這類的顏色並顯示。

如果是使用VS Code或Cursor的話，Color Highlight能達到我們的需求，在IDE的Extensions內搜尋即可。

安裝完成後將該extension提供的Match Hsl With No Function或Match Rgb With No Function打開。

這樣就能看到顏色囉！雖然不像IDE內建的color picker一樣能直接調整顏色，但至少能一眼看出各變數所代表的顏色了。

解法2：css color-mix

第二種解法是透過css的color-mix()。

在global.css中直接寫hsl。

@layer base {
  :root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(222.2, 84%, 4.9%);
    --primary: hsl(41, 44%, 93%);
  }
}

並在tailwind config中使用color-mix。

theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT:
            'color-mix(in hsl, var(--primary) calc(100% * <alpha-value>), transparent)'
        }
      }
    }
}

這樣就能在tailwind支援opacity class的同時使用IDE的color picker了。

只是這方法需多留意color-mix的瀏覽器支援度，以及tailwind config會變得較不易讀，因此我會優先考慮第一種解法，在此分享給各位～