[Bug] Modal shown on the top of root component (using TailwindCSS)

[andrewfandy]

So I have Blazor WebAssembly project and have TailwindCSS installed on it,

I followed all documentations:

1. I configure App.razor

<CascadingAuthenticationState>
   <CascadingBlazoredModal>
      <Route....>

      </Route>
   </CascadingBlazoredModal>
<CascadingAuthenticationState>

2. Configure: index.html : <link rel="stylesheet" href="_content/Blazored.Modal/blazored-modal.css" />

The issue is, when component hit ShowModal:

    private void ShowModal(int reportId)
    {
        var parameters = new ModalParameters();
        parameters.Add(nameof(ReportedCertificateModal.ReportId), reportId);

        var options = new ModalOptions
        {
            Position = ModalPosition.Middle,
            Size = ModalSize.Large,
            Class = "w-1/2 border border-black shadow-lg",
        };

        ModalService.Show<ReportedCertificateModal>(
            parameters: parameters,
            options: options
        );
    }

The modal component shown on top of navbar