在建立模組後，讓使用者可以自定義顏色是一個很實用的功能 !因為每個專案可能都會需要不同的的主題色。

在這邊我設定讓使用者在環境內設定 tailwind.config.js 來自定義主題色~

step 1: 新增 playground/tailwind.config.js 在這邊設定一組 primary的色系

// playground/tailwind.config.js 
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde58a',
          300: '#fbd24e',
          400: '#fabe25',
          500: '#f49d0c',
          600: '#d87607',
          700: '#bc560a',
          800: '#923f0e',
          900: '#78340f'
        }
      }
    }
  }
}

step 2: 接著到 module.ts 利用 hook抓取 tailwind:config!

// module.ts
_nuxt.hook('tailwindcss:config', async(tailwindConfig) => {
	console.log(tailwindConfig)
})

這個時候印出來是 runtime 底下的 tailwind.config(預設的)，因為在 installModule 時，configPath 設定抓取預設值

await installModule('@nuxtjs/tailwindcss', {
      configPath: resolver.resolve('./runtime', 'tailwind.config'),
    })

step 3: 那麼接下來好辦了! 只需要去抓取使用者環境內的 tailwind.config就可以了

我們可以透過 setup 回傳的 _nuxt 抓取使用者環境的檔案

    _nuxt.hook('tailwindcss:config', async(tailwindConfig) => {
      const pkg = await import(resolver.resolve(_nuxt.options.rootDir, 'tailwind.config.js'))
      console.log(pkg);
    })

透過這樣子抓到就是我們在 playground 設定的 tailwind.config.js 嚕

step 4: 接下來就是...融合!!!

恩...等等…好像不太對…觸發了什麼…

首先讓我們安裝 defu 這個套件!!

npm i defu

defu 用來進行物件的合併和屬性的預設值設置。它的核心功能是將多個物件合併，並在屬性值未定義時應用預設值。

// module.ts
import { defu } from 'defu'

如果有抓取到使用者在 playground 設定的 tailwind.config 就透過 defu 合併 default 設定(使用者的會覆蓋預設的)，如果沒有抓取到就會套用預設值

// module.ts
 _nuxt.hook('tailwindcss:config', async(tailwindConfig) => {
      try {
        const pkg = await import(resolver.resolve(_nuxt.options.rootDir, 'tailwind.config.js'))
        const mergeTailwindConfig = defu(pkg.default, tailwindConfig)
        
        tailwindConfig.theme = mergeTailwindConfig.theme || {}
      } catch (e) {
        console.warn('找不到 tailwind.config,使用預設值')
        tailwindConfig.theme = tailwindConfig.theme || {}
      }
    })

這樣就可以變化主題色啦!