Nuxt•2mo ago

Trying to install Tailwind nuxt module inside my own module but it's not working

Good morning/afternoon/evening! I've been struggling with this tailwind problem for some days, would be great if someone had some advice about it. I have a custom nuxt module at my company that works just fine. We now want to install Reka UI in order to use their components inside our project. I was able to install Reka Ui and the component's behaviour are ok but when I try to install tailwind to use their custom classes it does not work. Details: - I tried to install tailwind nuxt module. Checking the most recent documentation I'm using "moduleDependencies" inside module.ts . - I'm using nuxt 4.1.3 and nuxt module builder 1.02 - I added tailwind base, component and utilities at our main index.css I created a stackblitz with our package.json, module.ts and index.css to help! https://stackblitz.com/edit/github-measdfbv?file=src%2Fmodule.ts Note: Before trying within our own custom module I tried to install reka ui and the tailwind module in a newly created nuxt project (just nuxt, not nuxt module) and it worked just fine with the styles imported and everything

esterakamine@gmail.com

StackBlitz

Qgnijklvlb.Github (duplicated) - StackBlitz

A JavaScript project

12 Replies

kapa.ai•2mo ago

Hi @Tiemine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To install the Tailwind Nuxt module inside your own custom Nuxt module, you should use Nuxt Kit's installModule utility within your module's setup function. The moduleDependencies field is not mentioned in the official Nuxt documentation for this purpose. Here’s the recommended approach, based on the official Nuxt 4 documentation:

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    // Install the Tailwind module
    await installModule('@nuxtjs/tailwindcss', {
      // Example configuration
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
  },
})

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    // Install the Tailwind module
    await installModule('@nuxtjs/tailwindcss', {
      // Example configuration
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
  },
})

Key points: - Use installModule to programmatically add @nuxtjs/tailwindcss as a dependency of your module. - Make sure to inject your CSS file (with Tailwind directives) into nuxt.options.css. - The documentation does not mention using moduleDependencies for this use case. If you follow this pattern and Tailwind is still not working, double-check: - That your CSS file (with @import "tailwindcss/base";, etc.) is correctly referenced and exists. - That there are no conflicting configurations or duplicate Tailwind installations. - That your custom module is being loaded before you expect Tailwind styles to be available. If you need to see a working example, the code above is directly from the Nuxt 4 module author guide and should work as expected for integrating Tailwind into a custom module Using Other Modules in Your Module. If you are still experiencing issues, please ensure you are not using unsupported or undocumented fields like moduleDependencies for this purpose, as the knowledge sources do not mention them. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

TiemineOP•2mo ago

@kapa.ai I actually tried to use installModule before but I get this message that it's deprecated:

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct—recent changes in Nuxt have deprecated the use of installModule within custom modules. This is confirmed in the Nuxt repository, where it is stated:

we also deprecate installModule as it has some shortcomings: - it obscures the actual amount of time each module setup takes - it has no effect if the module is already installed - any options passed to it override the end user's configuration

feat(kit,nuxt,schema): allow modules to specify dependencies

Instead, Nuxt now recommends specifying dependencies using the new moduleDependencies option in your module definition. This allows Nuxt to handle module dependencies more transparently and reliably. However, the official documentation has not yet been fully updated to reflect this change, and there is limited detail on how to use moduleDependencies in practice. Summary:
- installModule is deprecated and should be avoided in new modules. - Use moduleDependencies in your module definition to declare dependencies like @nuxtjs/tailwindcss. - The knowledge sources do not provide a full example of moduleDependencies usage, but the deprecation of installModule is confirmed. If you need more detailed guidance on moduleDependencies, you may need to refer to the latest Nuxt source code or community discussions, as the official docs are still catching up with these changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

TiemineOP•2mo ago

@kapa.ai like I mentioned, I'm indeed already using moduleDependencies. I am using it like this: moduleDependencies: { "@nuxtjs/tailwindcss": { version: "^6.0.0", }, }, I s that the correct way?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, according to the official Nuxt documentation, your usage of moduleDependencies is correct. The recommended way to declare a module dependency (such as @nuxtjs/tailwindcss) in your custom module is as follows:

export default defineNuxtModule({
  meta: {
    name: 'your-module-name',
    // other meta fields...
  },
  moduleDependencies: {
    '@nuxtjs/tailwindcss': {
      version: '^6.0.0',
      // You can also specify `optional`, `overrides`, or `defaults` if needed
    },
  },
  setup(moduleOptions, nuxt) {
    // your setup logic
  }
})

export default defineNuxtModule({
  meta: {
    name: 'your-module-name',
    // other meta fields...
  },
  moduleDependencies: {
    '@nuxtjs/tailwindcss': {
      version: '^6.0.0',
      // You can also specify `optional`, `overrides`, or `defaults` if needed
    },
  },
  setup(moduleOptions, nuxt) {
    // your setup logic
  }
})

This matches the pattern shown in the Nuxt documentation for module authors Module Definition:

moduleDependencies: {
  'some-module': {
    version: '>=2',
    optional: true,
    overrides: {},
    defaults: {},
  },
},

moduleDependencies: {
  'some-module': {
    version: '>=2',
    optional: true,
    overrides: {},
    defaults: {},
  },
},

So, your usage is correct for declaring a dependency on @nuxtjs/tailwindcss with a version constraint. If you need to provide additional configuration or make the dependency optional, you can use the other fields as shown above. If Tailwind is still not working as expected, the issue may be elsewhere (such as CSS import order, configuration, or conflicts), but your moduleDependencies usage is correct per the current documentation Module Definition. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

TiemineOP•2mo ago

@kapa.ai so is there any good example of tailwind module being imported and used inside another a custom nuxt module?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, the only explicit example of importing and using the Tailwind module inside a custom Nuxt module uses the (now deprecated) installModule utility within the module's setup function. Here is the example from the Nuxt 4 documentation:

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    // Install the Tailwind module
    await installModule('@nuxtjs/tailwindcss', {
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
  },
})

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    // Install the Tailwind module
    await installModule('@nuxtjs/tailwindcss', {
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
  },
})

Using Other Modules in Your Module However, as you noted and as confirmed by the knowledge sources, installModule is now deprecated in favor of the moduleDependencies property in your module definition. Unfortunately, the knowledge sources do not provide a concrete, working example of using @nuxtjs/tailwindcss via moduleDependencies in a custom module. The documentation only shows the structure for moduleDependencies but does not demonstrate Tailwind specifically being used this way. Summary:
- There is a clear example using installModule (deprecated). - There is documentation for moduleDependencies, but no example specifically for Tailwind. - The knowledge sources do not contain a full, up-to-date example of using Tailwind via moduleDependencies in a custom Nuxt module. If you need a working example with moduleDependencies, you may need to consult community resources or Nuxt's source code directly, as the official documentation does not yet provide one. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

freb97•2mo ago

Hey @Tiemine The nuxt tailwind module is still on tailwind 3, if you want to use tailwind 4 you should probably install it with vite like they do in Nuxt UI: https://github.com/nuxt/ui/blob/v4/src/module.ts#L116

GitHub

ui/src/module.ts at v4 · nuxt/ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui

Gaming

Programming

Trying to install Tailwind nuxt module inside my own module but it's not working

Did you find this page helpful?