{"id":43840746,"url":"https://github.com/themesberg/tailwind-blazor-starter","last_synced_at":"2026-02-06T05:06:53.393Z","repository":{"id":189527417,"uuid":"679165221","full_name":"themesberg/tailwind-blazor-starter","owner":"themesberg","description":"Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components","archived":false,"fork":false,"pushed_at":"2023-12-10T21:45:07.000Z","size":58,"stargazers_count":14,"open_issues_count":6,"forks_count":4,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-03-25T21:28:09.911Z","etag":null,"topics":["blazor","blazor-application","blazor-client","blazor-server","csharp","css","dotnet","html","javascript","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://flowbite.com/docs/getting-started/blazor/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-16T08:35:27.000Z","updated_at":"2024-03-15T18:47:22.000Z","dependencies_parsed_at":"2023-11-10T12:36:30.353Z","dependency_job_id":null,"html_url":"https://github.com/themesberg/tailwind-blazor-starter","commit_stats":null,"previous_names":["themesberg/tailwind-blazor-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/themesberg/tailwind-blazor-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-blazor-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-blazor-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-blazor-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-blazor-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/tailwind-blazor-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-blazor-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29151735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-application","blazor-client","blazor-server","csharp","css","dotnet","html","javascript","tailwind","tailwindcss"],"created_at":"2026-02-06T05:06:52.745Z","updated_at":"2026-02-06T05:06:53.385Z","avatar_url":"https://github.com/themesberg.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS + Blazor.NET + Flowbite Starter\n\nGet 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.\n\n## Getting started\n\nEnsure 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:\n\n```Bash\nnpm install\n```\n\nThen run this command to compile the source code and watch for changes:\n\n```Bash\ndotnet watch\n```\n\nMake sure that you also run the following script to compile the Tailwind CSS source code:\n\n```Bash\nnpx tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch\n```\n\nRun this command to build your project and all its dependencies:\n\n```Bash\ndotnet build\n```\n\n## Flowbite Components in a Blazor Project\n\nNow 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.\n\nWe'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:\n\n```Bash\n@page \"/\"\n\n\u003cbutton 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\"\u003eDropdown hover \u003csvg 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\"\u003e\n    \u003cpath stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\"/\u003e\n  \u003c/svg\u003e\u003c/button\u003e\n\u003c!-- Dropdown menu --\u003e\n\u003cdiv id=\"dropdownHover\" class=\"z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700\"\u003e\n    \u003cul class=\"py-2 text-sm text-gray-700 dark:text-gray-200\" aria-labelledby=\"dropdownHoverButton\"\u003e\n      \u003cli\u003e\n        \u003ca href=\"#\" class=\"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white\"\u003eDashboard\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#\" class=\"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white\"\u003eSettings\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#\" class=\"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white\"\u003eEarnings\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"#\" class=\"block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white\"\u003eSign out\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n\n```\n\n[Learn more](https://github.com/themesberg/flowbite-blazor) about the Flowbite-Blazor library and how to customize it to your project.\n\n## License\n\nThis project is open-source under the MIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-blazor-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Ftailwind-blazor-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-blazor-starter/lists"}