From da5b9157fb75a76502dd3924a129c98cab9d30c4 Mon Sep 17 00:00:00 2001
From: Inesh Bose <dev@inesh.xyz>
Date: Fri, 20 Dec 2024 11:14:42 +0000
Subject: [PATCH 1/2] fix(tailwind): use mjs template

---
 src/tailwind.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/tailwind.ts b/src/tailwind.ts
index 2fc1594747..ec91b394e5 100644
--- a/src/tailwind.ts
+++ b/src/tailwind.ts
@@ -30,15 +30,15 @@ export default function installTailwind(
 
   // 2. add config template
   const configTemplate = addTemplate({
-    filename: 'nuxtui-tailwind.config.cjs',
+    filename: 'nuxtui-tailwind.config.mjs',
     write: true,
     getContents: ({ nuxt }) => `
-      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
-      const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))})
+      import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
+      import { customSafelistExtractor, generateSafelist } from ${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))};
 
       const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
-      module.exports = {
+      export default {
         plugins: [
           require('@tailwindcss/forms')({ strategy: 'class' }),
           require('@tailwindcss/aspect-ratio'),

From c427a0f93cdf998bde43587baac47dac443e57ec Mon Sep 17 00:00:00 2001
From: Inesh Bose <dev@inesh.xyz>
Date: Fri, 20 Dec 2024 17:23:47 +0000
Subject: [PATCH 2/2] chore: switch plugins to imports

---
 src/tailwind.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/tailwind.ts b/src/tailwind.ts
index ec91b394e5..412f05bc4f 100644
--- a/src/tailwind.ts
+++ b/src/tailwind.ts
@@ -35,16 +35,21 @@ export default function installTailwind(
     getContents: ({ nuxt }) => `
       import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
       import { customSafelistExtractor, generateSafelist } from ${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))};
+      import formsPlugin from "@tailwindcss/forms";
+      import aspectRatio from "@tailwindcss/aspect-ratio";
+      import typography from "@tailwindcss/typography";
+      import containerQueries from "@tailwindcss/container-queries";
+      import headlessUi from "@headlessui/tailwindcss";
 
-      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } });
 
       export default {
         plugins: [
-          require('@tailwindcss/forms')({ strategy: 'class' }),
-          require('@tailwindcss/aspect-ratio'),
-          require('@tailwindcss/typography'),
-          require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss')
+          formsPlugin({ strategy: 'class' }),
+          aspectRatio,
+          typography,
+          containerQueries,
+          headlessUi
         ],
         content: {
           files: [