Nuxt•7mo ago•

8 replies

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

apps

and

packages

packages

.
I want to use

tailwindcss v4

tailwindcss v4

and

shadcn-vue

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

tailwindcss

and

@tailwindcss/vite

@tailwindcss/vite

in the

ui

ui

package.
I also extended the

ui

ui

package in

apps/www

apps/www

.
The shadcn components work and appear with styles on the

apps/www

apps/www

, but when I try to add tailwind styles on

apps/www

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

tailwindcss

and

@tailwindcss/vite

@tailwindcss/vite

again in

apps/www

apps/www

? If yes, why since I am extending

ui

ui

package:

extends: ['@nuxt-supabase-monorepo-boilerplate/ui']

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/";

@source "../../../../../apps/";

to my tailwind.css file kinda works, but maybe not the ideal solution.

Nuxt•7mo 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

apps

and

packages

packages

.
I want to use

tailwindcss v4

tailwindcss v4

and

shadcn-vue

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

tailwindcss

and

@tailwindcss/vite

@tailwindcss/vite

in the

ui

ui

package.
I also extended the

ui

ui

package in

apps/www

apps/www

.
The shadcn components work and appear with styles on the

apps/www

apps/www

, but when I try to add tailwind styles on

apps/www

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

tailwindcss

and

@tailwindcss/vite

@tailwindcss/vite

again in

apps/www

apps/www

? If yes, why since I am extending

ui

ui

package:

extends: ['@nuxt-supabase-monorepo-boilerplate/ui']

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/";

@source "../../../../../apps/";

to my tailwind.css file kinda works, but maybe not the ideal solution.

Nuxt 4 Layer (ui package) and TailwindCSS v4

Nuxt 4 Layer (ui package) and TailwindCSS v4

Similar Threads

Similar Threads

Similar Threads