feat(module): reuse existing primary and gray colors

src/runtime/plugins/colors.ts

@@ -1,21 +1,29 @@
 import { computed } from 'vue'
 import { get, hexToRgb } from '../utils'
-import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
+import { defineNuxtPlugin, useAppConfig, useHead, useNuxtApp, useRuntimeConfig } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
 export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig()
   const appConfig = useAppConfig()
   const nuxtApp = useNuxtApp()
 
   const root = computed(() => {
-    const primary: Record<string, string> | undefined = get(colors, appConfig.ui.primary)
-    const gray: Record<string, string> | undefined = get(colors, appConfig.ui.gray)
+    const theme = runtimeConfig.public.nuxtUi.theme
+    const ui = appConfig.ui
+
+    const primary: Record<string, string> | undefined = theme.primary && ui.primary === 'primary'
+      ? theme.primary
+      : get(colors, ui.primary)
+    const gray: Record<string, string> | undefined = theme.gray && ui.gray === 'gray'
+      ? theme.gray
+      : get(colors, ui.gray)
 
     if (!primary) {
-      console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)
+      console.warn(`[@nuxt/ui] Primary color '${ui.primary}' not found in Tailwind config`)
     }
     if (!gray) {
-      console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`)
+      console.warn(`[@nuxt/ui] Gray color '${ui.gray}' not found in Tailwind config`)
     }
 
     return `:root {

src/runtime/utils/colors.ts

@@ -251,8 +251,7 @@ export const setGlobalColors = (theme: TWConfig['theme']) => {
 
   if (globalColors.gray) {
     // @ts-ignore
-    globalColors.cool = theme.extend.colors.cool =
-      defaultColors.gray
+    globalColors.cool = theme.extend.colors.cool = defaultColors.gray
   }
 
   // @ts-ignore

src/runtime/utils/index.ts

@@ -82,5 +82,9 @@ export function looseToNumber (val: any): any {
   return isNaN(n) ? val : n
 }
 
+export function clone (value: any) {
+  return JSON.parse(JSON.stringify(value))
+}
+
 export * from './lodash'
 export * from './link'

src/tailwind.ts

@@ -3,6 +3,7 @@ import { defu } from 'defu'
 import { addTemplate, createResolver, installModule, useNuxt } from '@nuxt/kit'
 
 import { setGlobalColors } from './runtime/utils/colors'
+import { clone } from './runtime/utils'
 import type { ModuleOptions } from './module'
 
 export default async function installTailwind (
@@ -17,9 +18,18 @@ export default async function installTailwind (
   nuxt.hook('tailwindcss:config', function (tailwindConfig) {
     tailwindConfig.theme = tailwindConfig.theme || {}
     tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
-    tailwindConfig.theme.extend.colors =
-      tailwindConfig.theme.extend.colors || {}
+    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
 
+    // cache theme colors
+    const { primary, gray } = clone({
+      ...tailwindConfig.theme.colors,
+      ...tailwindConfig.theme.extend?.colors
+    })
+    nuxt.options.runtimeConfig.public.nuxtUi = {
+      theme: { primary, gray }
+    }
+
+    // set global colors
     const colors = setGlobalColors(tailwindConfig.theme)
 
     // @ts-ignore