Adaptive rendering doesn't work when using Tailwind drop-shadow

0 Answers 53 Views
Card
Julian Turner
Top achievements
Rank 1
Julian Turner asked on 17 Jan 2024, 07:31 PM

Hello, 

I added a Tailwind drop-shadow to my KendoReact Card components and noticed that any component with adaptive rendering stopped rendering properly and was bound to the Card.

Here is a Stackblitz example. The bottom card with the green background demonstrates the problem.

https://stackblitz.com/edit/react-hb3jww-fkedu8?file=app%2Fmain.jsx,app%2FCustomCard.jsx,index.html

I also came across this about it being more of a CSS issue than one specific to Tailwind.

https://github.com/tailwindlabs/tailwindcss/discussions/9029

I discovered that I could replace "drop-shadow" with "shadow" for my purposes and everything now works as expected. You can close this ticket. I am submitting this because you guys have been really helpful to me and hopefully this helps someone else in case they run into this strange behavior and start pulling their hair out. There is probably a better place to submit this but I had already started down this path before figuring it out on my own.

Thanks,

Julian

No answers yet. Maybe you can help?

Tags
Card
Asked by
Julian Turner
Top achievements
Rank 1
Share this question
or