`@import "@nuxt/ui" layer(layer-name);` not working

Environment

• Operating System: Darwin
• Node Version: v24.3.0
• Nuxt Version: 4.0.0-rc.0
• CLI Version: 3.25.1
• Nitro Version: 2.11.13
• Package Manager: pnpm@10.13.1
• Builder: -
• User Config: modules, devtools, css, compatibilityDate, eslint, storybook
• Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/image@1.10.0, @nuxt/scripts@0.11.9, @nuxt/test-utils@3.19.2, @nuxt/ui@3.2.0, @nuxthub/core@0.9.0, @nuxtjs/storybook@8.4.2-29190898.ba4cb15, @vueuse/nuxt@13.5.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt but I guess it'll affect both versions.

Version

v4.0.0-rc.0

Reproduction

https://codesandbox.io/p/devbox/nuxt-ui-css-cascade-layers-not-working-forked-lw7yyg?workspaceId=ws_KLCsiXAt6fXZg7LEhmgRum

Description

@import "tailwindcss" layer(tailwindcss);
@import "@nuxt/ui" layer(tailwindcss);

While Tailwind allows you to import its styles into its own css cascade layer, this module does not.

From what I understand, according to the error logged, the issue is caused by the resulting css tree having nested @source declarations.

Additional context

I'm working on migrating an existing website that was built using Bootstrap (lol) and I'd like to use layers to ensure the newer css gets a higher priority than the old one.

Using @import "tailwindcss" layer(tailwindcss); results in all the tailwind stuff being scoped to the tailwindcss layer (eg. tailwindcss.theme, tailwindcss.base…).

However, when I try to do the same for @import "@nuxt/ui" I get the previously mentioned error.

I've tried using both the same and a different layer name than the one I use for tailwind but I still get the error.

Logs

ERROR  Pre-transform error: @source cannot be nested.             12:42:31 PM
  Plugin: @tailwindcss/vite:generate:serve
  File: /project/workspace/app/assets/css/main.css