Suggesting adding `node_modules` to Tailwind configuration slowing down application

[leerob]

Hey! I work at Vercel. We've seen quite a few reports now in the Next.js repo related to performance with Flowbite. After investigating, the root issue was recommending folks to add node_modules to their Tailwind content configuration.

This can have severe unexpected results. For example, it could run the user's PostCSS configuration over many unexpected files, causing lengthy slowdowns.

Have you also considered any other options?

[SutuSebastian]

Hey @leerob , there might be one more option here, that is to create a tailwindcss plugin specific that includes all tailwind classes used inside the library, but this might disrupt the incoming feature of supporting prefixes.

I'll sleep on the idea, maybe somethings sparks soon 🤔.

PS. All ideas are warmly welcomed.

[SutuSebastian]

Although, there was an issue before in the documentations, both flowbite and flowbite-react and now that I'm checking there still is in the flowbite integration guides for Next.js (see here, point 3.), where the content would not contain specifically the path where the components are (/lib/esm/**), but the root path (/lib/**) that also includes the node_modules folder:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    "./node_modules/flowbite-react/lib/**/*.js",
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  plugins: [
    require("flowbite/plugin")
  ],
  theme: {},
};

which is wrong, it will indeed affect performance due to tailwind searching recursively through the entire node_modules folder inside the library once installed, bummer.

[victorfunes]

Sorry to get involved, because the point is not the same, but I think it is very similar.
I was looking also my project configuration in order to speed up my environment based in an nx monorepo, vite and react, and I have just seen your comments, so I checked my configuration.

In your documentation to configure react and vite, you suggest configuring:

export default {
  content: [
    // ...
    'node_modules/flowbite-react/lib/esm/**/*.js',
  ],
  plugins: [
    // ...
    require('flowbite/plugin'),
  ],
};

In my case if I use your suggested configuration, the components are not displayed correctly and I have to use instead:

        "node_modules/flowbite-react/lib/**/*.js",

Is it correct?
Thanks in advance

[SutuSebastian]

@victorfunes It should work with both actually. Can u maybe lay down some more context to it?

For example this:

the components are not displayed correctly

A stackblitz/codepen example would be helpful here.

[victorfunes]

I am afraid to say, now that I changed back it is working, and I cannot reproduce it again.
It has been my mistake for sure as I am touching several configuration files, but now it works perfectly well...
Apologies for the confusion.