MUKI AI Summary
TailwindCSS 和 Element Plus 各有獨立的顏色主題，若要結合兩者的 CSS 變數，可利用 TailwindCSS 的擴充設定。首先，在 tailwind.config.js 中，透過迴圈將 Element Plus 的變數加入 TailwindCSS。這樣一來，便可在 HTML 中使用 TailwindCSS 的 class，直接應用 Element Plus 的 CSS 變數。
例如，使用 var(--el-color-primary-light-5) 作為文字顏色，可寫成 text-el-primary-light-5。若需使用更多 Element Plus 的 CSS 變數，可在 tailwind.config.js 中新增相應函式，將所有變數整合至 TailwindCSS。這樣便能在開發過程中方便地使用這些樣式。...
TailwindCSS 有自己的顏色主題，Element Plus 也有自己的顏色主題，如果今天是分開使用這兩個工具，那沒啥大問題。
但假設今天，我想要用 TailwindCSS 幫我快速撰寫 CSS，同時公司的設計使用的又是 Element Plus 的主題樣式，那該怎麼快速的整合在一起，方便我開發呢？
我們可以使用 TailwindCSS 的擴充設定，幫我們把 Element Plus 的變數全部加到 TailwindCSS 裡。
擴充 TailwindCSS 的 colors 設定
先用開發者工具看一下 Element Plus 用到的 CSS 變數，我目前用的是 dark 主題，所以會多一個 dark 的變數，如果你用的不是 dark 主題，可以自行修改迴圈的函式，移除產生 dark CSS 變數的語法。
需求是：希望可以把 Element Plus 的變數整合至 TailwindCSS 裡
▼ 打開 tailwind.config.js，跑個迴圈把變數設好：
const palettes = {
base: ['primary', 'success', 'warning', 'danger', 'error', 'info']
}
const baseColor = (group) => {
const colors = {}
group.forEach(name => {
colors[`el-${name}`] = `var(--el-color-${name})`
colors[`el-${name}-light-3`] = `var(--el-color-${name}-light-3)`
colors[`el-${name}-light-5`] = `var(--el-color-${name}-light-5)`
colors[`el-${name}-light-7`] = `var(--el-color-${name}-light-7)`
colors[`el-${name}-light-8`] = `var(--el-color-${name}-light-8)`
colors[`el-${name}-light-9`] = `var(--el-color-${name}-light-9)`
colors[`el-${name}-dark-2`] = `var(--el-color-${name}-dark-2)`
})
return colors
}
const getColors = (palettes) => {
const colors = {}
for (const key in palettes) {
const group = palettes[key]
if (key === 'base') {
Object.assign(colors, baseColor(group))
}
}
console.log('colors', colors)
return colors
}▼ 接著同個檔案，在 TailwindCSS 的 extend 呼叫該函式：
module.exports = {
theme: {
extend: {
colors: getColors(palettes) // 這一行
}
}
}▼ 可以透過編譯時輸出的 console.log 查看資料
使用 Element Plus 的 CSS 變數
接著就像平常使用 TailwindCSS 一樣，在 HTML 裡面使用這個 class。
▼ 舉例來說，假設我想用 Element Plus 的變數 var(--el-color-primary-light-5) 當作文字顏色，在 HTML 可以這樣寫
<div class="text-el-primary-light-5">文字顏色</div>
前面的 text- 一樣是 TailwindCSS 的寫法，而後段的 el-primary-light-5，就會對應 Element Plus 的變數 var(--el-color-primary-light-5)，顯示對應的顏色
如果你的編輯器 (以 VS Code 為例) 有安裝 Tailwind CSS IntelliSense 擴充套件，在輸入 class 時，應該會跳出對應的 CSS 語法，可以透過這方法查詢有哪些可用的 class
▼ 如果想要用 var(--el-color-primary-light-3) 當作背景顏色，可以這樣寫：
<div class="bg-el-primary-light-3">背景顏色</div>
剩下那些無法用迴圈跑的 Element Plus CSS 變數
除了 Element Plus 的基本六種顏色樣式外，還有一些灰階的元件設定，因為我暫時找不到共通邏輯，沒辦法用迴圈去產資料，所以只好一個一個補上 😂
如果有需要的朋友，可以直接複製我的程式碼拿去用，假設有方便更簡潔的產出方法，也歡迎告訴我唷！
▼ 這些 CSS 變數，我也想丟到 TailwindCSS 處理
▼ 更新 tailwind.config.js
// 1. 新增 componentColor function
const componentColor = () => {
const colors = {}
colors['--el-box-shadow'] = 'var(--el-box-shadow)'
colors['--el-box-shadow-light'] = 'var(--el-box-shadow-light)'
colors['--el-box-shadow-lighter'] = 'var(--el-box-shadow-lighter)'
colors['--el-box-shadow-dark'] = 'var(--el-box-shadow-dark)'
colors['--el-bg-color-page'] = 'var(--el-bg-color-page)'
colors['--el-bg-color'] = 'var(--el-bg-color)'
colors['--el-bg-color-overlay'] = 'var(--el-bg-color-overlay)'
colors['--el-text-color-primary'] = 'var(--el-text-color-primary)'
colors['--el-text-color-regular'] = 'var(--el-text-color-regular)'
colors['--el-text-color-secondary'] = 'var(--el-text-color-secondary)'
colors['--el-text-color-placeholder'] = 'var(--el-text-color-placeholder)'
colors['--el-text-color-disabled'] = 'var(--el-text-color-disabled)'
colors['--el-border-color-darker'] = 'var(--el-border-color-darker)'
colors['--el-border-color-dark'] = 'var(--el-border-color-dark)'
colors['--el-border-color'] = 'var(--el-border-color)'
colors['--el-border-color-light'] = 'var(--el-border-color-light)'
colors['--el-border-color-lighter'] = 'var(--el-border-color-lighter)'
colors['--el-border-color-extra-light'] = 'var(--el-border-color-extra-light)'
colors['--el-fill-color-darker'] = 'var(--el-fill-color-darker)'
colors['--el-fill-color-dark'] = 'var(--el-fill-color-dark)'
colors['--el-fill-color'] = 'var(--el-fill-color)'
colors['--el-fill-color-light'] = 'var(--el-fill-color-light)'
colors['--el-fill-color-lighter'] = 'var(--el-fill-color-lighter)'
colors['--el-fill-color-extra-light'] = 'var(--el-fill-color-extra-light)'
colors['--el-fill-color-blank'] = 'var(--el-fill-color-blank)'
colors['--el-mask-color'] = 'var(--el-mask-color)'
colors['--el-mask-color-extra-light'] = 'var(--el-mask-color-extra-light)'
return colors
}
const getColors = (palettes) => {
const colors = {}
for (const key in palettes) {
const group = palettes[key]
if (key === 'base') {
Object.assign(colors, baseColor(group))
}
}
Object.assign(colors, componentColor()) // 2. 在 getColors() 增加這行
console.log('colors', colors)
return colors
}以上，就把 Element Plus 的所有 CSS 變數放到 TailwindCSS 裡了
11