NuxtN
Nuxt•5mo ago•
8 replies
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


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