fix(module): revert tailwind config from #1272 (#1404)

docs/nuxt.config.ts

@@ -1,7 +1,7 @@
 import { createResolver } from '@nuxt/kit'
 import colors from 'tailwindcss/colors'
 import module from '../src/module'
-import { excludeColors } from '../src/runtime/utils/colors'
+import { excludeColors } from '../src/colors'
 import pkg from '../package.json'
 
 const { resolve } = createResolver(import.meta.url)

src/colors.ts

@@ -1,4 +1,4 @@
-import { omit } from './lodash'
+import { omit } from './runtime/utils/lodash'
 import { kebabCase, camelCase, upperFirst } from 'scule'
 
 const colorsToExclude = [

src/module.ts

@@ -1,10 +1,22 @@
+import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
-import type { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons'
+import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
+import { iconsPlugin, getIconCollections, type CollectionNames, type IconsPluginOptions } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
+import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
 import * as config from './runtime/ui.config'
 import type { DeepPartial, Strategy } from './runtime/types/utils'
-import installTailwind from './tailwind'
+
+const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+const _require = createRequire(import.meta.url)
+const defaultColors = _require('tailwindcss/colors.js')
+
+delete defaultColors.lightBlue
+delete defaultColors.warmGray
+delete defaultColors.trueGray
+delete defaultColors.coolGray
+delete defaultColors.blueGray
 
 type UI = {
   primary?: string
@@ -76,13 +88,107 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
     }
 
+    // @ts-ignore
+    nuxt.hook('tailwindcss:config', function (tailwindConfig) {
+      tailwindConfig.theme = tailwindConfig.theme || {}
+      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
+      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
+
+      const globalColors: any = {
+        ...(tailwindConfig.theme.colors || defaultColors),
+        ...tailwindConfig.theme.extend?.colors
+      }
+
+      // @ts-ignore
+      globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
+        50: 'rgb(var(--color-primary-50) / <alpha-value>)',
+        100: 'rgb(var(--color-primary-100) / <alpha-value>)',
+        200: 'rgb(var(--color-primary-200) / <alpha-value>)',
+        300: 'rgb(var(--color-primary-300) / <alpha-value>)',
+        400: 'rgb(var(--color-primary-400) / <alpha-value>)',
+        500: 'rgb(var(--color-primary-500) / <alpha-value>)',
+        600: 'rgb(var(--color-primary-600) / <alpha-value>)',
+        700: 'rgb(var(--color-primary-700) / <alpha-value>)',
+        800: 'rgb(var(--color-primary-800) / <alpha-value>)',
+        900: 'rgb(var(--color-primary-900) / <alpha-value>)',
+        950: 'rgb(var(--color-primary-950) / <alpha-value>)',
+        DEFAULT: 'rgb(var(--color-primary-DEFAULT) / <alpha-value>)'
+      }
+
+      if (globalColors.gray) {
+        // @ts-ignore
+        globalColors.cool = tailwindConfig.theme.extend.colors.cool = defaultColors.gray
+      }
+
+      // @ts-ignore
+      globalColors.gray = tailwindConfig.theme.extend.colors.gray = {
+        50: 'rgb(var(--color-gray-50) / <alpha-value>)',
+        100: 'rgb(var(--color-gray-100) / <alpha-value>)',
+        200: 'rgb(var(--color-gray-200) / <alpha-value>)',
+        300: 'rgb(var(--color-gray-300) / <alpha-value>)',
+        400: 'rgb(var(--color-gray-400) / <alpha-value>)',
+        500: 'rgb(var(--color-gray-500) / <alpha-value>)',
+        600: 'rgb(var(--color-gray-600) / <alpha-value>)',
+        700: 'rgb(var(--color-gray-700) / <alpha-value>)',
+        800: 'rgb(var(--color-gray-800) / <alpha-value>)',
+        900: 'rgb(var(--color-gray-900) / <alpha-value>)',
+        950: 'rgb(var(--color-gray-950) / <alpha-value>)'
+      }
+
+      const colors = excludeColors(globalColors)
+
+      // @ts-ignore
+      nuxt.options.appConfig.ui = {
+        primary: 'green',
+        gray: 'cool',
+        colors,
+        strategy: 'merge'
+      }
+
+      tailwindConfig.safelist = tailwindConfig.safelist || []
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors))
+    })
+
     createTemplates(nuxt)
 
     // Modules
 
     await installModule('nuxt-icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
-    await installTailwind(options, nuxt, { resolve, runtimeDir })
+    await installModule('@nuxtjs/tailwindcss', {
+      exposeConfig: true,
+      config: {
+        darkMode: 'class',
+        plugins: [
+          require('@tailwindcss/forms')({ strategy: 'class' }),
+          require('@tailwindcss/aspect-ratio'),
+          require('@tailwindcss/typography'),
+          require('@tailwindcss/container-queries'),
+          require('@headlessui/tailwindcss'),
+          iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {})
+        ],
+        content: {
+          files: [
+            resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'),
+            resolve(runtimeDir, 'ui.config/**/*.{mjs,js,ts}')
+          ],
+          transform: {
+            vue: (content) => {
+              return content.replaceAll(/(?:\r\n|\r|\n)/g, ' ')
+            }
+          },
+          extract: {
+            vue: (content) => {
+              return [
+                ...defaultExtractor(content),
+                // @ts-ignore
+                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
+              ]
+            }
+          }
+        }
+      }
+    })
 
     // Plugins
 

