Style collision

[jhgeluk]

Hello,

Almost everything works as expected, I'm importing the component library style.css like this:
import '@wrij/react-component-library/dist/style.css';

But the problem occurs when I'm using the component library, in a project that also uses tailwind.
When I do that, the styles from the component library collide with the styles from the project.

Do you know how this can be fixed? Can we "compile" the tailwind css in the "host" project?

[serifcolakel]

Hmm i

Hello,

Almost everything works as expected, I'm importing the component library style.css like this: import '@wrij/react-component-library/dist/style.css';

But the problem occurs when I'm using the component library, in a project that also uses tailwind. When I do that, the styles from the component library collide with the styles from the project.

Do you know how this can be fixed? Can we "compile" the tailwind css in the "host" project?

Thanks for your feedback @jhgeluk, actually I prefer tailwind css in general. I can suggest something like this to solve this. After importing the project's tailwind style file, you can import the component library style file you created. For example:

// Your App.js file or project bootstrap file.
// import your base global tailwind style
import 'assets/global.style.css'

// After you can import your package style from dist
import '@wrij/react-component-library/dist/style.css';

I think it will actually work like CSS, the last styles given will override the previous base styles.

i hope this solve your issue.

[jhgeluk]

Thanks for your response, I'm currently doing it like that. But the problem occurs when I have a component from my component library with, for the example: ".hidden" class.

And when I want to show a component by adding the "md:block" class to that component, it will not work. Because it collides with the ".hidden" from the tailwind component library.

Do you know a way to work around this?