Overwriting third party components.

[awais019]

I have been curious from some time that what's the best or at least good enough approach to overwrite styles for third party components. Those components have certain classes attached and I have to overwrite those classes in-order to customize them. And I'm using @apply directive but from the docs and some other blogs @adamwathan has suggested that @apply should be avoided. So, what can I do in this situation.

PS: I have also tried using theme function to apply styles

[wongjn]

You could consider:

• Applying classes to the component elements, if the components have APIs to do so.
• Using theme() in CSS.
• Using utility classes with arbitrary variants to target the component elements.
• Using variants from custom Tailwind plugin(s) to target the component elements.

[awais019]

But I'm talking about overwriting styles for already defined classes by the components

[wongjn]

Sure, my suggestions still apply.

[awais019]

Thanks

[shivangi-2001]

@wongjn
Hi, I followed couple of issues in GitHub repo regarding css applied on third party tools like fullcalender, swiper. Before it applied using like these

Now have it does not showing any changes in react 19 + tailwind css v4.0
using the above image code directly giving error:

I followed https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes guideline but
it doesn't shows any changes.

Can you tell me what can do about that.

[wongjn]

Try having the third-party CSS inside the @layer components too.

[shivangi-2001]

I am not able to use bg-black or other utility classes, i added into @ layer components

[wongjn]

Try having the third-party CSS inside the @layer components too:

@import "path/to/third-party/styles.css" layer(components);

…

@layer components {
  …
}