Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.6k
Description
New feature motivation
I used Tailwind CSS, I read a previous issue about problems on Tailwinds side of things. I managed to get some work arounds by adding tailwind classes in the custom classes part and for the mos part this worked however it would be handy if the custom classes could overwrite default swal styling. I had a look through the docs and other issues and couldn't see anything specific for Toast customisation although I feel like the standard 'popup, title' etc should work.
New feature description
Swal.fire({ showConfirmButton: false, toast: true, position: "top-end", timer: 3000, timerProgressBar: true, customClass: { popup: "bg-my-custom-background-color rounded-lg font-heading", title: "text-white", html: "text-white", }, icon: "error", title: "Oops!", text: message, });
This example doesn't work because whilst itdoes add the classes and and calls the correct tailwind class, there is default styling that is applied which overrides my class. Specifically below:.swal2-popup.swal2-toast { box-sizing: border-box; grid-column: 1 / 4 !important; grid-row: 1 / 4 !important; grid-template-columns: min-content auto min-content; padding: 1em; overflow-y: hidden; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .075), 0 1px 2px rgba(0, 0, 0, .075), 1px 2px 4px rgba(0, 0, 0, .075), 1px 3px 8px rgba(0, 0, 0, .075), 2px 4px 16px rgba(0, 0, 0, .075); pointer-events: all;
It'd be handy if something could be done so that when a custom class is applied any in the custom tailwind class overrides any default styling there is.
New feature implementation
No response