safe horizon
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());
});
wraith sirenBOT
Hi @safe horizon. 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}'),
],
},
},
})
},
})
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.