search

vueform / multiselect

Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
https://vueform.com
MIT License
807 stars 150 forks source link

Style precedence with tailwind #309

Closed Fuzzyma closed 1 year ago

Fuzzyma commented 1 year ago

Version

Description

Using this component while using tailwind in my project as well leads to css precedence issues. The base tailwind styles for inputs always overwrite the ones defined in the multi-select css.

It ends up looking like this: grafik grafik

The styles are off. Here you can see, how the base classes overwrite the ones from this plugin grafik

I also tried importing the styled differenly, use tailwind.css vs default.css, import the vue component directly, import the styles from style tag and so on. While this changed the style sometimes a little, it never fixed it.

Demo

This setup is hard to reproduce since my own tailwind installation plays part in it. However, it also might be that this is related to vite not sorting the styles correctly.

Did you ever see this issue and maybe have an idea on how to fix it?

adamberecz commented 1 year ago

As far as I know this was addressed in #134. If you import tailwind.css (and not default.css) after Tailwind CSS styles this should not be an issue.

Assuming by "base tailwind styles" you actually mean tailwindcss-forms.

Feel free to reopen if you still experience the issue.

Fuzzyma commented 1 year ago

Your linked issue was resolved long time ago and I was on the newest version. So I dont think it was fixed there. However I moved on since I couldnt fix it so it doesnt matter to me

adamberecz commented 1 year ago

Got it. Just putting a note here that I was also on the newest version when testing it out and it did work on that. The earlier issue was the resolution of the original problem but it only gets applied if tailwind.css is imported after Tailwind CSS styles.