Revert "refactor: first class HMR support (#795)" (#817)

This reverts commit 25b9f9e.

docs/content/1.getting-started/2.configuration.md

@@ -167,13 +167,13 @@ You can edit the endpoint by `viewer.endpoint` and if you'd like to export the v
 
 - Default: `false`
 
-You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt application with Tailwind. Read more in [Editor Support](/tailwind/editor-support).
+You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt applicatio with Tailwind. Read more in [Editor Support](/tailwind/editor-support).
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   tailwindcss: {
     editorSupport: true
-    // editorSupport: { autocompleteUtil: { as: 'tailwindClasses' } }
+    // editorSupport: { autocompleteUtil: { as: 'tailwindClasses' }, generateConfig: true }
   }
 })
 ```

docs/content/2.tailwind/3.editor-support.md

@@ -20,7 +20,7 @@ Add the following configuration to your `.vscode/settings.json` file, so that Ta
 
 If you use pnpm, ensure that tailwindcss is installed in your top-level node_modules folder.
 
-## String Classes Autocomplete
+## Autocomplete
 
 When using strings of Tailwind classes, you can enable IntelliSense suggestions using the [`editorSupport.autocompleteUtil`](/getting-started/configuration#editorsupport) option. You will have to add the following VSCode setting:
 
@@ -44,20 +44,9 @@ const variantClasses = {
 </script>
 ```
 
-## Configuration IntelliSense
+## Load Config File
 
-Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind.config.cjs` that you can use by adding the following VSCode setting:
-
-```diff [.vscode/settings.json]
-// ...
-+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
-"files.associations": {
-    "*.css": "tailwindcss"
-},
-// ...
-```
-
-If you require more customisation to what configuration the IntelliSense extension reads, you can take advantage of hooks, especially the `tailwindcss:resolvedConfig` hook that runs the configuration through [`tailwindcss/resolveConfig`](https://github.com/tailwindlabs/tailwindcss/blob/master/resolveConfig.js) to provide the complete config object.
+Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you happen to use a lower version and/or require to generate a flat configuration, you can do so using [`editorSupport.generateConfig`](/getting-started/configuration#editorsupport) option, or you can use the `tailwindcss:resolvedConfig` hook and a custom Nuxt module:
 
 ```ts [modules/tw-cjs-config.ts]
 import { defineNuxtModule, addTemplate } from '@nuxt/kit'
@@ -66,11 +55,8 @@ export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.hook('tailwindcss:resolvedConfig', (config) => {
       addTemplate({
-        filename: 'intellisense-tw.cjs', // gets prepended by .nuxt/
-        getContents: () => `
-          /* my-comment */
-          module.exports = ${JSON.stringify(config)}
-        `,
+        filename: 'tailwind.config.cjs', // gets prepended by .nuxt/
+        getContents: () => `module.exports = ${JSON.stringify(config)}`,
         write: true
       })
     })
@@ -79,3 +65,12 @@ export default defineNuxtModule({
 ```
 
 This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using `JSON.stringify` will remove plugins from your configuration.
+
+```diff [.vscode/settings.json]
+// ...
++ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
+"files.associations": {
+    "*.css": "tailwindcss"
+},
+// ...
+```

playground/nuxt.config.ts

@@ -1,9 +1,5 @@
 import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
-import { consola } from 'consola'
-import type { ModuleHooks, ModuleOptions } from '../src/types'
-
-const logger = consola.withTag('nuxt:tailwindcss:playground')
 
 export default defineNuxtConfig({
   extends: ['./theme'],
@@ -17,33 +13,7 @@ export default defineNuxtConfig({
     exposeConfig: true,
     cssPath: '~/assets/css/tailwind.css',
     editorSupport: true
-  } satisfies Partial<ModuleOptions>,
-  hooks: {
-    'tailwindcss:loadConfig': (config, configPath, idx) => {
-      logger.info('Running `tailwindcss:loadConfig` hook...', { configPath, idx })
-
-      if (idx === 0 && config) {
-        config.theme = config.theme ?? {}
-        config.theme.extend = config.theme.extend ?? {}
-        config.theme.extend.screens = { md2: '100px' }
-      } else if (idx === 1 && config) {
-        config.content = config.content ?? []
-        Array.isArray(config.content) ? config.content.push('my-content') : config.content.files.push('my-file-content')
-      }
-    },
-    'tailwindcss:config': (config) => {
-      logger.info('Running `tailwindcss:config` hook...')
-
-      config.theme = config.theme ?? {}
-      config.theme.extend = config.theme.extend ?? {}
-      config.theme.extend.colors = config.theme.extend.colors ?? {}
-      // @ts-ignore
-      config.theme.extend.colors.extendedColor = '#f0ff0f'
-    },
-    'tailwindcss:resolvedConfig': (_config) => {
-      logger.info('Running `tailwindcss:resolvedConfig` hook...')
-    }
-  } satisfies Partial<ModuleHooks>,
+  },
   content: {
     documentDriven: true
   },

playground/pages/index.vue

@@ -9,9 +9,6 @@
         <span class="text-blue-500">meow!</span>
       </div>
       <p class="text-brand">
-        This color comes from the `./tailwind.config`
-      </p>
-      <p class="text-accent">
         This color comes from the `./theme` layer
       </p>
       <div>
@@ -38,6 +35,5 @@
 import { tw } from '#imports'
 import tailwindConfig from '#tailwind-config'
 
-// const tw = <T>(s: T) => s
 const mainDivClass = tw`max-w-screen-lg p-4 mx-auto space-y-4`
 </script>

playground/theme/tailwind.config.cjs

@@ -4,8 +4,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: colors.fuchsia['500'],
-        accent: colors.fuchsia['500']
+        brand: colors.fuchsia['500']
       }
     }
   }

src/logger.ts

@@ -1,4 +1,4 @@
 export { LogLevels } from 'consola'
 import { useLogger } from '@nuxt/kit'
 
-export default useLogger('nuxt:tailwindcss') as import('consola').ConsolaInstance
+export default useLogger('nuxt:tailwindcss')