{"id":17866205,"url":"https://github.com/xt0rted/tailwindcss-tag-helpers","last_synced_at":"2025-03-21T05:30:47.140Z","repository":{"id":37860213,"uuid":"338955670","full_name":"xt0rted/tailwindcss-tag-helpers","owner":"xt0rted","description":"ASP.NET tag helpers to make working with Tailwind CSS and Tailwind UI easier","archived":false,"fork":false,"pushed_at":"2024-10-29T12:01:50.000Z","size":653,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T14:33:29.459Z","etag":null,"topics":["hacktoberfest","taghelper","taghelpers","tailwindcss","tailwindui"],"latest_commit_sha":null,"homepage":"","language":"C#","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/xt0rted.png","metadata":{"funding":{"github":"xt0rted","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null},"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-15T03:15:47.000Z","updated_at":"2024-10-28T12:56:44.000Z","dependencies_parsed_at":"2023-10-23T13:33:32.699Z","dependency_job_id":"517662b3-5936-468b-a565-6568118569a0","html_url":"https://github.com/xt0rted/tailwindcss-tag-helpers","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Ftailwindcss-tag-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Ftailwindcss-tag-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Ftailwindcss-tag-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Ftailwindcss-tag-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xt0rted","download_url":"https://codeload.github.com/xt0rted/tailwindcss-tag-helpers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244117611,"owners_count":20400742,"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":["hacktoberfest","taghelper","taghelpers","tailwindcss","tailwindui"],"created_at":"2024-10-28T09:29:02.640Z","updated_at":"2025-03-21T05:30:46.867Z","avatar_url":"https://github.com/xt0rted.png","language":"C#","funding_links":["https://github.com/sponsors/xt0rted"],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"assets/logo.svg\" align=\"left\" height=\"45\"\u003e tailwindcss-tag-helpers\n\n[![CI build status](https://github.com/xt0rted/tailwindcss-tag-helpers/workflows/CI/badge.svg)](https://github.com/xt0rted/tailwindcss-tag-helpers/actions?query=workflow%3ACI)\n[![NuGet Package](https://img.shields.io/nuget/v/TailwindCssTagHelpers?logo=nuget)](https://www.nuget.org/packages/TailwindCssTagHelpers)\n[![GitHub Package Registry](https://img.shields.io/badge/github-package_registry-yellow?logo=nuget)](https://nuget.pkg.github.com/xt0rted/index.json)\n[![Project license](https://img.shields.io/github/license/xt0rted/tailwindcss-tag-helpers)](LICENSE)\n\nASP.NET tag helpers to make working with [Tailwind CSS](https://tailwindcss.com/) and [Tailwind UI](https://tailwindui.com/) easier.\n\nIncluded tag helpers:\n\nName | Description\n:-- | :--\n[LinkAriaCurrentStateTagHelper](#linkariacurrentstatetaghelper) | Adds the `aria-current` attribute to links that are processed by `LinkTagHelper` and include an `aria-current-state` attribute\n[LinkTagHelper](#linktaghelper) | Applies css classes based on the `href` value and current url\n[ValidationStatusTagHelper](#validationstatustaghelper) | Applies css classes based on the validation status of a model value\n\n## Installation\n\n```terminal\ndotnet add package TailwindCssTagHelpers\n```\n\n## Setup\n\nIn your `_ViewImports.cshtml` add:\n\n```html\n@addTagHelper *, TailwindCssTagHelpers\n```\n\nIn your `Startup.cs` add:\n\n```csharp\npublic void ConfigureServices(IServiceCollection services)\n{\n    services.AddTailwindCssTagHelpers(Configuration);\n}\n```\n\nIn your `appsettings.json` add:\n\n```json\n{\n  \"TailwindCss\": {\n    \"IncludeComments\": true\n  }\n}\n```\n\n## Settings\n\nName | Default value | Description\n:-- | :-- | :--\n`IncludeComments` | `false` | Add html comments before the target tag with base, current, and default classes to help make development/debugging easier.\n\n## Usage\n\n### LinkAriaCurrentStateTagHelper\n\nAdds the [`aria-current=\"*\"`](https://www.w3.org/TR/wai-aria-1.1/#aria-current) attribute to links that are processed by the `LinkTagHelper` and include an `aria-current-state=\"*\"` attribute.\n\n```html\n\u003ca\n  asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\"\n  class=\"px-3 py-2 text-sm font-medium rounded-md\"\n  default-class=\"text-gray-300 hover:bg-gray-700 hover:text-white\"\n  current-class=\"text-white bg-gray-900\"\n  aria-current-state=\"Page\"\n\u003e\n  Home\n\u003c/a\u003e\n```\n\nWill output:\n\n```html\n\u003ca\n  href=\"/\"\n  class=\"px-3 py-2 text-sm font-medium rounded-md text-white bg-gray-900\"\n  aria-current=\"page\"\n\u003e\n  Home\n\u003c/a\u003e\n```\n\n#### Attributes\n\nName | Value | Description\n:-- | :-- | :--\n`aria-current-state` | `True`, `Page` (default), `Step`, `False`, `Location`, `Date`, `Time` | The value to use for the `aria-current` attribute.\n\n### LinkTagHelper\n\nThe link tag helper will compare the `href` to the current url and apply one of two sets of css classes.\n\nThe `default-class` list will be applied if the urls don't match, and the `current-class` list will be applied if the urls do match.\n\nIf an immediate child element has a `default-class` or `current-class` attribute it will also have its class lists merged.\n\nThe naming of these attributes aligns with the comments found in the Tailwind UI templates and the `-class` suffix allows the attributes to automatically work with [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind).\n\nThe matching method can be either `Full` (default) which ensures the link path and current path are the same, or `Base` which ensures the link path starts with, or is the same as, the current path.\n\n\u003e [!NOTE]\n\u003e Query string values are not used for either method of matching.\n\n```html\n\u003ca\n  asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\"\n  class=\"px-3 py-2 text-sm font-medium rounded-md\"\n  default-class=\"text-gray-300 hover:bg-gray-700 hover:text-white\"\n  current-class=\"text-white bg-gray-900\"\n  match=\"Base\"\n\u003e\n  Home\n  \u003cspan\n    class=\"ml-auto inline-block py-0.5 px-3 text-xs rounded-full\"\n    current-class=\"bg-gray-50\"\n    default-class=\"bg-gray-200 text-gray-600 group-hover:bg-gray-200\"\n  \u003e\n    5\n  \u003c/span\u003e\n\u003c/a\u003e\n```\n\nWill output:\n\n```html\n\u003ca\n  href=\"/\"\n  class=\"px-3 py-2 text-sm font-medium rounded-md text-white bg-gray-900\"\n\u003e\n  Home\n  \u003cspan\n    class=\"ml-auto inline-block py-0.5 px-3 text-xs rounded-full bg-gray-50\"\n  \u003e\n    5\n  \u003c/span\u003e\n\u003c/a\u003e\n```\n\n#### Attributes\n\nName | Value | Description\n:-- | :-- | :--\n`current-class` | `string` | The css classes to apply if the link matches the current url.\n`default-class` | `string` | The css classes to apply if the link doesn't match the current url.\n`match` | `Full` (default) or `Base` | The method to use when matching the link to the current url.\n\n### MergeDefaultClassTagHelper\n\nThe merge default class tag helper is applied by adding the `merge-classes` attribute and will merge the `default-class` attribute with the `class` attribute.\nThis can be helpful when you aren't using another tag helper that works with the class lists, but still need access to the default classes of an element in your JavaScript.\n\n```html\n\u003cdiv\n  merge-classes\n  class=\"flex flex-col\"\n  default-class=\"bg-white text-black\"\n\u003e\n\u003c/div\u003e\n```\n\nThis tag helper target element is `*` so it can be used with any element, including web components and other tag helpers.\n\n```html\n\u003cheroicon-solid\n  icon=\"AtSymbol\"\n  merge-classes\n  class=\"h-5 w-5\"\n  default-class=\"text-gray-400\"\n/\u003e\n```\n\n#### Attributes\n\nName | Value | Description\n:-- | :-- | :--\n`default-class` | `string` | The classes to merge into the class attribute.\n\n### ValidationStatusTagHelper\n\nThe validation status tag helper will check the validation status of the model value passed to the `asp-for` attribute and apply one of two sets of css classes.\n\nThe `default-class` list will be applied if the field is valid, and the `error-class` list will be applied if the field is invalid.\n\n```html\n\u003cinput\n  type=\"email\"\n  asp-for=\"Input.Email\"\n  class=\"block w-full rounded-md pl-10 sm:text-sm transition\"\n  default-class=\"border-gray-300 focus:border-blue-400 focus:ring-blue-400\"\n  error-class=\"border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500\"\n\u003e\n```\n\nThis tag helper target element is `*` so it can be used with any element, including web components and other tag helpers.\n\n```html\n\u003cheroicon-solid\n  icon=\"AtSymbol\"\n  class=\"h-5 w-5\"\n  asp-for=\"Input.Email\"\n  default-class=\"text-gray-400\"\n  error-class=\"text-red-400\"\n/\u003e\n```\n\n#### Attributes\n\nName | Value | Description\n:-- | :-- | :--\n`asp-for` | `ModelExpression` | An expression to be evaluated against the current model.\n`default-class` | `string` | The classes to apply when the form field doesn't have any errors.\n`error-class` | `string` | The classes to apply when the form input has one or more errors.\n\n## Development\n\nThis project uses the [run-script](https://github.com/xt0rted/dotnet-run-script) dotnet tool to manage its build and test scripts.\nTo use this you'll need to run `dotnet tool install` and then `dotnet r` to see the available commands or look at the `scripts` section in the [global.json](global.json).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxt0rted%2Ftailwindcss-tag-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxt0rted%2Ftailwindcss-tag-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxt0rted%2Ftailwindcss-tag-helpers/lists"}