Using Tailwind CSS 4 within a Nuxt Module

I'm working on a Nuxt module. Does anyone know how to set up Tailwind CSS 4 within a module in order to create and expose components in the runtime folder? I understand the

@nuxtjs/tailwindcss

@nuxtjs/tailwindcss

@nuxtjs/tailwindcss

@nuxtjs/tailwindcss module currently doesn't support Tailwind CSS 4, so Tailwind CSS is set up using the Vite plugin. The code I have below kinda sets up Tailwind. It applies the resets and stuff, but any classes used in components are not applied be default. I found what I consider to be a workaround which is to use the

@reference

@reference

@reference

@reference directive within the

<style>

<style>

<style>

<style> tag of each component (

@reference '../assets/css/main.css'

@reference '../assets/css/main.css'

@reference '../assets/css/main.css'

@reference '../assets/css/main.css'), but I don't know if that's the proper way of doing things.

Here's a simplified version of the module what I have so far:

await import("@tailwindcss/vite").then((r) => addVitePlugin(r.default));

_nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));

await import("@tailwindcss/vite").then((r) => addVitePlugin(r.default));

_nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));

await import("@tailwindcss/vite").then((r) => addVitePlugin(r.default));

_nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));

await import("@tailwindcss/vite").then((r) => addVitePlugin(r.default));

_nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));

Using Tailwind CSS 4 within a Nuxt Module

Similar Threads

Similar Threads

Similar Threads