fix(module): handle tailwindcss import without theme(static) (#3630)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: sandros94

README.md

@@ -51,7 +51,7 @@ export default defineNuxtConfig({
 2. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
@@ -98,7 +98,7 @@ app.mount('#app')
 3. Import Tailwind CSS and Nuxt UI in your CSS:
 
 ```css [assets/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 

docs/app/components/theme-picker/ThemePicker.vue

@@ -81,7 +81,6 @@ function setBlackAsPrimary(value: boolean) {
 
         <div class="grid grid-cols-3 gap-1 -mx-2">
           <ThemePickerButton
-            chip="primary"
             label="Black"
             :selected="appConfig.theme.blackAsPrimary"
             @click="setBlackAsPrimary(true)"
@@ -90,6 +89,7 @@ function setBlackAsPrimary(value: boolean) {
               <span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
             </template>
           </ThemePickerButton>
+
           <ThemePickerButton
             v-for="color in primaryColors"
             :key="color"

docs/app/components/theme-picker/ThemePickerButton.vue

@@ -5,6 +5,10 @@ defineProps<{
   chip?: string
   selected?: boolean
 }>()
+
+const slots = defineSlots<{
+  leading: () => any
+}>()
 </script>
 
 <template>
@@ -17,7 +21,7 @@ defineProps<{
     class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
     :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
   >
-    <template v-if="chip" #leading>
+    <template v-if="chip || !!slots.leading" #leading>
       <slot name="leading">
         <span
           class="inline-block size-2 rounded-full"

docs/app/pages/.index.yml

@@ -97,7 +97,7 @@ design_system:
     ```
 
     ```css [main.css]
-    @import "tailwindcss" theme(static);
+    @import "tailwindcss";
     @import "@nuxt/ui";
 
     :root {

docs/app/plugins/theme.ts

@@ -41,16 +41,16 @@ export default defineNuxtPlugin({
               const primaryColor = localStorage.getItem('nuxt-ui-primary');
               if (primaryColor !== 'black') {
                 html = html.replace(
-                  /(--ui-color-primary-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.primary}-(\\d{2,3}\\))/g,
-                  \`$1--color-\${primaryColor}-$2\`
+                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
+                  \`$1\${primaryColor}$2\`
                 );
               }
             }
             if (localStorage.getItem('nuxt-ui-neutral')) {
               let neutralColor = localStorage.getItem('nuxt-ui-neutral');
               html = html.replace(
-                /(--ui-color-neutral-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.neutral}-(\\d{2,3}\\))/g,
-                \`$1--color-\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}-$2\`
+                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
+                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
               );
             }
 

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -59,7 +59,7 @@ export default defineNuxtConfig({
 ::code-group
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
@@ -72,10 +72,6 @@ export default defineNuxtConfig({
 
 ::
 
-::warning
-The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
-::
-
 ::callout{icon="i-simple-icons-visualstudiocode"}
 It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
 

docs/content/1.getting-started/2.installation/2.vue.md

@@ -102,14 +102,10 @@ app.mount('#app')
 #### Import Tailwind CSS and Nuxt UI in your CSS
 
 ```css [assets/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
-::warning
-The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
-::
-
 ::tip
 Import the CSS file in your `main.ts`.
 

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

@@ -28,7 +28,7 @@ For a detailed walkthrough of all changes, refer to the official **Tailwind CSS
 ::code-group
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 ```
 
 ```ts [nuxt.config.ts]
@@ -109,7 +109,7 @@ bun add @nuxt/ui-pro
 :::div
 
 ```css [app/assets/css/main.css]{2}
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 ```
 
@@ -119,7 +119,7 @@ bun add @nuxt/ui-pro
 :::div
 
 ```css [app/assets/css/main.css]{2}
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 ```
 

docs/content/1.getting-started/3.theme.md

@@ -17,7 +17,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 @theme static {
@@ -45,7 +45,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @theme static {
@@ -87,7 +87,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 @source "../../../content";
@@ -101,7 +101,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @source "../../../content";
@@ -380,7 +380,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
@@ -398,7 +398,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 :root {
@@ -434,7 +434,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
@@ -452,7 +452,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 :root {
@@ -564,7 +564,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
@@ -584,7 +584,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 :root {
@@ -625,7 +625,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
@@ -639,7 +639,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 :root {
@@ -670,7 +670,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 @theme {
@@ -688,7 +688,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @theme {

docs/content/1.getting-started/5.fonts.md

@@ -19,7 +19,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui";
 
 @theme {
@@ -33,7 +33,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 :::div
 
 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @theme {

playground-vue/src/assets/css/main.css

@@ -1,4 +1,4 @@
-@import "tailwindcss" theme(static) source("../../../..");
+@import "tailwindcss" source("../../../..");
 @import "@nuxt/ui";
 
 @theme static {

playground/app/assets/css/main.css

@@ -1,4 +1,4 @@
-@import "tailwindcss" theme(static) source("../../../..");
+@import "tailwindcss" source("../../../..");
 @import "@nuxt/ui";
 
 @theme static {

src/runtime/plugins/colors.ts

@@ -1,22 +1,30 @@
 import { computed } from 'vue'
+import colors from 'tailwindcss/colors'
+import type { UseHeadInput } from '@unhead/vue/types'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 // FIXME: https://github.com/nuxt/module-builder/issues/141#issuecomment-2078248248
 import type {} from '#app'
-import type { UseHeadInput } from '@unhead/vue/types'
+
+const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+function getColor(color: keyof typeof colors, shade: typeof shades[number]): string {
+  if (color in colors && typeof colors[color] === 'object' && shade in colors[color]) {
+    return colors[color][shade] as string
+  }
+  return ''
+}
+
+function generateShades(key: string, value: string) {
+  return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade}, ${getColor(value as keyof typeof colors, shade)});`).join('\n  ')}`
+}
+function generateColor(key: string, shade: number) {
+  return `--ui-${key}: var(--ui-color-${key}-${shade});`
+}
 
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
   const nuxtApp = useNuxtApp()
 
-  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-  function generateShades(key: string, value: string) {
-    return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade});`).join('\n  ')}`
-  }
-  function generateColor(key: string, shade: number) {
-    return `--ui-${key}: var(--ui-color-${key}-${shade});`
-  }
-
   const root = computed(() => {
     const { neutral, ...colors } = appConfig.ui.colors
 

src/templates.ts

@@ -75,7 +75,7 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
     write: true,
     getContents: () => `@source "./ui";
 
-@theme default static {
+@theme default {
   --color-old-neutral-50: ${colors.neutral[50]};
   --color-old-neutral-100: ${colors.neutral[100]};
   --color-old-neutral-200: ${colors.neutral[200]};