tailwind classes didn't apply

Author: Faress-MoHamedCreated Apr 11, 2025Updated May 23, 2026

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.