Layer Class Loading Issue with Nuxt 4 Directory Structure

[jrafaelca]

Environment

Development Environment:
• Operating System: Mac OS
• Node Version: v20.11.0
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.6
• Package Manager: [email protected]
• Modules Used:
• @nuxt/[email protected]

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0

Reproduction

Steps to Reproduce:
1. Clone the reproduction repository: nuxt-ui-layer-tailwind-bug.
2. Switch to the nuxt4-structure branch, where the new directory structure is implemented.
3. Install dependencies with pnpm install.
4. Run the application with pnpm dev and observe that some classes are not applied correctly.

Description

When applying the new directory structure introduced in Nuxt 4 to a project using Nuxt UI 3, some classes defined in the layers are not loaded or recognized correctly, affecting the expected UI behavior.

Additional context

Expected Behavior:
All classes defined in Nuxt UI 3 should load and be recognized normally, regardless of the directory structure used. The example should function as it does in the main branch, which uses the traditional structure.

Actual Behavior:
In the nuxt4-structure branch, the application fails to recognize or load some classes in the Nuxt UI layers, leading to display and functionality issues with components.

Additional Notes:
• The main branch contains a fully functional example using the traditional directory structure, indicating that the issue appears to be specifically related to adapting to the new Nuxt 4 directory structure.
• Any guidance, configuration adjustments, patches, or updates that would enable compatibility between Nuxt UI 3 and the new directory structure would be greatly appreciated.

Thank you in advance for your assistance and for the excellent work on Nuxt UI!

Logs

[HugoRCD]

@jrafaelca You must add the source of your layer for tailwind https://ui.nuxt.com/getting-started/theme#source

[jrafaelca]

@HugoRCD Thank you very much. What about layers extending from a repository?

Was it solved by doing what you recommended? Is my solution the right one?

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@source "../../../layers";

Thank you very much in advance!

[HugoRCD]

Good question 😅 But yes, that's how to extend from the local layer !