---
# System prepended metadata

title: 有關 css 變數與 tailwind.config.js 的配合

---

# 有關 css 變數與 tailwind.config.js 的配合

前提: 你的專案(vite 建構)且有安裝 tailwindCSS 套件

tailwind.config.js 檔案中的`theme.extend.colors`是擴充設定，裡面使用到了 CSS 變數【--color-primary】
CSS 變數是從`./src/style.css` 內抓取的。

```js!
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html", // 這是 Vite 預設的入口文件
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 在 src 目錄下的所有 Vue、JS、TS、JSX、TSX 文件都會被包含
  ],
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        accent: "var(--color-accent)",
      }
    },
  },
  plugins: [
    require('daisyui'),
  ],
}
```

./src/style.css

```css!
/*./src/style.css  */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* :root 代表 <html> */
:root {
  --color-primary: #82a2c2;
  --color-accent: #edf0f5;
}

```

這個擴充設定，可以讓你這樣使用，在 HTML 或 Vue 檔裡寫：

```html
<div class="bg-primary text-white">...</div>
```

Tailwind 會輸出：

```css
.bg-primary {
  background-color: var(--color-primary);
}
```

然後 CSS 解譯 `var(--color-primary)` 成 `#82a2c2`。

---

- 解釋: extend 的意思，是 Tailwind 讓你加東西進去而不是整個取代掉原本的設定。

```js
theme: {
  extend: {
    colors: { ... }
  }
}

```

假如你寫成這樣(下方)

```js
theme: {
  colors: { ... }
}
```

會直接把 Tailwind 所有原生顏色(例如 blue-500、gray-700)全部覆蓋掉， 通常不建議這樣做。
