N
Nuxt•2mo ago
Kérunix

Override Layer tailwind config from extending app.

I'm building a monorepo with a UI layer consisting of mainly Shadcn-Vue components, that I'm extending in multiple apps in the monorepo. I want each app to be able to override the layer's default tailwind config if necessary. For now the issue I'm facing is that the styles from my layer are not referenced correctly in the app. My layer's nuxt.config.ts 
import tailwindcss from '@tailwindcss/vite'
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

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

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  css: [join(currentDir, './app/assets/css/tailwind.css')],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  modules: ['shadcn-nuxt'],
})
import tailwindcss from '@tailwindcss/vite'
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

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

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  css: [join(currentDir, './app/assets/css/tailwind.css')],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  modules: ['shadcn-nuxt'],
})
and my app's nuxt.config.ts 
import tailwindcss from "@tailwindcss/vite";
import { fileURLToPath } from 'url'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  extends: ['@my-monorepo/ui'],
  vite: {
    plugins:
      [tailwindcss(),],
  },
  css: ['~/assets/css/main.css'],
  alias: {
    '@ui': fileURLToPath(new URL('../../packages/ui', import.meta.url)) // adjust path
  },
})
import tailwindcss from "@tailwindcss/vite";
import { fileURLToPath } from 'url'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  extends: ['@my-monorepo/ui'],
  vite: {
    plugins:
      [tailwindcss(),],
  },
  css: ['~/assets/css/main.css'],
  alias: {
    '@ui': fileURLToPath(new URL('../../packages/ui', import.meta.url)) // adjust path
  },
})
With this setup, when running the app's dev server, I can see both a main.css and a tailwind.css file being served in my devtool, but no style is applied to the component.
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Kérunix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—layer styles not being applied in the extending app—matches known challenges with Nuxt Layers and Tailwind CSS integration. The main problem is that Tailwind’s content scanning and CSS generation can break when using layers, especially if the app and the layer each have their own Tailwind setup or if Tailwind isn’t scanning all relevant files. Key points and solutions from the knowledge sources: 1. Tailwind Content Scanning in Layers:
Tailwind only generates CSS for classes it finds in files it scans. If your base layer (UI package) contains components with Tailwind classes, but your app’s Tailwind config doesn’t scan those files, the classes won’t be included in the final CSS. This is a common pitfall in monorepo/layer setups.
“...if I have a component in my base such as:
<button class="bg-red-500"> Button </button>
and bg-red-500 did not exist in the app using this shared component, the styles would not work. I think it’s something absolutely to do with the way tailwind is processing [read: scanning] the files.”
“✅ This seemed to fix it for me:
@import "tailwindcss";
@import "tw-animate-css";
@source "../../app/components/**/*"; /* <--- this line */
@import "tailwindcss";
@import "tw-animate-css";
@source "../../app/components/**/*"; /* <--- this line */

Where the @source directive is telling tailwind to scan my components directory inside my layer.”
Nuxt Layers not processing CSS correctly from base layer 2. How to Fix:
- Use the @source directive in your CSS to explicitly tell Tailwind to scan your layer’s components and any other relevant directories. - Make sure only one Tailwind instance is responsible for generating the CSS, or ensure both are configured to scan all needed files. - In your app’s main.css (or the layer’s CSS), add: 
     @import "tailwindcss";
     @source "../../packages/ui/components/**/*";
     
     @import "tailwindcss";
     @source "../../packages/ui/components/**/*";
Adjust the path as needed to point to your layer’s components directory. 3. Overriding Tailwind Config:
The knowledge sources do not provide a direct, Nuxt-native way to merge or override Tailwind configs between a layer and an app. Tailwind config merging is not handled automatically by Nuxt Layers; you must ensure the extending app’s Tailwind config includes all relevant content paths (including those from the layer) and any overrides you want. 4. Relative Paths in Layer Configs:
When referencing files in a layer’s nuxt.config.ts, use fully resolved paths (as you are doing) to avoid issues with path resolution in the extending app
Relative Paths and Aliases. Summary of steps to resolve: - In your app’s Tailwind config, add the layer’s components directory to the content array. - In your CSS (either in the app or the layer), use the @source directive to ensure Tailwind scans the layer’s files. - Avoid having two separate Tailwind CSS builds; ideally, the app should control the Tailwind build and scan all relevant files. Limitation:
The knowledge sources do not describe a built-in Nuxt mechanism for merging Tailwind configs between layers and apps. Manual configuration is required. If you follow the above steps, your layer’s styles should be correctly applied in the extending app. If you need per-app overrides, do so in the app’s Tailwind config, ensuring it still scans the layer’s files for class usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@189762782642569217> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lewis
Lewis•2mo ago
hey @Kérunix did you manage to figure this one out?
Kérunix
KérunixOP•2mo ago
I went with the "app scans everything and is in charge of the tailwind stuff" approach. Basically I don't have a tailwind.css file in my UI Layer, and my apps all have a tailwind.css file with their own design tokens as css variables, but they also all scan the UI Layer directory to generate the CSS, ultimately generating classes for all the Shadcn-vue components, whether my app uses them or not. This is fine by me since my apps are quite large and use almost (if not all) the components defined in my UI layer, but you might want to look at something else if the CSS file size becomes an issue for you.
Lewis
Lewis•2mo ago
ah I see I don't think that'll be possible for me thanks!

Did you find this page helpful?