Issue with Tailwindcss

[matteomaiocchi99]

Hi, we have discovered a compatibility issue with projects that already use tailwind and your image cropper. In the rollup of your build, tailwind style is injected, and at that point, since your style is injected after our project's, your style takes priority and overrides some tailwind classes (such as the hidden class). One possible solution could be to provide a props to pass to the image cropper component to tell it whether to include or remove the style.

Attachment 1: Screenshot of the style that is causing issues Attachment 2: Screenshot of the project with antd-img-crop and the non-functioning hidden class Attachment 3: Screenshot obtained by removing the code from Attachment 1 or moving it as the first injected style.

[nanxiaobei]

Sorry but I did not get the exact information. I'd like to know the exact class which is causing the problem (because antd-img-crop did not use .hidden), or provide a minimum recurrence demo

[matteomaiocchi99]

Here two demo links: with img crop and tailwind broken : https://stackblitz.com/edit/react-i5rg76?file=src%2Findex.js,public%2Findex.html,src%2FApp.js without img-crop and everything work fine: https://stackblitz.com/edit/react-kh4plh?file=src%2Findex.js,public%2Findex.html,src%2FApp.js

[nanxiaobei]

got it. I just upgraded to 4.12.1 and use arbitrary values(like [display:flex]) for every tailwind css class, try to avoid the conflict. In most cases I think it will work, if still facing conflicts(such as [display:flex] is just used in your code), I think can only use something like sm:![display:hidden] to override it.