Class collisions when installing tailwind component library to react app using tailwind #12714
Unanswered
dinosmajovic
asked this question in
Help
Replies: 1 comment 1 reply
-
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. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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!
Beta Was this translation helpful? Give feedback.
All reactions