N
Nuxt•2d ago
psycarlo

Nuxt 4 Layer (ui package) and TailwindCSS v4

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
// 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')
  },
})
// 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/";
@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.
4 Replies
kapa.ai
kapa.ai•2d ago
Hi @psycarlo. 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";
    
    @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/**/*";
  
  /* 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). 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/**/*";
  
  @import "tailwindcss";
  @import "@nuxt/ui";
  /* or @import "@nuxt/ui-pro"; */
  @source "../pages/**/*";
  @source "../components/**/*";
  @source "../layouts/**/*";
(Nuxt UI install for Nuxt, Theme: @source, Nuxt UI Pro install). 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, Tailwind v4 in Nuxt UI docs with @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: ----------------------
kapa.ai
kapa.ai•2d ago
<@277428305756422144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
psycarlo
psycarloOP•2d ago
🤔 Note 3: https://tailwindcss.nuxtjs.org/ will have Nuxt 4 support in v7.0.0
33lbs
33lbs•7h ago
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" }

Did you find this page helpful?