N
Nuxt•3mo ago
S22y

tailwind css cannot be used in the module

I added a hook to introduce tailwind but didn't seem to take effect /modules/hello/runtime/components tailwind components use in the name of the class is still not effective. 
nuxt.hook("vite:extend", async ({ config }) => {
    const plugin = await import("@tailwindcss/vite").then((m) => m.default);
    config.plugins ||= [];
    config.plugins.push(plugin());
});
nuxt.hook("vite:extend", async ({ config }) => {
    const plugin = await import("@tailwindcss/vite").then((m) => m.default);
    config.plugins ||= [];
    config.plugins.push(plugin());
});
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @S22y. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not mention using the @tailwindcss/vite plugin directly in a Nuxt module or via a Vite hook. Instead, the recommended way to enable Tailwind CSS in a Nuxt module is to use Nuxt's built-in module system and the official @nuxtjs/tailwindcss module. To add Tailwind CSS support in your custom Nuxt module, you should use the installModule utility from @nuxt/kit to install @nuxtjs/tailwindcss and configure it as needed. Here is an example from the official documentation: 
import { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({
  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'))

    await installModule('@nuxtjs/tailwindcss', {
      // module 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({
  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'))

    await installModule('@nuxtjs/tailwindcss', {
      // module configuration
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
  },
})
This approach ensures that Tailwind CSS is properly integrated into the Nuxt build process and will work for components in your module. Using the Vite plugin directly is not the recommended or supported way in Nuxt, and may not work as expected because Nuxt manages Vite and Tailwind integration internally through its module system Using Other Modules in Your Module. If you follow this pattern and Tailwind classes are still not effective, double-check that your CSS file includes the Tailwind directives and that the content paths include your module's components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@386803087471542272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?