https://github.com/themesberg/tailwind-blazor-starter
Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
https://github.com/themesberg/tailwind-blazor-starter
blazor blazor-application blazor-client blazor-server csharp css dotnet html javascript tailwind tailwindcss
Last synced: 5 months ago
JSON representation
Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
- Host: GitHub
- URL: https://github.com/themesberg/tailwind-blazor-starter
- Owner: themesberg
- License: mit
- Created: 2023-08-16T08:35:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-10T21:45:07.000Z (over 2 years ago)
- Last Synced: 2024-03-25T21:28:09.911Z (over 2 years ago)
- Topics: blazor, blazor-application, blazor-client, blazor-server, csharp, css, dotnet, html, javascript, tailwind, tailwindcss
- Language: HTML
- Homepage: https://flowbite.com/docs/getting-started/blazor/
- Size: 56.6 KB
- Stars: 14
- Watchers: 5
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS + Blazor.NET + Flowbite Starter
Get started with this open-source project based on a Tailwind CSS, Blazor.NET and Flowbite configuration to help you get started building website applications based on the utility classes from Tailwind CSS and components from Flowbite. Read our [guide from Flowbite](https://flowbite.com/docs/getting-started/blazor/) to learn how set things up from the scratch.
## 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:
```Bash
npm install
```
Then run this command to compile the source code and watch for changes:
```Bash
dotnet watch
```
Make sure that you also run the following script to compile the Tailwind CSS source code:
```Bash
npx tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch
```
Run this command to build your project and all its dependencies:
```Bash
dotnet build
```
## 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](https://flowbite.com/docs/components/dropdowns/) into your Pages/Index.razor file:
```Bash
@page "/"
Dropdown hover
```
[Learn more](https://github.com/themesberg/flowbite-blazor) about the Flowbite-Blazor library and how to customize it to your project.
## License
This project is open-source under the MIT license.