Toast Close Button in Tailwind

[Nick]

When using the Toast in Tailwind theme, the close button is not showing the correct style. I have attached an example to show it and the same issue is prevalent in the Demos too.

In the Demos,

Attachment: ToastTest_dbbd7a6a.zip

[Vinothkumar Yuvaraj]

Hi Nick,

To solve your problem, you can use the following styles. Please see the attached sample for your reference.

<style>

.e-toast .e-toast-close-icon::before{

        content:"\e7e7";

 }

</style>

We will correct our demo sample site and refresh it in any one of our upcoming releases.

Regards,

Vinothkumar

Attachment: ToastTest_6da5b781_12c42393.zip

[Nick]

Now this removes the Toast close button icon from material, fabric and bootstrap themes and changes the close button icon to a hamburger menu in the bootstrap4 theme.

I tried using .tailwind and .tailwind-dark in front of .e-toast .e-toast-close-icon::before but that does not work either.

[Vinothkumar Yuvaraj]

Hi Nick,

Please ignore the previously provided sample level solution. We have already fixed and included the fix in Volume 4 release v20.4.0.38, so please upgrade your package version. Please find the demo link below for your reference.

Demo Link : https://blazor.syncfusion.com/demos/toast/template?theme=fluent

Please let us know if you have any concerns.