Closed adapap closed 3 years ago
Hi @adapap,
I agree that Tailwind is super helpful, but you are not supposed to use Wave UI with Tailwind as they do similar things.
If you really want to do it, you can provide a SCSS override of the Wave UI CSS selectors specificity via the $css-scope
variable override.
https://antoniandre.github.io/wave-ui/customization#give-wave-ui-css-more-priority
if that's what you are looking for, follow all the customization steps of that page. But it's not recommended to have 2 CSS frameworks on the same project (Wave UI being a complete UI framework CSS/JS).
Hope it makes sense!
Hi @adapap,
I agree that Tailwind is super helpful, but you are not supposed to use Wave UI with Tailwind as they do similar things. If you really want to do it, you can provide a SCSS override of the Wave UI CSS selectors specificity via the
$css-scope
variable override.https://antoniandre.github.io/wave-ui/customization#give-wave-ui-css-more-priority
if that's what you are looking for, follow all the customization steps of that page. But it's not recommended to have 2 CSS frameworks on the same project (Wave UI being a complete UI framework CSS/JS).
Hope it makes sense!
Hello! I'm in a similar situation as @adapap when it comes to using Tailwind with Wave UI.
While so far I haven't run into too many issues myself yet, I would like to voice my support towards better compatibility between these two libraries. I understand Wave UI provides similar helper classes, however due to the ease of customizing style in Wave (a significant benefit over other component frameworks) it would be a shame not to support Tailwind to an extent. I've found the combination to be extremely useful where I use Wave mostly for the components and tailwind for the customization and overriding of style.
I understand adding full support for Tailwind is too much to ask, however not supporting it at all seems like an enormous missed opportunity in my eyes as both frameworks have a great synergy. Perhaps a separate CSS file without helper functions could be provided for those of us that prefer using separate helper functions, or those that would like to cut down on file size.
Other than that I really appreciate the great framework!
Thanks for your feedback @adapap and @macjuul, That makes sense, and I'll see how far I can make it compatible. Since changing all the class names is not an option and not in the same format, I like the suggestion from @macjuul to optionally disable the style generation.
I'm adding this to my todo. :)
Hi @adapap, @macjuul,
The generation of the CSS layout classes can now be deactivated. https://antoniandre.github.io/wave-ui/customization#disable-the-css-layout-classes-not-recommended
Hope it helps, please reopen if not solved :)
Tailwind and Wave UI both expose utility CSS classes; however, there are conflicts between the two. For example:
mx-1
applies a negative margin in Wave UI, but is expected a positive margin in Tailwind.Is there a way I can scope/prefix Wave UI classes so that they are lower priority than Tailwind? Or any recommendations on how to avoid this naming conflict?