Open hossam1231 opened 10 months ago
I looked into this because I'm considering using Flowbite for a Blazor/Tailwind project I'm working on and I got it to fix by doing this:
(Ensure npm/tailwind is downloaded and already set up)
_Host.cshtml
to use the flowbite.min.js file we just added in wwwroot
@page "/"
@using Microsoft.AspNetCore.Components.Web
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@namespace BlazorApp.Pages
<!DOCTYPE html>
...
3. Update `tailwind.config.js` to add the new javascript file to the content module:
/* @type {import('tailwindcss').Config} / module.exports = { content: [ // other files... "./wwwroot/*/.js" ], ... }
4. Update `Index.razor` to do the following:
- Inject and use the `IJSRuntime` to invoke the flowbite function `initModals` to initialize the modal.
- Include a missing attribute `data-modal-target` to the button that opens the modal. The value should be the id of the modal you want to open.
@page "/" @inject IJSRuntime JSRuntime;
...
@code { protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); await JSRuntime.InvokeVoidAsync("initModals"); } }
The result looks like this on my end:
![template-modal](https://github.com/themesberg/tailwind-blazor-starter/assets/47430791/61055d50-6b34-4ce8-be1b-173a814651f7)
Also make sure to run the npx tailwind command to recreate your css file again
Thank for your example. I implement and it work as expected with modal, dropdown, ... But seem like the datepicker component doesn't work. I'm trying to figure out the issue. Could you please try to implement it?
You've done a great job with the CSS effects for the onclick event, but it seems the modal isn't opening when clicked. Nice effort! I might consider sticking with CSS for this project.