{"id":21977796,"url":"https://github.com/fritzthecat9/tailwindblazor","last_synced_at":"2026-04-12T17:10:45.050Z","repository":{"id":231936699,"uuid":"783083142","full_name":"FritzTheCat9/TailwindBlazor","owner":"FritzTheCat9","description":"How to add Tailwind CSS to Blazor WASM project","archived":false,"fork":false,"pushed_at":"2024-04-06T22:51:13.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-28T03:42:58.158Z","etag":null,"topics":["blazor","blazor-webassembly","c-sharp","csharp","css","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FritzTheCat9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-06T22:25:50.000Z","updated_at":"2024-04-19T15:06:13.000Z","dependencies_parsed_at":"2024-04-06T23:26:28.840Z","dependency_job_id":"7d8255a0-085d-4377-aac9-724aab29ff60","html_url":"https://github.com/FritzTheCat9/TailwindBlazor","commit_stats":null,"previous_names":["fritzthecat9/tailwindblazor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FritzTheCat9%2FTailwindBlazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FritzTheCat9%2FTailwindBlazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FritzTheCat9%2FTailwindBlazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FritzTheCat9%2FTailwindBlazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FritzTheCat9","download_url":"https://codeload.github.com/FritzTheCat9/TailwindBlazor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245040033,"owners_count":20551292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-webassembly","c-sharp","csharp","css","tailwind-css","tailwindcss"],"created_at":"2024-11-29T16:16:26.873Z","updated_at":"2026-04-12T17:10:45.017Z","avatar_url":"https://github.com/FritzTheCat9.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## How to install tailwindcss to blazor project:\n1. Go to \".\\TailwindBlazor\\TailwindBlazor\" in CMD and run command:\n```\nnpx tailwindcss init\n```\n\n2. The \"tailwind.config.js\" file will be created. Change it to:\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./**/*.{razor,html}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n3. Create /Styles/tailwind.css file and change it to: \n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n4. Add some tailwindcss classes to \"Home.razor\" component:\n```\n@page \"/\"\n\u003cPageTitle\u003eHome\u003c/PageTitle\u003e\n\u003ch1 class=\"font-extrabold text-5xl\"\u003eHello, world!\u003c/h1\u003e\nWelcome to your new app.\n```\n\n5. Add tailwind file to \"index.html\": \n ```\n\u003clink rel=\"stylesheet\" href=\"css/tailwind.css\" /\u003e\n```\n\n6. Comment out some code in \"NavMenu.razor\" that toogles nav menu (bug)\n```\n\u003cbutton title=\"Navigation menu\" class=\"navbar-toggler\" @onclick=\"ToggleNavMenu\"\u003e\n    \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n\u003c/button\u003e\n\n\u003cdiv class=\"@NavMenuCssClass nav-scrollable\" @onclick=\"ToggleNavMenu\"\u003e\n\n\u003c/div\u003e\n```\n\n7. Run command to build tailwind and listen to changes:\n```\nnpx tailwindcss -i .\\Styles\\tailwind.css -o .\\wwwroot\\css\\tailwind.css --watch\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritzthecat9%2Ftailwindblazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffritzthecat9%2Ftailwindblazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritzthecat9%2Ftailwindblazor/lists"}