fix: support layers in correct order and watch config to warn restart

Author: atinux

package.json

@@ -30,6 +30,7 @@
     "@nuxt/postcss8": "^1.1.3",
     "autoprefixer": "^10.4.13",
     "chalk": "^5.2.0",
+    "chokidar": "^3.5.3",
     "clear-module": "^4.1.2",
     "consola": "^2.15.3",
     "defu": "^6.1.2",

playground/nuxt.config.ts

@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  // extends: ['./theme'],
+  extends: ['./theme'],
   modules: [
     '@nuxt/content',
     '../src/module'

playground/pages/index.vue

@@ -8,6 +8,9 @@
         <span class="pr-1 font-medium">This is a HMR test, try changing the color:</span>
         <span class="text-blue-500">meow!</span>
       </div>
+      <p class="text-brand">
+        This color comes from the `./theme` layer
+      </p>
       <div>
         <NuxtLink to="/content" class="underline hover:text-indigo-500">
           Visit the /content page to check out the @nuxt/content integration!

playground/tailwind.config.ts

@@ -1,8 +1,12 @@
 import typography from '@tailwindcss/typography'
+import colors from 'tailwindcss/colors'
 
 export default {
   theme: {
     extend: {
+      colors: {
+        brand: colors.teal['500']
+      },
       fontFamily: {
         sans: 'Inter, ui-sans-serif, system-ui, -apple-system, Arial, Roboto, sans-serif'
       }

playground/theme/nuxt.config.ts

@@ -1,15 +1,5 @@
-import { fileURLToPath } from 'url'
-import { defineNuxtConfig } from 'nuxt'
-import { resolve } from 'pathe'
 import tailwindModule from '../../src/module'
 
-const themeDir = fileURLToPath(new URL('./', import.meta.url))
-const resolveThemeDir = (path: string) => resolve(themeDir, path)
-
 export default defineNuxtConfig({
-  modules: [tailwindModule],
-
-  tailwindcss: {
-    configPath: resolveThemeDir('./tailwind.config.js')
-  }
+  modules: [tailwindModule]
 })

playground/theme/tailwind.config.ts

@@ -1,8 +1,10 @@
+import colors from 'tailwindcss/colors'
+
 export default {
   theme: {
     extend: {
       colors: {
-        brand: '#0070f3'
+        brand: colors.fuchsia['500']
       }
     }
   }

src/module.ts

@@ -1,6 +1,7 @@
 import { existsSync } from 'fs'
 import { join, relative } from 'pathe'
-import defu, { defuArrayFn } from 'defu'
+import { defuArrayFn } from 'defu'
+import { watch } from 'chokidar'
 import chalk from 'chalk'
 import consola from 'consola'
 import {
@@ -100,7 +101,10 @@ export default defineNuxtModule<ModuleOptions>({
         cwd: string
       }
 
-      for (const layer of (nuxt.options._layers as NuxtLayer[])) {
+      // nuxt.options._layers is from rootDir to nested level
+      // We need to reverse the order to give the deepest tailwind.config the lowest priority
+      const layers = (nuxt.options._layers as NuxtLayer[]).slice().reverse()
+      for (const layer of layers) {
         await addConfigPath(layer?.config?.tailwindcss?.configPath || join(layer.cwd, 'tailwind.config'))
         contentPaths.push(...layerPaths(layer.cwd))
       }
@@ -111,15 +115,24 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Watch the Tailwind config file to restart the server
     if (nuxt.options.dev) {
-      // @ts-ignore
-      nuxt.options.watch = nuxt.options.watch || []
-      // @ts-ignore
-      configPaths.forEach(path => nuxt.options.watch.push(path))
+      if (isNuxt2()) {
+        // @ts-ignore
+        nuxt.options.watch = nuxt.options.watch || []
+        // @ts-ignore
+        configPaths.forEach(path => nuxt.options.watch.push(path))
+      } else {
+        watch(configPaths).on('change', (path) => {
+          logger.info(`Tailwind config changed: ${path}`)
+          logger.warn('Please restart the Nuxt server to apply changes')
+        })
+      }
     }
 
     // Default tailwind config
     let tailwindConfig: any = defuArrayFn(moduleOptions.config, { content: contentPaths })
     // Recursively resolve each config and merge tailwind configs together.
+    console.log(configPaths)
+    // The config
     for (const configPath of configPaths) {
       let _tailwindConfig
       try {
@@ -136,6 +149,7 @@ export default defineNuxtModule<ModuleOptions>({
         tailwindConfig = defuArrayFn(_tailwindConfig, tailwindConfig)
       }
     }
+    console.log((tailwindConfig.theme.extend.colors))
 
     // Write cjs version of config to support vscode extension
     const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)