Component missing styles (Tailwind)

[maiden shadow]

Hi @orchid pine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your issue—where Tailwind CSS classes are not being applied to a component moved into a Nuxt layer (e.g., layers/Ui/components/.../Sidebar.vue)—is likely related to how Tailwind CSS v4 and Nuxt handle content detection and CSS generation in layered architectures.

Key points from the knowledge sources:

• Tailwind CSS v4 uses a CSS-first configuration and relies on content detection to generate only the CSS classes actually used in your project. If Tailwind doesn't "see" your component files, it won't generate the necessary CSS for their classes. This is especially relevant when using Nuxt layers, as files in custom directories or layers may not be picked up by default content detection rules Nuxt UI Theme Customization.

• You may need to explicitly tell Tailwind where to look for classes. Tailwind v4 introduces the @source directive, which you can add to your main CSS file to ensure Tailwind scans additional directories (such as those in your layers) for class usage:

  @import "tailwindcss";
  @import "@nuxt/ui";
  @source "../../layers/Ui/components";
  

  Adjust the path as needed to point to your layer's components directory. This ensures Tailwind includes those files in its content scan and generates the required CSS Nuxt UI Theme: @source directive.

• Directory structure changes in Nuxt 3/4 can affect third-party tools like Tailwind. If you have a custom or layered directory structure, you may need to update your Tailwind configuration or use the @source directive to ensure all relevant files are included Nuxt 4 Upgrade Guide PR.

What to do:

1. Add the @source directive to your main CSS file (e.g., assets/css/main.css), pointing to your layer's components directory.
2. Restart your dev server after making this change to ensure Tailwind picks up the new files.
3. Check for typos or path issues—the path in @source should be relative to your CSS file.

If you follow these steps, Tailwind should process the classes in your layered components and generate the correct CSS.

If the problem persists after this, double-check that your Nuxt and Tailwind versions are compatible and that your build cache is cleared.

References:

• Nuxt UI Theme Customization
• Nuxt UI Theme: @source directive
• Nuxt 4 Upgrade Guide PR

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@orchid pine Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[reef night]

Hi @maiden shadow , I have a similar issue and it seems that the styles are not applied in my layer as well.

I have a pnpm workspace for the apps and layers. I created my layer with 'pnpm create nuxt -t layer my-layer' which creates the necessary files and also creates a .playground to develop the layer independently.

I made only a minimal example and added

      <UButton>My Button</UButton>
    </div>

to the app.vue. The Button is visible, but the other tailwind classes don't seem to apply.

[maiden shadow]

Let me check the knowledge base for you again. One moment! :books:

---

Your issue is a common one when working with Nuxt layers and Tailwind CSS v4, especially in a monorepo or workspace setup. When you use the .playground directory to develop your layer independently, Tailwind may not detect classes in your layer's files unless you explicitly tell it to scan those files.

Solution: Use the @source directive in your main CSS file

Tailwind v4 introduces the @source directive, which allows you to specify additional directories for Tailwind to scan for class usage. In your .playground app, you should add a @source directive in your main CSS file (e.g., assets/css/main.css) to point to your layer's components and pages:

@import "tailwindcss";
@import "@nuxt/ui";
@source "../components";
@source "../pages";

Adjust the paths as needed to match your layer's structure. This ensures Tailwind will process the classes used in your layer and generate the correct CSS. Without this, only classes used in the .playground directory will be included in the final CSS, which is why your custom classes like bg-blue-200 are missing their styles Nuxt UI Theme: @source directive.

Summary of steps:

1. Add the @source directive(s) to your main CSS file in .playground.
2. Restart your dev server to ensure Tailwind picks up the changes.

This should resolve the issue and apply Tailwind styles to your layer components when developing in the .playground environment.

If you continue to have issues, double-check the relative paths and ensure your workspace is set up so that the .playground app can access the layer's files.

Reference: Nuxt UI Theme: @source directive

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@reef night Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[reef night]

@maiden shadow , this works when running the .playground. When I want to integrate this layer into another app, The main.css is not found and I'm not sure which path I should set. '#layers/base/assets/css/main.css' sadly doesn't work.

[maiden shadow]

Let me check the knowledge base for you again. One moment! :books:

---

