{"id":26745618,"url":"https://github.com/angeldev96/tailwind-aspdotnet","last_synced_at":"2026-03-06T12:32:55.318Z","repository":{"id":161809242,"uuid":"588756705","full_name":"angeldev96/tailwind-aspdotnet","owner":"angeldev96","description":"Adding Tailwind in ASP.NET 6 MVC","archived":false,"fork":false,"pushed_at":"2024-02-10T19:06:35.000Z","size":1302,"stargazers_count":139,"open_issues_count":3,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T19:59:19.396Z","etag":null,"topics":["asp-net-mvc","dotnet","dotnet-core","tailwindcss","tailwinds"],"latest_commit_sha":null,"homepage":"","language":"C#","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/angeldev96.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":"2023-01-13T23:11:25.000Z","updated_at":"2025-04-07T11:49:50.000Z","dependencies_parsed_at":"2024-02-10T20:24:56.904Z","dependency_job_id":"c86c5ca0-c6ee-4a3a-b42b-b4f204f80806","html_url":"https://github.com/angeldev96/tailwind-aspdotnet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/angeldev96/tailwind-aspdotnet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angeldev96%2Ftailwind-aspdotnet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angeldev96%2Ftailwind-aspdotnet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angeldev96%2Ftailwind-aspdotnet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angeldev96%2Ftailwind-aspdotnet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angeldev96","download_url":"https://codeload.github.com/angeldev96/tailwind-aspdotnet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angeldev96%2Ftailwind-aspdotnet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30176261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T11:48:51.886Z","status":"ssl_error","status_checked_at":"2026-03-06T11:48:51.460Z","response_time":250,"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":["asp-net-mvc","dotnet","dotnet-core","tailwindcss","tailwinds"],"created_at":"2025-03-28T08:17:58.784Z","updated_at":"2026-03-06T12:32:55.286Z","avatar_url":"https://github.com/angeldev96.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"![dotnet + tailwind](https://github.com/angeldev96/tailwind-aspdotnet/blob/master/thumbnail.png)\n\n# Steps to add Tailwind in ASP.NET 6 MVC Project:\n## Video tutorial: https://youtu.be/HndP-Yh8WKc\n## Requirements: \n- NodeJS\n- .NET 6\n- Terminal Emulator (Works with Powershell in Windows and bash or zsh in Linux)\n\n## Step 1:\nCreate the project in Visual Studio or the dotnet CLI\n\n## Step 2:\nStart a node project\n```sh\nnpm init -y\n```\n\n## Step 3:\nAdd Tailwind\n```sh\nnpm install -D tailwindcss\n```\n\n\n## Step 4:\nAdd script to package.json for the css output location\n```sh\n\"scripts\": {\n    \"css:build\": \"npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify\"\n  }\n```\n\n## Step 5:\nInit the tailwind config file\n```sh\nnpx tailwindcss init\n```\n\n## Step 6:\nAdd modules to tailwind.config.json, this is for tailwind to style razor pages:\n```sh\nmodule.exports = {\n    content: [\n       './Pages/**/*.cshtml',\n       './Views/**/*.cshtml'\n],\n    theme: {\n        extend: {},\n    },\n    plugins: [],\n}\n```\n\n## Step 7:\nAdd input css to site.css in wwwroot/css\n```sh\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n## Step 8:\nAdd itemgroups in the project under the .csproj file, this is for building the css before deploying:\n```sh\n\u003cItemGroup\u003e\n  \u003cUpToDateCheckBuilt Include=\"wwwroot/css/site.css\" Set=\"Css\" /\u003e\n  \u003cUpToDateCheckBuilt Include=\"tailwind.config.js\" Set=\"Css\" /\u003e\n\u003c/ItemGroup\u003e\n\n\u003cTarget Name=\"Tailwind\" BeforeTargets=\"Build\"\u003e\n  \u003cExec Command=\"npm run css:build\"/\u003e\n\u003c/Target\u003e\n```\n\n## Step 9:\nInclude the path to the CSS file in the _Layout.cshtml file (Or the other views you need to style with tailwind)\n```sh\n\u003clink rel=\"stylesheet\" href=\"~/css/styles.css\" asp-append-version=\"true\" /\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangeldev96%2Ftailwind-aspdotnet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangeldev96%2Ftailwind-aspdotnet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangeldev96%2Ftailwind-aspdotnet/lists"}