chore: use tailwind v4

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.10.3",
-    "@nuxtjs/tailwindcss": "^6.11.4",
+    "@tailwindcss/vite": "4.0.0-alpha.3",
     "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.18",
     "defu": "^6.1.4",
@@ -33,7 +33,7 @@
     "postcss": "^8.4.35",
     "radix-vue": "^1.4.9",
     "tailwind-variants": "^0.2.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "4.0.0-alpha.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",

playground/tailwind.config.ts

@@ -1,4 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-export default <Partial<Config>>{
-}

src/module.ts

@@ -1,5 +1,6 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, installModule } from '@nuxt/kit'
+import tailwindcss from '@tailwindcss/vite'
 import type { DeepPartial } from './runtime/types'
 import * as theme from './runtime/theme'
 
@@ -32,6 +33,9 @@ export default defineNuxtModule({
     const resolver = createResolver(import.meta.url)
 
     nuxt.options.alias['#ui'] = resolver.resolve('./runtime')
+
+    nuxt.options.css.push(resolver.resolve('./runtime/main.css'))
+
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       primary: 'green',
       gray: 'cool',
@@ -41,18 +45,8 @@ export default defineNuxtModule({
     })
 
     await installModule('nuxt-icon')
-    await installModule('@nuxtjs/tailwindcss', {
-      exposeConfig: true,
-      config: {
-        darkMode: 'class',
-        content: {
-          files: [
-            resolver.resolve('./runtime/components/**/*.{vue,ts}'),
-            resolver.resolve('./runtime/theme/**/*.ts')
-          ]
-        }
-      }
-    })
+
+    addVitePlugin(tailwindcss)
 
     addComponentsDir({
       path: resolver.resolve('./runtime/components'),

src/runtime/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/runtime/theme/button.ts

@@ -1,8 +1,8 @@
 export default {
   slots: {
-    base: 'rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
+    base: 'rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0',
     label: '',
-    icon: 'flex-shrink-0'
+    icon: 'shrink-0'
   },
   variants: {
     color: {