# 有關 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)全部覆蓋掉， 通常不建議這樣做。