fix(module): use @tailwindcss/postcss

package.json

@@ -28,11 +28,12 @@
     "@nuxt/kit": "^3.11.0",
     "@nuxt/schema": "^3.11.0",
     "@nuxtjs/color-mode": "^3.3.2",
+    "@tailwindcss/postcss": "4.0.0-alpha.9",
     "@tailwindcss/vite": "4.0.0-alpha.9",
     "@vueuse/core": "^10.9.0",
     "defu": "^6.1.4",
-    "ohash": "^1.1.3",
     "nuxt-icon": "^0.6.9",
+    "ohash": "^1.1.3",
     "radix-vue": "^1.5.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "4.0.0-alpha.9"

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@nuxtjs/color-mode':
         specifier: ^3.3.2
         version: 3.3.2(rollup@3.29.4)
+      '@tailwindcss/postcss':
+        specifier: 4.0.0-alpha.9
+        version: 4.0.0-alpha.9(postcss@8.4.36)
       '@tailwindcss/vite':
         specifier: 4.0.0-alpha.9
         version: 4.0.0-alpha.9
@@ -2063,6 +2066,17 @@ packages:
       '@tailwindcss/oxide-win32-x64-msvc': 4.0.0-alpha.9
     dev: false
 
+  /@tailwindcss/postcss@4.0.0-alpha.9(postcss@8.4.36):
+    resolution: {integrity: sha512-Cp6TlJSJCJNqV+SWsFBpTX/s7PW970a3lCHGj6HfVn0fTqyDaNxNzh2kdSmfsYYz82fA7q1DhuQ3ZkpvGgB5gw==}
+    dependencies:
+      '@tailwindcss/oxide': 4.0.0-alpha.9
+      lightningcss: 1.24.1
+      postcss-import: 16.0.1(postcss@8.4.36)
+      tailwindcss: 4.0.0-alpha.9
+    transitivePeerDependencies:
+      - postcss
+    dev: false
+
   /@tailwindcss/vite@4.0.0-alpha.9:
     resolution: {integrity: sha512-o6VpCyClUOQVJr/kXG4DsZaG/rfck3zwcuL0L6QXgKpGP7XOrlwgZIGPYh7lEBgBqrokqzXAX8d/PLiVB+uv8Q==}
     dependencies:
@@ -5463,6 +5477,11 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
@@ -5534,6 +5553,18 @@ packages:
     dependencies:
       postcss: 8.4.36
 
+  /postcss-import@16.0.1(postcss@8.4.36):
+    resolution: {integrity: sha512-i2Pci0310NaLHr/5JUFSw1j/8hf1CzwMY13g6ZDxgOavmRHQi2ba3PmUHoihO+sjaum+KmCNzskNsw7JDrg03g==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.36
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+    dev: false
+
   /postcss-merge-longhand@6.0.4(postcss@8.4.36):
     resolution: {integrity: sha512-vAfWGcxUUGlFiPM3nDMZA+/Yo9sbpc3JNkcYZez8FfJDv41Dh7tAgA3QGVTocaHCZZL6aXPXPOaBMJsjujodsA==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -5856,6 +5887,12 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: false
+
   /read-package-json-fast@3.0.2:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}

src/module.ts

@@ -34,7 +34,11 @@ export default defineNuxtModule<ModuleOptions>({
       icons
     })
 
-    addVitePlugin(tailwindcss)
+    nuxt.options.postcss = nuxt.options.postcss || {}
+    nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {}
+    nuxt.options.postcss.plugins['@tailwindcss/postcss'] = {}
+
+    // addVitePlugin(tailwindcss)
 
     await installModule('nuxt-icon')
     // await installModule('@nuxtjs/color-mode', { classSuffix: '' })