NuxtN
Nuxt•6mo ago•
9 replies
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'],
})


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
  },
})


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.
Was this page helpful?