@source path blown up in module build
I have a module that utilizes tailwind 4 and has a source like-a-so:
When I build it gets transformed to
Any ideas?
3 Replies
Hi @Gary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It looks like your Tailwind v4 @source directive is being rewritten incorrectly during the module build, turning the glob into a broken string (losing // and the dot before vue).
From the provided sources, there’s no explicit documentation about @source path rewriting in Nuxt module builds, nor a known issue tied specifically to @source in Tailwind v4. I can’t confirm a built-in Nuxt transform that would intentionally change @source like that. I'm sorry, but the knowledge sources do not explicitly mention this behavior.
However, there are two relevant patterns and workarounds in Nuxt:
- In layers and packaged code, relative paths and aliases are often resolved relative to the consumer app, and Nuxt recommends using fully resolved absolute paths to avoid path mangling during builds. For example, compute a path with fileURLToPath/dirname/join and pass that into config. [Relative paths]
- For modules, the nuxt build-module command uses @nuxt/module-builder to produce a dist/ output. If a transform in your build setup (e.g., PostCSS/CSS processing or a minifier) is touching your CSS, anchoring the path with an absolute string should prevent accidental rewrites. [build-module; module-builder]
Practical workaround:
- Avoid relative globs inside @source in distributed CSS. Compute the absolute directory in your module and inject it into the CSS (or into Tailwind config if you control it) so Tailwind receives a stable path.
Example pattern (mirroring the layers doc approach):
- Resolve the directory at build time and emit CSS like:
@source "/absolute/path/to/your/module/src//*.vue"
If you must keep it relative, consider a named layer alias (as recommended for layers) and reference that alias, but note the sources do not show a direct example with @source. [Relative paths]
If this only happens when building the module (not when used locally), try:
- Running npx nuxt build-module with --sourcemap to inspect emitted CSS in dist and confirm where the rewrite happens. [build-module]
- Ensuring no CSS post-processing step is normalizing or minifying your CSS in a way that breaks globs.
Given the lack of explicit docs, if the absolute path workaround isn’t feasible, I’d suggest opening an issue with a minimal repro in the module-builder repo, since this may be an unintended transform during module packaging. [build-module]
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@477504252344795136> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
You don't need to include
**/*.vue, you can simply just do @source "../../../"