Class collisions when installing tailwind component library to react app using tailwind

[dinosmajovic]

Hello, I asked this on Reddit but thought it might be worth while asking here as well..

I'm currently working on a monorepo (turborepo looking at their tailwind example) where I've created a React component library package that uses Tailwind classes. The build for this library generates a CSS file containing only the Tailwind classes that were used in the library.

My challenge arises when I try to integrate this library into my NextJS application that also uses Tailwind. In the Next app, I import the library's CSS file in my layout.tsx, right below to the global CSS import from Next (that has @tailwind directives). However, I'm encountering an issue where the Tailwind styles from my Next app are getting overridden by the styles from my component library and vice versa. It's difficult to come up with a concrete example, but stuff like flex-row gets completely removed.

I am reaching out to see if anyone in this community has faced a similar challenge or could provide insights or suggestions on how to resolve this.

A possible fix could be adding a prefix to the library tailwind config, but I really don't want to write the prefix every time. Maybe there's a way to auto add the prefix at build? I feel like the prefix is really bad DX and completely unnecessary when both sides only use tailwind. There should be no conflicts

Thank you in advance for your help!

[AM-NiceDay]

Hello @dinosmajovic!

To achieve the desired outcome, avoiding prebuilt UI package CSS would be best. Instead, you can generate the component CSS within the application package. This can be done by directly sourcing the content from the UI package.

Here's an example of how you can achieve this:

content: [
  // Web application content
  `src/**/*.{js,ts,jsx,tsx}`,
  // UI package content
  "../../packages/ui/*.{js,ts,jsx,tsx}",
],

In this case, you generate a single CSS file, helping you avoid any conflicts or duplication of the CSS declarations.

[jhgeluk]

Is there a way we can make a plugin out of this, one that we export from the component library?

[StephenSHorton]

How does one keep one source of truth for the tailwind config file when in many other contexts you would be required to have an individual tailwind config?

[knowivate]

Hello @dinosmajovic!

To achieve the desired outcome, avoiding prebuilt UI package CSS would be best. Instead, you can generate the component CSS within the application package. This can be done by directly sourcing the content from the UI package.

Here's an example of how you can achieve this:

content: [
  // Web application content
  `src/**/*.{js,ts,jsx,tsx}`,
  // UI package content
  "../../packages/ui/*.{js,ts,jsx,tsx}",
],

In this case, you generate a single CSS file, helping you avoid any conflicts or duplication of the CSS declarations.

It's working

but ensure using ** if your files are in deep (see below example)

    "./../../packages/**/*.{js,ts,jsx,tsx,mdx}",

[janhoeck]

For those who come across this issue in TailwindCSS 4 or higher:
https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources