search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

TailwindCSS is overriding MenuItem hover color #207

Closed vincentdchn closed 6 months ago

vincentdchn commented 6 months ago

Hi, first of all, thank you for all your work on the library. It's amazing.

Describe the bug I encountered an issue while integrating TailwindCSS into my project. Specifically, importing Tailwind's global.css appears to interfere with the hover color functionality of the <MenuItem /> component. Despite following the documentation to configure TailwindCSS, the MenuItem's hover effect fails to produce the anticipated color change when global.css is active.

A clear example can be observed in the project's example setup, where the <MenuItem/> component is used with onClick properties in conjunction with TailwindCSS, as per the repository's reshaped use case (./src/examples/tailwind-integration).

Environment (please complete the following information):

blvdmitry commented 6 months ago

Tried it in the Tailwind example and it seems like an issue with the css order. Tailwind css reset selectors override Reshaped styles because all of them have the same selector weight. So in case you put you css import before importing Reshaped in your root component - it should be sorted correctly. I will still include some additional selector priority for such cases until we can move to using @layer

blvdmitry commented 6 months ago

Added an additional override for the next release