themesberg/tailwind-blazor-starter

Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components

Tailwind CSS + Blazor.NET + Flowbite Starter

Get started with this starter project based on a Tailwind CSS, Blazor.NET and Flowbite configuration to help you ger started building website applications based on the utility classes from Tailwind CSS and components from Flowbite.

This repository is based on the Tailwind CSS + Blazor.NET guide on the Flowbite website.

Getting started

Ensure that you have NPM and Node.js installed on your project. Also ensure you have installed the .NET SDK to enable you to develop .NET applications. Run the following command to install all dependencies:

npm install

Then run this command to compile the source code and watch for changes:

dotnet watch

Make sure that you also run the following script to compile the Tailwind CSS source code:

npx tailwindcss -i wwwroot/css/app.css -o wwwroot/css/app.min.css --watch

Run this command to build your project and all its dependencies:

dotnet build

Flowbite Components

Flowbite Components in a Blazor Project

Now that you have successfully installed Blazor.NET, Tailwind CSS and Flowbite, you can start using Flowbite's components such as navbars, buttons, and modals in your project.

We'll use a dropdown component with the hover effect as an example. Copy/paste this code block into your Pages/Index.razor file:

@page "/"

<button id="dropdownHoverButton" data-dropdown-toggle="dropdownHover" data-dropdown-trigger="{hover|click}" class="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 inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown hover <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
  </svg></button>
<!-- Dropdown menu -->
<div id="dropdownHover" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownHoverButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
      </li>
    </ul>
</div>

Learn more about the Flowbite-Blazor library and how to customize it to your project.

License

This project is open-source under the MIT license.

tailwind-blazor-starter's Issues

Components in .NET 8 Blazor SSR not working after navigation

Current project setup does not properly work with .NET 8 Blazor SSR enhanced navigation.

Components that require js such as Carousel only work on first load. After enhanced navigating to another page and returning back to the previous one, the carousel disappears and requires a full reload to show again.

I have also tested the popover and same behaviour happens. The popover only shows on first load or after a full reload.

Datetime picker doesn't work with Blazor app

I have implemented step by step on how to integrate Blazor with Flowbite following the docs
It works for modal, dropdown, etc, ...
But it seems like the Datepicker component doesn't work as expected.
I found the issue
Please watch the video for more detail: Youtube video
The <script src="/plugin/flowbite/flowbite.js"></script> may have conflict with <script src="_framework/blazor.web.js"></script> in Blazor app.
When I comment out the code <script src="_framework/blazor.web.js"></script>, the Datepicker works.
But when I uncomment the code <script src="_framework/blazor.web.js"></script>, the Datepicker does not work, and there are no interactions anymore when clicking the Datetime picker. no calendar appears.

nice try

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.

Interactivity not working

Using this getting started repo, or following the instructions here: https://flowbite.com/docs/getting-started/blazor/ the interactivity of the components are not working.

The CSS and UI components display fine, but nothing happens when clicking on the drop downs. There are no errors or warning appearing in dev tools.

I have tried using CDN version 1.8.0 and 1.8.1 and both Blazor Server and WASM and it is still the same, there is no interactivity on the components.

Dropdown hover and other js related functionalities not working

For the past 5 days, I've been trying to set up a project with Blazor + Tailwind + Flowbite. I found a lot of repo's like this one that are started and honestly, kudo's, but my dropdown hovers, popovers and tooltips and some other javascript related functionalities are not working or showing. Anybody know what might cause this? (I cloned this repo to get it started and followed everything in the README.md)