Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

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
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments