NuxtUI in NuxtModule

[desert wren]

I'm having trouble getting NuxtUI to work in a NuxtModule.
Tailwind itself works, but specific things like h-50, which work fine in the main project, don't work in the module. Does anyone have any idea?

[grim lark]

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

---

This is a known issue when using Tailwind CSS (and Nuxt UI) inside a Nuxt module: Tailwind only scans files it knows about, so utility classes used in your module's runtime components won't be detected unless you explicitly tell Tailwind where to look.

The Solution: Register Your Module's Source Files

When building a Nuxt module that depends on @nuxtjs/tailwindcss, you need to tell Tailwind to scan your module's component files. You can do this using the moduleDependencies option in your module definition:

import { createResolver, defineNuxtModule } from '@nuxt/kit'

const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: {
    name: 'my-module',
  },
  moduleDependencies: {
    '@nuxtjs/tailwindcss': {
      defaults: {
        config: {
          content: {
            files: [
              resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
              resolver.resolve('./runtime/*.{mjs,js,ts}'),
            ],
          },
        },
      },
    },
  },
  setup(options, nuxt) {
    // Optionally inject a CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
  },
})

[Use Other Modules]

This ensures Tailwind scans your module's runtime files for utility classes like h-50, so they get included in the final CSS output.

Note: The moduleDependencies option replaces the deprecated installModule function and handles proper setup order and configuration merging. [Use Other Modules]

If you are using Nuxt UI (which uses Tailwind CSS v4 with @source directives), a similar approach applies — Nuxt UI automatically generates @source directives for Nuxt Layers, but for custom modules you need to ensure your module's files are included in Tailwind's scanning. [Nuxt Installation]

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

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

[desert wren]

@grim lark i building an module depending on nuxt/ui. not on tailwindcss

[grim lark]

Let me check the knowledge base for you again. One moment! :books:

---

Good clarification! If your module depends on @nuxt/ui (not @nuxtjs/tailwindcss directly), you can declare that dependency using moduleDependencies in the same way:

import { createResolver, defineNuxtModule } from '@nuxt/kit'

const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: {
    name: 'my-module',
  },
  moduleDependencies: {
    '@nuxt/ui': {
      version: '>=4.0.0', // optional: specify a version constraint
    },
  },
  setup(options, nuxt) {
    // your module logic here
  },
})

[Use Other Modules]

However, regarding the specific issue of Tailwind utility classes (like h-50) not working in your module's runtime components — the knowledge sources do not explicitly describe a solution for this when depending on @nuxt/ui specifically (as opposed to @nuxtjs/tailwindcss).

What the docs do mention is that Nuxt UI automatically generates @source directives for Nuxt Layers, ensuring Tailwind CSS scans layer source files. [Nuxt Installation] However, this behavior is described for Nuxt Layers, not custom modules.

Nuxt UI v4.1+ also has an experimental.componentDetection option that scans source code to detect which components are used and generates the necessary CSS — but again, this is scoped to the main app's source, not a custom module's runtime files. [Options]

I'm sorry, but the knowledge sources don't contain enough detail to give you a definitive solution for making Tailwind classes from a module's runtime components work when depending on @nuxt/ui specifically. I'd recommend checking the Nuxt UI GitHub issues or their documentation for module authors for more targeted guidance.

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