src/tailwind.ts

@@ -1,135 +0,0 @@
-import { createRequire } from 'node:module'
-import { join } from 'pathe'
-import { addTemplate, installModule, useNuxt } from '@nuxt/kit'
-import { excludeColors, generateSafelist } from './runtime/utils/colors'
-import type { ModuleOptions } from './module'
-
-const _require = createRequire(import.meta.url)
-const defaultColors = _require('tailwindcss/colors.js')
-
-delete defaultColors.lightBlue
-delete defaultColors.warmGray
-delete defaultColors.trueGray
-delete defaultColors.coolGray
-delete defaultColors.blueGray
-
-export default async function installTailwind (moduleOptions: ModuleOptions, nuxt = useNuxt(), { resolve, runtimeDir }) {
-  // 1. register hook
-  // @ts-ignore
-  nuxt.hook('tailwindcss:config', function (tailwindConfig) {
-    tailwindConfig.theme = tailwindConfig.theme || {}
-    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
-    tailwindConfig.theme.extend.colors =
-      tailwindConfig.theme.extend.colors || {}
-
-    const globalColors: any = {
-      ...(tailwindConfig.theme.colors || defaultColors),
-      ...tailwindConfig.theme.extend?.colors
-    }
-
-    // @ts-ignore
-    globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
-      50: 'rgb(var(--color-primary-50) / <alpha-value>)',
-      100: 'rgb(var(--color-primary-100) / <alpha-value>)',
-      200: 'rgb(var(--color-primary-200) / <alpha-value>)',
-      300: 'rgb(var(--color-primary-300) / <alpha-value>)',
-      400: 'rgb(var(--color-primary-400) / <alpha-value>)',
-      500: 'rgb(var(--color-primary-500) / <alpha-value>)',
-      600: 'rgb(var(--color-primary-600) / <alpha-value>)',
-      700: 'rgb(var(--color-primary-700) / <alpha-value>)',
-      800: 'rgb(var(--color-primary-800) / <alpha-value>)',
-      900: 'rgb(var(--color-primary-900) / <alpha-value>)',
-      950: 'rgb(var(--color-primary-950) / <alpha-value>)',
-      DEFAULT: 'rgb(var(--color-primary-DEFAULT) / <alpha-value>)'
-    }
-
-    if (globalColors.gray) {
-      // @ts-ignore
-      globalColors.cool = tailwindConfig.theme.extend.colors.cool =
-        defaultColors.gray
-    }
-
-    // @ts-ignore
-    globalColors.gray = tailwindConfig.theme.extend.colors.gray = {
-      50: 'rgb(var(--color-gray-50) / <alpha-value>)',
-      100: 'rgb(var(--color-gray-100) / <alpha-value>)',
-      200: 'rgb(var(--color-gray-200) / <alpha-value>)',
-      300: 'rgb(var(--color-gray-300) / <alpha-value>)',
-      400: 'rgb(var(--color-gray-400) / <alpha-value>)',
-      500: 'rgb(var(--color-gray-500) / <alpha-value>)',
-      600: 'rgb(var(--color-gray-600) / <alpha-value>)',
-      700: 'rgb(var(--color-gray-700) / <alpha-value>)',
-      800: 'rgb(var(--color-gray-800) / <alpha-value>)',
-      900: 'rgb(var(--color-gray-900) / <alpha-value>)',
-      950: 'rgb(var(--color-gray-950) / <alpha-value>)'
-    }
-
-    const colors = excludeColors(globalColors)
-
-    // @ts-ignore
-    nuxt.options.appConfig.ui = {
-      primary: 'green',
-      gray: 'cool',
-      colors,
-      strategy: 'merge'
-    }
-
-    tailwindConfig.safelist = tailwindConfig.safelist || []
-    tailwindConfig.safelist.push(
-      ...generateSafelist(moduleOptions.safelistColors || [], colors)
-    )
-  })
-
-  // 2. add config template
-  const configTemplate = addTemplate({
-    filename: 'nuxtui-tailwind.config.cjs',
-    write: true,
-    getContents: () => `
-      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
-      const { customSafelistExtractor } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))})
-      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
-
-      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
-
-      module.exports = {
-        darkMode: 'class',
-        plugins: [
-          require('@tailwindcss/forms')({ strategy: 'class' }),
-          require('@tailwindcss/aspect-ratio'),
-          require('@tailwindcss/typography'),
-          require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss'),
-          iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === 'all' ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === 'object' ? JSON.stringify(moduleOptions.icons) : '{}'})
-        ],
-        content: {
-          files: [
-            ${JSON.stringify(resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'))},
-            ${JSON.stringify(resolve(runtimeDir, 'ui.config/**/*.{mjs,js,ts}'))}
-          ],
-          transform: {
-            vue: (content) => {
-              return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ')
-            }
-          },
-          extract: {
-            vue: (content) => {
-              return [
-                ...defaultExtractor(content),
-                ...customSafelistExtractor(${JSON.stringify(moduleOptions.prefix)}, content, ${JSON.stringify(nuxt.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)})
-              ]
-            }
-          }
-        }
-      }
-    `
-  })
-
-  // 3. install module
-  await installModule('@nuxtjs/tailwindcss', {
-    exposeConfig: true,
-    configPath: [
-      configTemplate.dst,
-      join(nuxt.options.rootDir, 'tailwind.config')
-    ]
-  })
-}