feat: expose config as commonjs file (#535)

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

@@ -7,27 +7,31 @@ Tailwind provides an [extension for Visual Studio Code](https://github.com/tailw
 
 There are a few things you need to keep in mind so that the extension works correctly:
 
-1. You need to have a `tailwind.config.js` file in the root of your project, so that the extension gets enabled. You can create the file using `npx tailwindcss init`. The file can have another name, such as `tailwind.config.cjs` in which case you have to configure the extension so that it picks up the new name:
+1. In case you specify your Tailwind configuration in a `tailwind.config.js` file in the root of your project, the extension gets enabled and should pick up this configuration automatically. You can create the file using `npx tailwindcss init`. The file can have another name, such as `tailwind.config.cjs` in which case you have to configure the extension so that it picks up the new name:
 
-```json [.vscode/settings.json]
-"tailwindCSS.experimental.configFile": "tailwind.config.cjs"
-```
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": "tailwind.config.cjs"
+    ```
 
-If you have multiple Tailwind config files, you can use the array syntax:
+    If you have multiple Tailwind config files, you can use the array syntax:
 
-```json [.vscode/settings.json]
-"tailwindCSS.experimental.configFile": {
-  "themes/simple/tailwind.config.js": "themes/simple/**",
-  "themes/neon/tailwind.config.js": "themes/neon/**"
-}
-```
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": {
+      "themes/simple/tailwind.config.js": "themes/simple/**",
+      "themes/neon/tailwind.config.js": "themes/neon/**"
+    }
+    ```
 
-2. The tailwind configuration file must not have any TypeScript or ESM syntax in the file. That means that you have to use CommonJS exports and can't use a `tailwind.config.ts` file with TypeScript syntax. See https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685.
+2. Currently, [Tailwind does not support a configuration file in TypeScript or ESM syntax format]( https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685), nor does it pick up the Tailwind configuration in `nuxt.config.ts`. If you prefer one of these options to specify the configuration, you have to point the extension to the configuration file in CommonJS format that the module automatically generates in the `.nuxt` folder: 
+
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
+    ```
 
 3. Add the following configuration to your `.vscode/settings.json` file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:
 
-```json [.vscode/settings.json]
-"files.associations": {
-	"*.css": "tailwindcss"
-}
-```
+    ```json [.vscode/settings.json]
+    "files.associations": {
+	    "*.css": "tailwindcss"
+    }
+    ```

src/module.ts

@@ -135,11 +135,18 @@ export default defineNuxtModule<ModuleOptions>({
     // Merge with our default purgecss default
     tailwindConfig = defuArrayFn(tailwindConfig, moduleOptions.config)
 
+    // Write cjs version of config to support vscode extension
+    const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
+    const resolvedConfig = resolveConfig(tailwindConfig)
+    addTemplate({
+      filename: 'tailwind.config.cjs',
+      getContents: () => `module.export = ${JSON.stringify(resolvedConfig, null, 2)}`,
+      write: true
+    })
+
     // Expose resolved tailwind config as an alias
     // https://tailwindcss.com/docs/configuration/#referencing-in-javascript
     if (moduleOptions.exposeConfig) {
-      const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
-      const resolvedConfig = resolveConfig(tailwindConfig)
       const template = addTemplate({
         filename: 'tailwind.config.mjs',
         getContents: () => `export default ${JSON.stringify(resolvedConfig, null, 2)}`