Nuxt Module - Tailwind V4

[whole carbon]

Hey !
I'm trying to use Tailwind in a Nuxt module, in the part where I installed the module
In the project where I installed my module, I can use Tailwind,
but inside the module itself, I can't.
Could you please tell me how to make it work?

[tawdry plover]

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

---

I understand you're trying to use Tailwind CSS v4 within a Nuxt module you're developing, and while it works in the project where you installed your module, it's not working inside the module itself.

To properly use Tailwind CSS v4 in your Nuxt module, you need to follow a specific approach:

Using Tailwind CSS v4 in a Nuxt Module

You can use the installModule utility from Nuxt Kit to add Tailwind CSS to your module. Here's how to set it up:

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

export default defineNuxtModule({
  async setup (options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

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

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

Nuxt Module Guide

Important Considerations for Tailwind CSS v4

Since you're specifically working with Tailwind CSS v4, keep in mind that it uses a CSS-first configuration approach rather than the JavaScript configuration used in v3:

1. Create a CSS file in your module (e.g., ./runtime/assets/styles.css) that includes:

@import "tailwindcss";

@theme static {
  /* Your theme customizations */
}

2. Make sure to properly set up the content paths in your module to include all the files where you'll be using Tailwind classes.

3. Be aware that there have been some issues reported with Tailwind v4 and HMR in server components, which might be fixed in recent Nitro updates. If you encounter similar issues, you might need to update your dependencies.

Tailwind v4 HMR Issue

If you're still having trouble, consider checking if there are any conflicts with other UI libraries in your module, as Tailwind can sometimes interfere with pre-styled components from other libraries.

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

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

[river inlet]

@whole carbon Do you import in the main.css of your module playground?

@import "tailwindcss";

What exactly is the problem, the classes are not applied?

[whole carbon]

What I’m trying to do is have my module register Tailwind, so that I can use it not only inside the module itself (for example, in button.vue),
but also in the project that uses the module (like the playground).

Right now, Tailwind works fine in the playground,
but I can’t use it inside my module.

[river inlet]

But your playground uses your module normally, doesn't it?

export default defineNuxtConfig({
  modules: ['../src/module'],
  myModule: {},
  devtools: { enabled: true },
})

[whole carbon]

yes !

[river inlet]

And the architecture of your playground doesn't seem conventional to me. Did you use the starter module?

https://github.com/nuxt/starter/tree/module

[whole carbon]

I did start from the starter template, I changed a couple of things, but it’s basically the same overall

[river inlet]

So can you send the nuxt.config.ts of your playground and maybe try not to use the button tag but instead, just to try something:

<component :is="button" ... />

[whole carbon]

my nuxt.config.ts of my playground :

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    srcDir: 'source',
    devtools: {
        enabled: true
    },
    modules: ['../src/module'],
    devServer: {
        port: 3000,
        host: '127.0.0.1'
    }
});

i try <component

wait

nop is the same

[river inlet]

Ok try in your tailwind import to specify the source tailwind will use in dev we do this on NuxtUI because the package is not yet installed it doesn't scan the files above it

@import "tailwindcss" 
source("../../../../../");

Et oui ? 😂

[whole carbon]

omg le monde est petit

[river inlet]

Alors oui mais toi je sais pas qui t'es avec le pseudo 😂

[whole carbon]

pardon c'est nicolas ! j'etais dans la meme promo que Arthur je sais pas si tu te rappelle

[whole carbon]

effectivement c'etait ça !

[river inlet]

Ah ben ouais carrément mdr mais toi t'es dans le back normalement, tu me fais quoi à installer du Tailwind via module nuxt la 😂

[whole carbon]

😂 bah ecoute j'essaye de faire un peu de front ça me change je peux pas reste indefiniment dans le back et puis le front c'est tellement interessant aussi

et quoi de mieux que de faire un petit module ui pour ma boite

[river inlet]

Ah ouais clairement, ben c'est trop bien !

[whole carbon]

Et toi surtout tout vas bien ?!

Et d’ailleurs j’ai oublié

[river inlet]

Ben je suis chez Nuxtlabs du coup ouais 🤌

[whole carbon]

Mais merci beaucoup pour mon problème ❤️❤️

[whole carbon]

Si je me trompe pas c’est l’équipe derrière nuxt et les packages officiels @nuxt?

Troooop bien !

[river inlet]

Yes ! Par contre il vaut mieux parler en MP ici c'est pas trop l'endroit 😅

[whole carbon]

my bad desole merci encore pour l'aide !

[river inlet]

Ah non non !

tkt

[whole carbon]

je close le post alors !

[river inlet]

Non tu peux le laisser au cas ou quelqu'un aurait le problème !