search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
549 stars 40 forks source link

Incompatible with Tailwind #61

Closed adapap closed 3 years ago

adapap commented 3 years ago

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?

antoniandre commented 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!

macjuul commented 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!

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!

antoniandre commented 3 years ago

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. :)

antoniandre commented 3 years ago

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 :)