We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toast Close Button in Tailwind

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

5 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team December 21, 2022 02:03 PM UTC

Hi Nick,

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


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




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



Attachment: ToastTest_6da5b781_12c42393.zip

NI Nick replied to Vinothkumar Yuvaraj December 21, 2022 05:33 PM UTC

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.

VY Vinothkumar Yuvaraj Syncfusion Team December 22, 2022 04:14 PM UTC

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.

Marked as answer

AB Abhishek December 20, 2023 06:46 PM UTC

The Toast Close Button in Tailwind CSS is a versatile utility for enhancing user experience. It facilitates the dismissal of notification toasts, improving user control. Tailwind provides various classes for styling the Toast Close Button, such as 'text-' for color customization and 'hover:' for interactive feedback adjustments. Additionally, 'focus:' classes enhance accessibility. The 'hidden' utility hides the close button when not needed. By combining these functionalities, developers can seamlessly integrate and customize Toast Close Buttons in Tailwind, ensuring both functionality and aesthetic coherence in web applications.

Fore more info, read here:  https://purecode.ai/blogs/tailwind-button/

KP Kokila Poovendran Syncfusion Team January 9, 2024 02:21 PM UTC

Hi Abhishek,

Thank you for reaching out! We have carefully reviewed your query, and we've prepared a sample code snippet for implementing Toast Close Buttons in CSS. Below is the code for your reference:

<div class="col-lg-12 control-section toast-default-section">

    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" ShowCloseButton=true Content="@ToastContent" Timeout="0" Icon="e-meeting">

        <ToastPosition X="@ToastPosition"></ToastPosition>


    <div class="col-lg-12 col-sm-12 col-md-12 center">

        <div id="toastBtnDefault" style="margin: auto;text-align: center">

            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>

            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>





    #toast_default .e-meeting::before {

        content: "\e705";

        font-size: 17px;



    .bootstrap4 #toast_default .e-meeting::before {

        content: "\e763";

        font-size: 20px;



    .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon,

    .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:focus {

        background-color: bisque !important;

        color: red !important;



   .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:hover       {

       background-color: aquamarine !important;




@code {

    SfToast ToastObj;

    private string ToastPosition = "Right";

    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()


        await this.ToastObj.ShowAsync();


    private async Task HideOnClick()


        await this.ToastObj.HideAsync("All");



In this modified code snippet, we have integrated styles for the close button to enhance the visual appeal and user experience. Feel free to test this implementation, and if you have any further questions or need additional assistance, please don't hesitate to reach out.


Kokila Poovendran.

Live Chat Icon For mobile
Up arrow icon