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

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

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\`
               );
             }