#Nuxt 4 Layer (ui package) and TailwindCSS v4

1 messages · Page 1 of 1 (latest)

tough sundial
#

I am creating a nuxt v4 monorepo template to help people getting started: https://github.com/Psycarlo/nuxt-supabase-monorepo-boilerplate

It's a monorepo with apps and packages.
I want to use tailwindcss v4 and shadcn-vue.

Trying to setup these, I encountered a roadblock. (I used this article as reference: https://medium.com/@davvii/nuxt-layers-shadcn-vue-with-tailwind-v4-58a57bf63cd0)

The Problem
I install tailwindcss and @tailwindcss/vite in the ui package.
I also extended the ui package in apps/www.
The shadcn components work and appear with styles on the apps/www, but when I try to add tailwind styles on apps/www it does not work:

// apps/www/app/pages/index.vue
<h1 class="text-blue-700">Hello</h1> // does not work
<UiButton>Button</UiButton> // work

Do I really need to install tailwindcss and @tailwindcss/vite again in apps/www? If yes, why since I am extending ui package: extends: ['@nuxt-supabase-monorepo-boilerplate/ui']

If not, what am I missing?

Config file

// packages/ui/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-09-01',
  css: [join(currentDir, './app/assets/css/tailwind.css')],
  vite: {
    plugins: [
      tailwindcss()
    ]
  },
  devtools: { enabled: true },
  modules: ['shadcn-nuxt'],
  shadcn: {
    prefix: '',
    componentDir: join(currentDir, './components/ui')
  },
})

Tailwind.css File

@import "tailwindcss" source(none);
@import "tw-animate-css";

@source "../../components/";

Note: Adding @source "../../../../../apps/"; to my tailwind.css file kinda works, but maybe not the ideal solution.

pale spokeBOT
#

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

#

Short answer: you don’t need to install Tailwind again in apps/www, but you must ensure Tailwind v4 sees the app’s source files and that the CSS from your layer is loaded in the app.

Checklist:

  • Ensure the layer provides a CSS entry that imports Tailwind v4, and the app loads it.
    • In the layer: create app/assets/css/main.css with:
      @import "tailwindcss";
      Then expose it via css in the layer’s nuxt.config.ts, which you already do (css: ['./app/assets/css/tailwind.css']). In the app, just extending the layer should include that CSS (Nuxt layers merge configs) (Authoring Nuxt Layers).
  • Tell Tailwind v4 where to scan for classes used in the app. With v4’s CSS-first approach, add @source rules in the CSS that’s actually imported (your layer’s CSS), so Tailwind picks up classes from the extending app:
    /* in packages/ui/app/assets/css/tailwind.css */
@import "tailwindcss";
#

/* include the extending app’s paths /
@source "../components/**/";
@source "../layouts//*";
@source "../pages//*";

This pattern was necessary for a similar layers issue and fixed missing styles due to content detection ([Nuxt issue: Layers not processing CSS correctly](<https://github.com/nuxt/nuxt/issues/32575>)). If your folder structure differs, adjust the relative paths so they point from the CSS file to the app’s source.
- If you’re using Nuxt UI (or Nuxt UI Pro), import Tailwind and the UI CSS in that same CSS file and keep using @source as needed:

@import "tailwindcss";
@import "@nuxt/ui";
/* or @import "@nuxt/ui-pro"; /
@source "../pages/**/";
@source "../components//*";
@source "../layouts//*";

([Nuxt UI install for Nuxt](<https://ui.nuxt.com/getting-started/installation/nuxt>), [Theme: @source](<https://ui.nuxt.com/getting-started/theme#source>), [Nuxt UI Pro install](<https://ui.nuxt.com/getting-started/installation/pro/nuxt>)).

Why this is needed: Tailwind v4 auto-detects sources, but in monorepos and layers it often misses files outside the package where Tailwind runs. Adding @source ensures your app’s classes like text-blue-700 are compiled into CSS ([External configuration approach in Nuxt 4](<https://nuxt.com/docs/4.x/getting-started/configuration#external-configuration-files>), [Tailwind v4 in Nuxt UI docs with @source](<https://ui.nuxt.com/getting-started/theme#source>)).

You don’t need to duplicate Tailwind or the Vite plugin in apps/www if:
- the app extends the layer,
- the layer’s CSS is included,
- and @source covers the app’s files.
#

If you upgrade to Nuxt UI Pro (optional), replace @nuxt/ui CSS import with @nuxt/ui-pro in your CSS as shown in the docs (Replace CSS import, Pro for Nuxt).

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

#

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

tough sundial
lofty galleon
#

The issue you might be running into is that you think the components are working when they actually aren't because the styles them selves are directly connected to tailwind, I also thought that.

you're going to need @tailwindcss/vite in your nuxt.config.ts
Same with "css: ["@/assets/css/tailwind.css"]"

also unless you really messed around with you aliases you need to use "@/components/ui"

this is my components.json

{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "new-york",
"typescript": true,
"tailwind": {
"config": "",
"css": "@/assets/css/tailwind.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"composables": "@/composables",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib"
},
"iconLibrary": "lucide"
}