如何在Tailwindcss中使用CSS變數

如何在TailwindCSS中使用自訂CSS變數

稍微認識TailwindCSS以後，可以知道TailwindCSS本身提供非常多種預設的顏色可以使用，自己在小專案上使用起來相當方便。

但！總有那個時候，就是需要使用客製顏色的時候！這篇文章會介紹如何設定自己的客製顏色，也能有TailwindCSS的透明度設定。

使用自訂顏色

設定的方法非常簡單，只需幾個步驟就能在TailwindCSS中使用自定義的顏色。選定一個顏色後就可以開始設定。

在這裡，我們選擇使用這個橘色作為示範的顏色。

#ff9671

在 CSS 檔案中設定顏色

首先，將顏色轉換為 RGB 格式。將 #ff9671 轉換為 rgb(255, 150, 113)。

然後，打開 Tailwind CSS 的指令檔案，新增一個 layer，並在其中定義自訂的顏色變數，比如我們這裡將其命名為 primary。

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

@layer base {
  :root {
    --primary: 255 150 113;
    /* ... */
  }
}

RGB 格式中只需提供三個數字，並用空格分隔。

將顏色添加到 Tailwind CSS 設定中

打開 tailwind.config.js 文件，將自訂顏色添加到專案中。

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--primary) / <alpha-value>)'
      }
    },
  },
  plugins: [],
}

在這裡，可以把 primary 更改為其他的顏色名稱，在專案中出現的名字。

在專案中使用自訂顏色

使用的方式很簡單，就和一般的顏色使用一樣，前面我把這個顏色命名為primary，就直接在背景顏色選擇primary。

出現提示，可以使用這個顏色

這種方式的最大優點在於可以與TailwindCSS本身的工具結合使用，例如主色搭配透明度的呈現方式。

<main class=" min-h-svh text-center">
  <p class=" text-primary">text-primary</p>
  <p class=" text-primary/50">text-primary/50</p>
  <p class=" text-primary/90">text-primary/90</p>
</main>

直接的呈現如下。

文字主色搭配不同透明度呈現

結尾

到這邊就大功告成，實際的應用會是把專案會使用到的所有色票都寫進去並且命名，這樣就能夠在專案中使用統一色系。