Datasearch default style is overwriting tailwind classes set on inner classes.

[larsdouweschuitema]

Affected Projects VueJS

Library Version: x.y.z 13.13.1

Describe the bug When using tailwind classes on the innerclass of the datasearch component, the default style is overwriting the tailwind classes.

To Reproduce Add a tailwind class to the inner class of the input element on the datasearch

      <DataSearch
        :inner-class="{
          input: 'bg-black',
        }"
      >

Adding tailwind classes to the inner class will be overwritten by default styles.

Expected behavior Tailwind class overwrites default styles.

Screenshots

[larsdouweschuitema]

@bietkul Added this one after trying to create our custom style on the data search component.

[bietkul]

@larsdouweschuitema We debugged the issue and found that it is happening because the styles generated by styled-components are getting injected at the end of the head element. So in case of style conflict, the style applied by the user would get overridden by the component's style.

We have to be more specific while defining the custom CSS. You can find the detailed explanation at here.

Tailwind style works well if there is no conflict. Check here

But in case of conflicting styles, you can try the important property in the tailwind config. I would recommend using the important tag for input selector. Check here

Check the working example at here

Let us know if you have any recommendation on this.

[kasvith]

@bietkul we are facing a similar issue now

We also use TailwindCSS for our website. We are also using SSR with Astro. The main problem we face is when RS-loaded tailwind styles get overridden and we get a layout shift. Is it possible to disable these styles and allow tailwind takeover completely?

https://user-images.githubusercontent.com/13379595/196809439-77a29f4f-d2d6-4e15-8257-4e04c3d6972a.mp4