When integrating a Nuxt layer into another app, referencing the layer’s CSS (like main.css) can be tricky due to how Nuxt resolves paths and aliases in layers. According to the Nuxt documentation, when importing CSS in a layer’s nuxt.config.ts, relative paths are resolved relative to the consuming (user) project, not the layer itself. This means that paths like ./assets/css/main.css or even aliases like #layers/base/assets/css/main.css may not work as expected from within the layer’s config.

Recommended approach:
To ensure the CSS file from your layer is correctly included when the layer is used in another app, you should use a fully resolved path in the layer’s nuxt.config.ts. The Nuxt docs suggest using Node’s path and url modules to resolve the path at runtime:

// nuxt.config.ts in your layer
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

This ensures that the path to main.css is always correct, regardless of where the layer is used or imported from. This is the officially recommended workaround for this scenario Relative Paths and Aliases.

Summary:

• Use a fully resolved path for CSS in your layer’s nuxt.config.ts.
• Do not rely on relative paths or layer aliases, as they resolve relative to the consuming project.

If you follow this pattern, your layer’s CSS should be correctly included in any Nuxt app that uses your layer.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@reef night Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[reef night]

@maiden shadow , just for understanding... what would be the best practice in an monorepo setup where I want to build my custom ui layer which can be consumed by different apps which might need different styling.

[maiden shadow]

Let me check the knowledge base for you again. One moment! :books:

---

In a monorepo setup where you want to build a custom UI layer to be consumed by different Nuxt apps—each potentially needing different styling—the best practice, according to the Nuxt and Nuxt UI documentation, is:

1. Encapsulate your base design system and components in the layer.
   Define your default theme, component styles, and design tokens (using Tailwind CSS, CSS variables, and AppConfig) within the layer. This makes your UI layer reusable and consistent across projects Nuxt UI Flexible Design System.

2. Allow per-app customization via AppConfig overrides.
   Each consuming app can override the layer’s default theme and component styles by providing its own app.config.ts. For example, you can override color aliases, component slot classes, or even variants at the app level without modifying the layer itself Customize Nuxt UI Theme.

   // In the consuming app's app.config.ts
   export default defineAppConfig({
     ui: {
       colors: {
         primary: 'indigo',
         secondary: 'pink',
         // ...other overrides
       },
       button: {
         slots: {
           base: 'font-bold'
         }
       }
     }
   })
   

3. Use Tailwind’s @source directive for content detection.
   In each app, ensure your main CSS file includes @source directives pointing to the relevant directories (including those from the layer) so Tailwind generates the correct CSS for all used classes Nuxt UI Theme: @source directive.

4. Reference CSS files in the layer using fully resolved paths.
   When including CSS from your layer, use a fully resolved path in the layer’s nuxt.config.ts to ensure it works regardless of where the layer is consumed Relative Paths and Aliases.

This approach gives you a strong, maintainable foundation:

• The UI layer provides shared components and a default design system.
• Each app can override styles and tokens as needed, without forking or duplicating the layer.
• Tailwind CSS generates only the necessary styles for each app, including those from the layer.

In summary:

• Build your UI layer with defaults and design tokens.
• Let each app override styles via AppConfig.
• Use @source for Tailwind content detection.
• Reference CSS with resolved paths for portability.

This is the recommended and supported pattern in the Nuxt ecosystem for scalable, customizable UI layers in a monorepo Nuxt UI Flexible Design System, Customize Nuxt UI Theme, Relative Paths and Aliases.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@reef night Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[reef night]

@maiden shadow , does my app also need a main.css?

[maiden shadow]

Let me check the knowledge base for you again. One moment! :books:

---

No, your app does not strictly need its own main.css if your Nuxt layer already provides all the necessary global styles and imports (such as Tailwind CSS and your UI layer’s CSS). When you include a layer in your Nuxt app, the CSS files specified in the layer’s nuxt.config.ts will be included automatically.

However, if you want to add additional custom styles specific to your app, you can create a main.css in your app’s assets/css/ directory and include it via the css property in your app’s nuxt.config.ts Nuxt Styling Docs. This is optional and only needed if you have app-specific styles that are not covered by your layer.

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

So, you only need a main.css in your app if you want to add or override styles beyond what your layer provides. If the layer’s styles are sufficient, your app does not need its own main.css Nuxt Styling Docs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: