2022.11.22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

文章索引

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 裡了

歡迎給我點鼓勵，讓我知道你來過：）