Nuxt•7mo ago

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 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 directive within the <style> tag of each component (@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"));

15 Replies

kapa.ai•7mo ago

Hi @Dawit. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up Tailwind CSS v4 within a Nuxt module and ensure your runtime components have access to Tailwind classes, you should: 1. Inject Tailwind CSS via a CSS file: Add your CSS file (with Tailwind directives) to nuxt.options.css in your module setup. This ensures Tailwind's base styles and utilities are globally available.

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

   export default defineNuxtModule({
     setup(options, nuxt) {
       const resolver = createResolver(import.meta.url)
       nuxt.options.css.push(resolver.resolve('./runtime/assets/css/main.css'))
     }
   })

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

   export default defineNuxtModule({
     setup(options, nuxt) {
       const resolver = createResolver(import.meta.url)
       nuxt.options.css.push(resolver.resolve('./runtime/assets/css/main.css'))
     }
   })

2. Add the Tailwind Vite plugin: Since @nuxtjs/tailwindcss does not support Tailwind v4, you should add the Tailwind Vite plugin programmatically, as you are doing:

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

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

3. Content detection for Tailwind: The main issue is that Tailwind v4 uses a CSS-first approach and relies on content detection to generate the necessary utility classes. If your runtime components are not included in Tailwind's content scan, their classes won't be generated. - In a Nuxt module, you can use the Vite plugin's content option to explicitly include your runtime components. For example, when installing the plugin, pass a content configuration that points to your runtime folder:

     await import('@tailwindcss/vite').then((r) => addVitePlugin(r.default({
       content: [
         resolver.resolve('./runtime/components/**/*.{vue,js,ts}'),
         // add other relevant paths
       ]
     })))

     await import('@tailwindcss/vite').then((r) => addVitePlugin(r.default({
       content: [
         resolver.resolve('./runtime/components/**/*.{vue,js,ts}'),
         // add other relevant paths
       ]
     })))

- Alternatively, you can use the @source directive in your CSS to tell Tailwind where to look for classes, as described in the Nuxt UI docs:

     @import "tailwindcss";
     @import "@nuxt/ui";
     @source "../runtime/components";

     @import "tailwindcss";
     @import "@nuxt/ui";
     @source "../runtime/components";

This is the recommended way in Tailwind v4 to ensure all your component classes are detected and included in the build, rather than using @reference in each component, which is more of a workaround and not the intended approach for global utility access Nuxt UI Theme Docs. Summary:
- Inject your Tailwind CSS file globally via nuxt.options.css. - Add the Tailwind Vite plugin. - Use the content option or the @source directive in your CSS to ensure Tailwind scans your runtime components for class usage. - Avoid using @reference in every component; prefer the global approach with @source or proper content configuration. This approach aligns with the recommended practices for Tailwind CSS v4 and Nuxt module development Nuxt UI Theme Docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

DawitOP•7mo ago

@source '../../components' was all I needed. @kapa.ai Given the setup with Tailwind 4, how can I add Shadcn-Vue to my module so I can create components based on it?

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain any information about integrating Shadcn-Vue with Tailwind CSS 4 or Nuxt modules. The available documentation covers theming with Tailwind CSS v4, using the @source directive, and customizing Nuxt UI components, but does not mention Shadcn-Vue or how to use it within a Nuxt module setup Nuxt UI Theme Docs. If you need guidance specifically for Shadcn-Vue integration, you may need to consult the official Shadcn-Vue or Nuxt documentation, as the current knowledge sources do not provide this information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

DawitOP•7mo ago

@kapa.ai Is it possible to use @/* path aliases when working on modules?

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, it is possible to use @/* path aliases when working on Nuxt modules, but there are important caveats: - The @ and ~ aliases in Nuxt resolve to the user's project srcDir by default, not the module or layer's own directory. This means that if you use @/something in your module code, it will resolve relative to the consuming project's source directory, not your module's files Relative Paths and Aliases. - If you want to reference files within your module or layer, you should use relative paths or define your own custom aliases. For example, use ./runtime/components or set up a named alias for your module's internal files. - When authoring Nuxt layers or modules, you can enable the experimental localLayerAliases feature (enabled by default) to resolve @, ~, @@, and ~~ relative to the layer's source and root directories, but this is specific to layers and not general module development localLayerAliases. Summary:
You can use @/* in modules, but it will point to the user's project, not your module. For module-internal imports, use relative paths or custom aliases. If you need to import files within your module, do not rely on @/*—use relative paths or set up your own alias in the module code Relative Paths and Aliases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

DawitOP•7mo ago

@kapa.ai Currently, shadcn-vue uses @/* aliases as a starting point when adding new components and references other utils using those aliases. They are defined in components.json file. How does it work in such cases?

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When a library like shadcn-vue uses @/* aliases in its component templates or configuration (such as in a components.json file), those aliases are expected to resolve to the consuming Nuxt project's srcDir by default. In Nuxt, the @ and ~ aliases both point to the project's source directory, not to the directory of a module or an external package. This means: - If shadcn-vue components reference @/utils/foo, Nuxt will try to resolve that path relative to the user's project, not the shadcn-vue package or your module. - For these imports to work, the expected files or directories must exist in the consuming project's structure, or the user must configure their own aliases to point to the correct locations. This behavior is confirmed in the Nuxt documentation and community discussions, which clarify that @ and ~ are always resolved relative to the user's project, not to a module or layer, unless the experimental localLayerAliases feature is used within a layer context Relative Paths and Aliases localLayerAliases. In summary:
If shadcn-vue or any other library uses @/* aliases, those paths will resolve to the user's project by default. If you are developing a Nuxt module and want to use shadcn-vue components that rely on these aliases, you must ensure that the consuming project has the necessary files at those paths, or you need to adjust the aliases accordingly. There is no automatic remapping of @/* to point inside the module or package itself. If you need to reference files within your own module, use relative paths or define custom aliases, as @/* will not point to your module's files Relative Paths and Aliases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

DawitOP•7mo ago

@kapa.ai localLayerAliases seems to only apply for layers not modules.

kapa.ai•7mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct: according to the knowledge sources, the localLayerAliases feature is specifically described as resolving ~, ~~, @, and @@ aliases within layers, with respect to their layer source and root directories. The documentation and examples provided only mention its effect in the context of layers, not general Nuxt modules localLayerAliases localLayerAliases API. There is no explicit information in the knowledge sources indicating that localLayerAliases applies to regular Nuxt modules. Therefore, based on the available documentation, localLayerAliases is intended for use with layers, not modules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

BenG•4mo ago

The provided info mostly good, but it seems to be better to use nuxt.options.css.unshift(resolver.resolve('./runtime/assets/css/main.css')) so your project css is not getting overriden with the multiple import tailwind in the css. Shadcn just works with this way as usual.

Gaming

Programming

Using Tailwind CSS 4 within a Nuxt Module

Did you find this page helpful?