You've done a great job with the CSS effects for the onclick event, but it seems the m

nice try about tailwind-blazor-starter HOT 2 OPEN

themesberg commented on May 27, 2024

nice try

from tailwind-blazor-starter.

Comments (2)

chrisoChen commented on May 27, 2024 5

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)

Use libman instead of npm to add Flowbite to your wwwroot folder. I used cdnjs as the provider

Update _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>
<html lang="en">
    ...
    <script src="~/flowbite/flowbite.min.js"></script>
</html>

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"
  ],
...
}

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;

<!-- Modal toggle -->
<div class="flex justify-center m-5">
    <button id="defaultModalButton" data-modal-toggle="defaultModal" data-modal-target="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
    Show modal
    </button>
</div>

<!-- Main modal -->
...

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        await JSRuntime.InvokeVoidAsync("initModals");
    }
}

The result looks like this on my end:

Also make sure to run the npx tailwind command to recreate your css file again

from tailwind-blazor-starter.

duynguyen224 commented on May 27, 2024

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?

from tailwind-blazor-starter.

nice try about tailwind-blazor-starter HOT 2 OPEN

Comments (2)

Related Issues (5)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent