tailwind classes didn't apply
Tailwind classes passed to customClass.htmlContainer in SweetAlert.fire() (when using sweetalert2-react-content) are not applied as expected. For example, !w-fit !p-0 does not affect the htmlContainer, even though the correct class name is visible in the DOM.
To Reproduce
Fork this sandbox to demonstrate the bug: https://codesandbox.io/s/sweetalert2-react-content-sandbox-6mri0o
Steps:
Use Tailwind CSS in the project.
Use SweetAlert.fire() with sweetalert2-react-content.
Add Tailwind utility classes like !p-0 or w-fit to customClass.htmlContainer.
Observe that these classes don’t apply or have no effect in the rendered alert.
SweetAlert.fire({ html: , showConfirmButton: false, customClass: { htmlContainer: "!p-0 !w-fit", // <- not working }, });
Expected result
The htmlContainer should have padding: 0 and width: fit-content.
Actual result
the classes with tailwind didn't apply and if apply need to make it important to didn't ignore
Additional context
The class names do show up in the DOM (class="swal2-html-container !p-0 !w-fit"), but their styles do not apply.
Using didOpen() and modifying styles via JavaScript or manually rendering a component works as a workaround.
This might be due to SweetAlert2’s built-in styles using !important, or possibly a CSS specificity issue.
Source: sweetalert2/sweetalert2