Nuxt•3mo ago

Include built CSS in module bundle

I'm building a UI Module based on Shadcn-vue and Tailwind. When using the playground app everything is fine since tailwind is installed in the module and can build the CSS correctly. But when using the module in a consuming app, I have no CSS for my module's components. Is there a way to provide CSS alongside my module code ? I tried to make tailwind build the CSS and add it to dist in the module build pipeline, but the module build process erases the css file, and fails if its missing (since its declared as an export in my package.json). Better yet, is there a way for my module to only provide components with tailwind classes, and let the tailwind installation of the consuming app build the css based on what's used ?

5 Replies

kapa.ai•3mo ago

Hi @Kérunix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about providing CSS with your Nuxt module based on Shadcn-vue and Tailwind, and whether you can rely on the consuming app's Tailwind setup: 1. Providing Built CSS with Your Module You can inject a built CSS file from your module into the consuming Nuxt app by pushing it to the Nuxt css array during your module's setup. Here’s an example from the Nuxt documentation:

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

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

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

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

This approach ensures your CSS is included globally in the consuming app, as long as the file exists at build time. If your build pipeline is erasing the CSS file, you may need to adjust your build process to ensure the CSS is present in the final output before publishing the module. The Nuxt module builder expects all referenced files to exist at publish time, as you’ve noticed. If the file is missing, the build will fail if it’s declared as an export in your package.json Injecting Other Assets. 2. Relying on the Consuming App’s Tailwind Setup If you want your module to only provide components with Tailwind classes and let the consuming app’s Tailwind installation generate the CSS, this is possible and is a common pattern in the Nuxt/Tailwind ecosystem. In this scenario: - Your module should not include any built CSS. - You only ship components with Tailwind utility classes in their markup. - The consuming app must have Tailwind CSS installed and properly configured to scan your module’s components for class usage. To ensure Tailwind picks up classes from your module, the consuming app’s Tailwind content configuration must include paths to your module’s components. If your module is published to node_modules, you may need to document for consumers how to add your module’s component paths to their Tailwind config’s content array. Note: If classes are generated dynamically (e.g., class="bg-${color}-500"), Tailwind may not detect them unless you use the @source directive or explicitly list all possible classes, as Tailwind’s purge process only detects static class names Github Issue (closed): Clarification in set-up docs around TailwindCSS. Summary - To provide built CSS: Inject it via the Nuxt css array in your module, and ensure it’s present in your published package. - To rely on the consuming app’s Tailwind: Only ship components with Tailwind classes, and instruct consumers to include your module’s files in their Tailwind content config. Both approaches are valid; the best choice depends on your target audience and how much control you want to give to the consuming app over theming and purging. If you need more advanced asset handling (like exposing a folder of assets), you can use Nitro’s publicAssets option in your module Injecting Other Assets. If you need further details on configuring Tailwind in a Nuxt module, see the example of using another module (like Tailwind) from within your module Using Other Modules in Your Module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

KérunixOP•3mo ago

@kapa.ai is snanning node_modules a bad practice in tailwind ?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- There is no explicit statement in the provided knowledge sources that scanning the entire node_modules directory is a "bad practice" in Tailwind. However, it is generally implied in the Nuxt and Tailwind ecosystem that you should avoid scanning all of node_modules for performance reasons, as it can significantly slow down the Tailwind build process and may include many unnecessary files. Instead, if you need Tailwind to scan specific files from a module in node_modules (for example, if you are consuming a UI library that uses Tailwind classes), you should explicitly include only the relevant paths in your Tailwind content configuration. This targeted approach is more efficient and avoids the overhead of scanning the entire node_modules directory. The knowledge sources do not provide a direct recommendation or warning, but the best practice is to be selective and precise with your content paths for optimal performance and reliability. If you need to include files from a module, specify only those files or directories, not the whole node_modules folder. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Include built CSS in module bundle

Did you find this page helpful?