Adding content to tailwind in a nuxt module

[guirak]

Hello,

There is a change that occurs between nuxt/ui 2.15.1 and 2.16.0.

In 2.15.1, I was able to specify paths in the tailwindConfig.content.files doing the following in my module :

export const configureTailwind = (tailwindConfig: Partial<Config>, srcResolver: Resolver) => {
  const runtimeDir = srcResolver.resolve("./runtime");

  tailwindConfig.content.files.push(srcResolver.resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"));
  tailwindConfig.content.files.push(srcResolver.resolve(runtimeDir, "config/**/*.{vue,mjs,ts}"));

};

This function is called on the module.ts on the hook tailwindcss:config :

    nuxt.hook("tailwindcss:config",
      (tailwindConfig: Partial<Config>) => configureTailwind(tailwindConfig, srcResolver));

In the last version, I am having the tailwindConfig.content.files undefined sometimes when calling the pnpm run dev:prepare

I think I am not using the good way to do that.

My project is a mono repo with severals nuxt module that depends of nuxt/ui and can have dependencies between them.

Please, can you give me the clean way to provide the content files to tailwind css from nuxt modules ?

Thank you

[ineshbose]

Hi, thanks for opening an issue on this repository - it's a good question.

Content configuration could be a bit varied, so hooks just need minor if-conditions to extend this. See how the FormKit module does this. In your case, this is what we'll do:

export const configureTailwind = (tailwindConfig: Partial<Config>, srcResolver: Resolver) => {
  const runtimeDir = srcResolver.resolve("./runtime");

  // in case `content: undefined` which is highly unlikely, we provide default value
  tailwindConfig.content = tailwindConfig.content ?? { files: [] }

  if (Array.isArray(tailwindConfig.content)) {
     // content: string[]
     tailwindConfig.content.push(...)
  } else {     
    tailwindConfig.content.files.push(srcResolver.resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"));
    tailwindConfig.content.files.push(srcResolver.resolve(runtimeDir, "config/**/*.{vue,mjs,ts}"));
  }
};

It's likely that in your hook, tailwindConfig.content was a simple array of paths, so Array.prototype.files was undefined. I do think of extending this module to always pass content as an object as a future improvement, but devs should also ensure safer hooks to support different Tailwind configurations. 🙂

[guirak]

Hi Ineshbose,

Thank you, I will try to test it next week and come back here with a feedback.