chore(deps): update tailwindcss to ^4.0.8 (v3) (#3373)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-14 12:14:41 +01:00 · 2025-02-25 12:59:52 +01:00
parent f401b68fa7
commit 85b45f6275
12 changed files with 126 additions and 120 deletions
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ export default defineNuxtConfig({
 2. Import Tailwind CSS and Nuxt UI in your CSS:

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";
 ```

@@ -94,7 +94,7 @@ app.mount('#app')
 3. Import Tailwind CSS and Nuxt UI in your CSS:

 ```css [assets/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";
 ```

--- a/docs/app/assets/css/main.css
+++ b/docs/app/assets/css/main.css
@@ -1,9 +1,9 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@source "../../../content";

-@theme {
+@theme static {
  --container-8xl: 90rem;

  --font-sans: 'Public Sans', sans-serif;
--- a/docs/content/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/1.getting-started/2.installation/1.nuxt.md
@@ -57,10 +57,14 @@ export default defineNuxtConfig({
 #### Import Tailwind CSS and Nuxt UI in your CSS

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@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
 Use the `css` property in your `nuxt.config.ts` to import your CSS file.

--- a/docs/content/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -102,10 +102,14 @@ app.mount('#app')
 #### Import Tailwind CSS and Nuxt UI in your CSS

 ```css [assets/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@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`.

--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -17,10 +17,10 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

-@theme {
+@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;
@@ -45,10 +45,10 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

-@theme {
+@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;
@@ -87,7 +87,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 :::div

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@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 [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@source "../../content";
@@ -303,7 +303,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

 :root {
@@ -321,7 +321,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

 :root {
@@ -357,7 +357,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

 :root {
@@ -375,7 +375,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

 :root {
@@ -487,7 +487,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

 :root {
@@ -507,7 +507,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

 :root {
@@ -548,7 +548,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

 :root {
@@ -562,7 +562,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

 :root {
@@ -593,7 +593,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme {
@@ -611,7 +611,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@theme {
--- a/docs/content/1.getting-started/5.fonts.md
+++ b/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 [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme {
@@ -33,7 +33,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 :::div

 ```css [assets/css/main.css]
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

@theme {
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
    "@nuxt/content": "^3.2.2",
    "@nuxt/image": "^1.9.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@c6577ad",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@d651861",
    "@nuxthub/core": "^0.8.17",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
--- a/package.json
+++ b/package.json
@@ -88,8 +88,8 @@
    "@nuxt/kit": "^3.15.4",
    "@nuxt/schema": "^3.15.4",
    "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.7",
-    "@tailwindcss/vite": "^4.0.7",
+    "@tailwindcss/postcss": "^4.0.8",
+    "@tailwindcss/vite": "^4.0.8",
    "@tanstack/vue-table": "^8.21.2",
    "@unhead/vue": "^1.11.19",
    "@vueuse/core": "^12.7.0",
@@ -115,7 +115,7 @@
    "scule": "^1.3.0",
    "sirv": "^3.0.1",
    "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^4.0.7",
+    "tailwindcss": "^4.0.8",
    "tinyglobby": "^0.2.11",
    "unplugin": "^2.2.0",
    "unplugin-auto-import": "^19.1.0",
@@ -150,12 +150,9 @@
  },
  "resolutions": {
    "@nuxt/ui": "workspace:*",
-    "@tailwindcss/postcss": "4.0.7",
-    "@tailwindcss/vite": "4.0.7",
    "chokidar": "3.6.0",
    "debug": "4.3.7",
    "rollup": "4.32.1",
-    "tailwindcss": "4.0.7",
    "typescript": "5.6.3",
    "unimport": "3.14.5",
    "unplugin": "^2.2.0",
--- a/playground-vue/src/assets/css/main.css
+++ b/playground-vue/src/assets/css/main.css
@@ -1,7 +1,9 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

-@theme {
+@source "../../../../playground/";
+
+@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
--- a/playground/app/assets/css/main.css
+++ b/playground/app/assets/css/main.css
@@ -1,7 +1,7 @@
-@import "tailwindcss";
+@import "tailwindcss" theme(static);
@import "@nuxt/ui";

-@theme {
+@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,9 @@ settings:

 overrides:
  '@nuxt/ui': workspace:*
-  '@tailwindcss/postcss': 4.0.7
-  '@tailwindcss/vite': 4.0.7
  chokidar: 3.6.0
  debug: 4.3.7
  rollup: 4.32.1
-  tailwindcss: 4.0.7
  typescript: 5.6.3
  unimport: 3.14.5
  unplugin: ^2.2.0
@@ -50,11 +47,11 @@ importers:
        specifier: ^3.5.2
        version: 3.5.2(magicast@0.3.5)(rollup@4.32.1)
      '@tailwindcss/postcss':
-        specifier: 4.0.7
-        version: 4.0.7
+        specifier: ^4.0.8
+        version: 4.0.8
      '@tailwindcss/vite':
-        specifier: 4.0.7
-        version: 4.0.7(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
+        specifier: ^4.0.8
+        version: 4.0.8(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
      '@tanstack/vue-table':
        specifier: ^8.21.2
        version: 8.21.2(vue@3.5.13(typescript@5.6.3))
@@ -129,10 +126,10 @@ importers:
        version: 3.0.1
      tailwind-variants:
        specifier: ^0.3.1
-        version: 0.3.1(tailwindcss@4.0.7)
+        version: 0.3.1(tailwindcss@4.0.8)
      tailwindcss:
-        specifier: 4.0.7
-        version: 4.0.7
+        specifier: ^4.0.8
+        version: 4.0.8
      tinyglobby:
        specifier: ^0.2.11
        version: 0.2.11
@@ -270,8 +267,8 @@ importers:
        specifier: workspace:*
        version: link:..
      '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@c6577ad
-        version: https://pkg.pr.new/@nuxt/ui-pro@c6577ad(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@d651861
+        version: https://pkg.pr.new/@nuxt/ui-pro@d651861(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)
      '@nuxthub/core':
        specifier: ^0.8.17
        version: 0.8.17(db0@0.2.4(better-sqlite3@11.8.1))(ioredis@5.5.0)(magicast@0.3.5)(rollup@4.32.1)(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))
@@ -1588,8 +1585,8 @@ packages:
      vitest:
        optional: true

-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c6577ad':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@c6577ad}
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@d651861':
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@d651861}
    version: 3.0.0-alpha.13
    peerDependencies:
      typescript: 5.6.3
@@ -2162,84 +2159,84 @@ packages:
  '@swc/helpers@0.5.15':
    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}

-  '@tailwindcss/node@4.0.7':
-    resolution: {integrity: sha512-dkFXufkbRB2mu3FPsW5xLAUWJyexpJA+/VtQj18k3SUiJVLdpgzBd1v1gRRcIpEJj7K5KpxBKfOXlZxT3ZZRuA==}
+  '@tailwindcss/node@4.0.8':
+    resolution: {integrity: sha512-FKArQpbrbwv08TNT0k7ejYXpF+R8knZFAatNc0acOxbgeqLzwb86r+P3LGOjIeI3Idqe9CVkZrh4GlsJLJKkkw==}

-  '@tailwindcss/oxide-android-arm64@4.0.7':
-    resolution: {integrity: sha512-5iQXXcAeOHBZy8ASfHFm1k0O/9wR2E3tKh6+P+ilZZbQiMgu+qrnfpBWYPc3FPuQdWiWb73069WT5D+CAfx/tg==}
+  '@tailwindcss/oxide-android-arm64@4.0.8':
+    resolution: {integrity: sha512-We7K79+Sm4mwJHk26Yzu/GAj7C7myemm7PeXvpgMxyxO70SSFSL3uCcqFbz9JA5M5UPkrl7N9fkBe/Y0iazqpA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [android]

-  '@tailwindcss/oxide-darwin-arm64@4.0.7':
-    resolution: {integrity: sha512-7yGZtEc5IgVYylqK/2B0yVqoofk4UAbkn1ygNpIJZyrOhbymsfr8uUFCueTu2fUxmAYIfMZ8waWo2dLg/NgLgg==}
+  '@tailwindcss/oxide-darwin-arm64@4.0.8':
+    resolution: {integrity: sha512-Lv9Isi2EwkCTG1sRHNDi0uRNN1UGFdEThUAGFrydRmQZnraGLMjN8gahzg2FFnOizDl7LB2TykLUuiw833DSNg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]

-  '@tailwindcss/oxide-darwin-x64@4.0.7':
-    resolution: {integrity: sha512-tPQDV20fBjb26yWbPqT1ZSoDChomMCiXTKn4jupMSoMCFyU7+OJvIY1ryjqBuY622dEBJ8LnCDDWsnj1lX9nNQ==}
+  '@tailwindcss/oxide-darwin-x64@4.0.8':
+    resolution: {integrity: sha512-fWfywfYIlSWtKoqWTjukTHLWV3ARaBRjXCC2Eo0l6KVpaqGY4c2y8snUjp1xpxUtpqwMvCvFWFaleMoz1Vhzlw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]

-  '@tailwindcss/oxide-freebsd-x64@4.0.7':
-    resolution: {integrity: sha512-sZqJpTyTZiknU9LLHuByg5GKTW+u3FqM7q7myequAXxKOpAFiOfXpY710FuMY+gjzSapyRbDXJlsTQtCyiTo5w==}
+  '@tailwindcss/oxide-freebsd-x64@4.0.8':
+    resolution: {integrity: sha512-SO+dyvjJV9G94bnmq2288Ke0BIdvrbSbvtPLaQdqjqHR83v5L2fWADyFO+1oecHo9Owsk8MxcXh1agGVPIKIqw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [freebsd]

-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.7':
-    resolution: {integrity: sha512-PBgvULgeSswjd8cbZ91gdIcIDMdc3TUHV5XemEpxlqt9M8KoydJzkuB/Dt910jYdofOIaTWRL6adG9nJICvU4A==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.8':
+    resolution: {integrity: sha512-ZSHggWiEblQNV69V0qUK5vuAtHP+I+S2eGrKGJ5lPgwgJeAd6GjLsVBN+Mqn2SPVfYM3BOpS9jX/zVg9RWQVDQ==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]

-  '@tailwindcss/oxide-linux-arm64-gnu@4.0.7':
-    resolution: {integrity: sha512-By/a2yeh+e9b+C67F88ndSwVJl2A3tcUDb29FbedDi+DZ4Mr07Oqw9Y1DrDrtHIDhIZ3bmmiL1dkH2YxrtV+zw==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.8':
+    resolution: {integrity: sha512-xWpr6M0OZLDNsr7+bQz+3X7zcnDJZJ1N9gtBWCtfhkEtDjjxYEp+Lr5L5nc/yXlL4MyCHnn0uonGVXy3fhxaVA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@tailwindcss/oxide-linux-arm64-musl@4.0.7':
-    resolution: {integrity: sha512-WHYs3cpPEJb/ccyT20NOzopYQkl7JKncNBUbb77YFlwlXMVJLLV3nrXQKhr7DmZxz2ZXqjyUwsj2rdzd9stYdw==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.8':
+    resolution: {integrity: sha512-5tz2IL7LN58ssGEq7h/staD7pu/izF/KeMWdlJ86WDe2Ah46LF3ET6ZGKTr5eZMrnEA0M9cVFuSPprKRHNgjeg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]

-  '@tailwindcss/oxide-linux-x64-gnu@4.0.7':
-    resolution: {integrity: sha512-7bP1UyuX9kFxbOwkeIJhBZNevKYPXB6xZI37v09fqi6rqRJR8elybwjMUHm54GVP+UTtJ14ueB1K54Dy1tIO6w==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.8':
+    resolution: {integrity: sha512-KSzMkhyrxAQyY2o194NKVKU9j/c+NFSoMvnHWFaNHKi3P1lb+Vq1UC19tLHrmxSkKapcMMu69D7+G1+FVGNDXQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@tailwindcss/oxide-linux-x64-musl@4.0.7':
-    resolution: {integrity: sha512-gBQIV8nL/LuhARNGeroqzXymMzzW5wQzqlteVqOVoqwEfpHOP3GMird5pGFbnpY+NP0fOlsZGrxxOPQ4W/84bQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.0.8':
+    resolution: {integrity: sha512-yFYKG5UtHTRimjtqxUWXBgI4Tc6NJe3USjRIVdlTczpLRxq/SFwgzGl5JbatCxgSRDPBFwRrNPxq+ukfQFGdrw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]

-  '@tailwindcss/oxide-win32-arm64-msvc@4.0.7':
-    resolution: {integrity: sha512-aH530NFfx0kpQpvYMfWoeG03zGnRCMVlQG8do/5XeahYydz+6SIBxA1tl/cyITSJyWZHyVt6GVNkXeAD30v0Xg==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.8':
+    resolution: {integrity: sha512-tndGujmCSba85cRCnQzXgpA2jx5gXimyspsUYae5jlPyLRG0RjXbDshFKOheVXU4TLflo7FSG8EHCBJ0EHTKdQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]

-  '@tailwindcss/oxide-win32-x64-msvc@4.0.7':
-    resolution: {integrity: sha512-8Cva6bbJN7ZJx320k7vxGGdU0ewmpfS5A4PudyzUuofdi8MgeINuiiWiPQ0VZCda/GX88K6qp+6UpDZNVr8HMQ==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.8':
+    resolution: {integrity: sha512-T77jroAc0p4EHVVgTUiNeFn6Nj3jtD3IeNId2X+0k+N1XxfNipy81BEkYErpKLiOkNhpNFjPee8/ZVas29b2OQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]

-  '@tailwindcss/oxide@4.0.7':
-    resolution: {integrity: sha512-yr6w5YMgjy+B+zkJiJtIYGXW+HNYOPfRPtSs+aqLnKwdEzNrGv4ZuJh9hYJ3mcA+HMq/K1rtFV+KsEr65S558g==}
+  '@tailwindcss/oxide@4.0.8':
+    resolution: {integrity: sha512-KfMcuAu/Iw+DcV1e8twrFyr2yN8/ZDC/odIGta4wuuJOGkrkHZbvJvRNIbQNhGh7erZTYV6Ie0IeD6WC9Y8Hcw==}
    engines: {node: '>= 10'}

-  '@tailwindcss/postcss@4.0.7':
-    resolution: {integrity: sha512-zXcKs1uGssVDlnsQ+iwrkul5GPKvsXPynGCuk/eXLx3DVhHlQKMpA6tXN2oO28x2ki1xRBTfadKiHy2taVvp7g==}
+  '@tailwindcss/postcss@4.0.8':
+    resolution: {integrity: sha512-SUwlrXjn1ycmUbA0o0n3Y0LqlXqxN5R8HR+ti+OBbRS79wl2seDmiypEs3xJCuQXe07ol81s1AmRMitBmPveJA==}

-  '@tailwindcss/vite@4.0.7':
-    resolution: {integrity: sha512-GYx5sxArfIMtdZCsxfya3S/efMmf4RvfqdiLUozkhmSFBNUFnYVodatpoO/en4/BsOIGvq/RB6HwcTLn9prFnQ==}
+  '@tailwindcss/vite@4.0.8':
+    resolution: {integrity: sha512-+SAq44yLzYlzyrb7QTcFCdU8Xa7FOA0jp+Xby7fPMUie+MY9HhJysM7Vp+vL8qIp8ceQJfLD+FjgJuJ4lL6nyg==}
    peerDependencies:
      vite: ^5.2.0 || ^6

@@ -6220,10 +6217,10 @@ packages:
    resolution: {integrity: sha512-krn67M3FpPwElg4FsZrOQd0U26o7UDH/QOkK8RNaiCCrr052f6YJPBUfNKnPo/s/xRzNPtv1Mldlxsg8Tb46BQ==}
    engines: {node: '>=16.x', pnpm: '>=7.x'}
    peerDependencies:
-      tailwindcss: 4.0.7
+      tailwindcss: '*'

-  tailwindcss@4.0.7:
-    resolution: {integrity: sha512-yH5bPPyapavo7L+547h3c4jcBXcrKwybQRjwdEIVAd9iXRvy/3T1CC6XSQEgZtRySjKfqvo3Cc0ZF1DTheuIdA==}
+  tailwindcss@4.0.8:
+    resolution: {integrity: sha512-Me7N5CKR+D2A1xdWA5t5+kjjT7bwnxZOE6/yDI/ixJdJokszsn2n++mdU5yJwrsTpqFX2B9ZNMBJDwcqk9C9lw==}

  tapable@2.2.1:
    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -8435,7 +8432,7 @@ snapshots:
      - typescript
      - yaml

-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@c6577ad(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@d651861(magicast@0.3.5)(rollup@4.32.1)(typescript@5.6.3)':
    dependencies:
      '@nuxt/kit': 3.15.4(magicast@0.3.5)(rollup@4.32.1)
      '@nuxt/schema': 3.15.4
@@ -9134,74 +9131,74 @@ snapshots:
    dependencies:
      tslib: 2.8.1

-  '@tailwindcss/node@4.0.7':
+  '@tailwindcss/node@4.0.8':
    dependencies:
      enhanced-resolve: 5.18.1
      jiti: 2.4.2
-      tailwindcss: 4.0.7
+      tailwindcss: 4.0.8

-  '@tailwindcss/oxide-android-arm64@4.0.7':
+  '@tailwindcss/oxide-android-arm64@4.0.8':
    optional: true

-  '@tailwindcss/oxide-darwin-arm64@4.0.7':
+  '@tailwindcss/oxide-darwin-arm64@4.0.8':
    optional: true

-  '@tailwindcss/oxide-darwin-x64@4.0.7':
+  '@tailwindcss/oxide-darwin-x64@4.0.8':
    optional: true

-  '@tailwindcss/oxide-freebsd-x64@4.0.7':
+  '@tailwindcss/oxide-freebsd-x64@4.0.8':
    optional: true

-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.7':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.8':
    optional: true

-  '@tailwindcss/oxide-linux-arm64-gnu@4.0.7':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.8':
    optional: true

-  '@tailwindcss/oxide-linux-arm64-musl@4.0.7':
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.8':
    optional: true

-  '@tailwindcss/oxide-linux-x64-gnu@4.0.7':
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.8':
    optional: true

-  '@tailwindcss/oxide-linux-x64-musl@4.0.7':
+  '@tailwindcss/oxide-linux-x64-musl@4.0.8':
    optional: true

-  '@tailwindcss/oxide-win32-arm64-msvc@4.0.7':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.8':
    optional: true

-  '@tailwindcss/oxide-win32-x64-msvc@4.0.7':
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.8':
    optional: true

-  '@tailwindcss/oxide@4.0.7':
+  '@tailwindcss/oxide@4.0.8':
    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.0.7
-      '@tailwindcss/oxide-darwin-arm64': 4.0.7
-      '@tailwindcss/oxide-darwin-x64': 4.0.7
-      '@tailwindcss/oxide-freebsd-x64': 4.0.7
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.7
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.7
-      '@tailwindcss/oxide-linux-arm64-musl': 4.0.7
-      '@tailwindcss/oxide-linux-x64-gnu': 4.0.7
-      '@tailwindcss/oxide-linux-x64-musl': 4.0.7
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.7
-      '@tailwindcss/oxide-win32-x64-msvc': 4.0.7
+      '@tailwindcss/oxide-android-arm64': 4.0.8
+      '@tailwindcss/oxide-darwin-arm64': 4.0.8
+      '@tailwindcss/oxide-darwin-x64': 4.0.8
+      '@tailwindcss/oxide-freebsd-x64': 4.0.8
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.8
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.8
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.8
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.8
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.8
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.8
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.8

-  '@tailwindcss/postcss@4.0.7':
+  '@tailwindcss/postcss@4.0.8':
    dependencies:
      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.0.7
-      '@tailwindcss/oxide': 4.0.7
+      '@tailwindcss/node': 4.0.8
+      '@tailwindcss/oxide': 4.0.8
      lightningcss: 1.29.1
      postcss: 8.5.2
-      tailwindcss: 4.0.7
+      tailwindcss: 4.0.8

-  '@tailwindcss/vite@4.0.7(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))':
+  '@tailwindcss/vite@4.0.8(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))':
    dependencies:
-      '@tailwindcss/node': 4.0.7
-      '@tailwindcss/oxide': 4.0.7
+      '@tailwindcss/node': 4.0.8
+      '@tailwindcss/oxide': 4.0.8
      lightningcss: 1.29.1
-      tailwindcss: 4.0.7
+      tailwindcss: 4.0.8
      vite: 6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0)

  '@tanstack/table-core@8.21.2': {}
@@ -14164,12 +14161,12 @@ snapshots:

  tailwind-merge@2.5.4: {}

-  tailwind-variants@0.3.1(tailwindcss@4.0.7):
+  tailwind-variants@0.3.1(tailwindcss@4.0.8):
    dependencies:
      tailwind-merge: 2.5.4
-      tailwindcss: 4.0.7
+      tailwindcss: 4.0.8

-  tailwindcss@4.0.7: {}
+  tailwindcss@4.0.8: {}

  tapable@2.2.1: {}

--- a/src/templates.ts
+++ b/src/templates.ts
@@ -73,7 +73,9 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
  templates.push({
    filename: 'ui.css',
    write: true,
-    getContents: () => `@theme default {
+    getContents: () => `@source "./ui";
+
+@theme default {
  --color-old-neutral-50: ${colors.neutral[50]};
  --color-old-neutral-100: ${colors.neutral[100]};
  --color-old-neutral-200: ${colors.neutral[200]};