Nuxt•5d ago

Nuxt Module - Tailwind V4

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?

27 Replies

kapa.ai•5d ago

Hi @Necrelox. 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}')
          ]
        }
      }
    })
  }
})

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 */
}

@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: ----------------------

kapa.ai•5d ago

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

NecreloxOP•5d ago

HugoRCD•5d ago

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

@import "tailwindcss";

@import "tailwindcss";

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

NecreloxOP•5d ago

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.

HugoRCD•5d ago

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

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

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

NecreloxOP•5d ago

yes !

HugoRCD•5d ago

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

GitHub

GitHub - nuxt/starter at module

Create a new Nuxt project, module, layer or start from a theme with our collection of starters. - GitHub - nuxt/starter at module

NecreloxOP•5d ago

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

HugoRCD•5d ago

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

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

NecreloxOP•5d ago

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'
    }
});

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

HugoRCD•5d ago

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("../../../../../");

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

Et oui ? 😂

NecreloxOP•5d ago

omg le monde est petit

HugoRCD•5d ago

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

NecreloxOP•5d ago

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

HugoRCD•5d ago

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 😂

NecreloxOP•5d ago

😂 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

HugoRCD•5d ago

Ah ouais clairement, ben c'est trop bien !

NecreloxOP•5d ago

Et toi surtout tout vas bien ?! Et d’ailleurs j’ai oublié

HugoRCD•5d ago

Ben je suis chez Nuxtlabs du coup ouais 🤌

NecreloxOP•5d ago

Mais merci beaucoup pour mon problème ❤️❤️ Si je me trompe pas c’est l’équipe derrière nuxt et les packages officiels @nuxt? Troooop bien !

HugoRCD•5d ago

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

NecreloxOP•5d ago

my bad desole merci encore pour l'aide !

HugoRCD•5d ago

Ah non non ! tkt

NecreloxOP•5d ago

je close le post alors !

HugoRCD•5d ago

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

NecreloxOP•5d ago

Fix with

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

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

Thanks @HugoRCD

Gaming

Programming

Nuxt Module - Tailwind V4

Did you find this page helpful?