ASP.NET tag helpers to make working with Tailwind CSS and Tailwind UI easier.
Included tag helpers:
Name | Description |
---|---|
LinkAriaCurrentStateTagHelper | Adds the aria-current attribute to links that are processed by LinkTagHelper and include an aria-current-state attribute |
LinkTagHelper | Applies css classes based on the href value and current url |
ValidationStatusTagHelper | Applies css classes based on the validation status of a model value |
dotnet add package TailwindCssTagHelpers
In your _ViewImports.cshtml
add:
@addTagHelper *, TailwindCssTagHelpers
In your Startup.cs
add:
public void ConfigureServices(IServiceCollection services)
{
services.AddTailwindCssTagHelpers(Configuration);
}
In your appsettings.json
add:
{
"TailwindCss": {
"IncludeComments": true
}
}
Name | Default value | Description |
---|---|---|
IncludeComments |
false |
Add html comments before the target tag with base, current, and default classes to help make development/debugging easier. |
Adds the aria-current="*"
attribute to links that are processed by the LinkTagHelper
and include an aria-current-state="*"
attribute.
<a
asp-area="" asp-controller="Home" asp-action="Index"
class="px-3 py-2 text-sm font-medium rounded-md"
default-class="text-gray-300 hover:bg-gray-700 hover:text-white"
current-class="text-white bg-gray-900"
aria-current-state="Page"
>
Home
</a>
Will output:
<a
href="/"
class="px-3 py-2 text-sm font-medium rounded-md text-white bg-gray-900"
aria-current="page"
>
Home
</a>
Name | Value | Description |
---|---|---|
aria-current-state |
True , Page (default), Step , False , Location , Date , Time |
The value to use for the aria-current attribute. |
The link tag helper will compare the href
to the current url and apply one of two sets of css classes.
The 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.
If an immediate child element has a default-class
or current-class
attribute it will also have its class lists merged.
The 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.
The 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.
Note
Query string values are not used for either method of matching.
<a
asp-area="" asp-controller="Home" asp-action="Index"
class="px-3 py-2 text-sm font-medium rounded-md"
default-class="text-gray-300 hover:bg-gray-700 hover:text-white"
current-class="text-white bg-gray-900"
match="Base"
>
Home
<span
class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
current-class="bg-gray-50"
default-class="bg-gray-200 text-gray-600 group-hover:bg-gray-200"
>
5
</span>
</a>
Will output:
<a
href="/"
class="px-3 py-2 text-sm font-medium rounded-md text-white bg-gray-900"
>
Home
<span
class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full bg-gray-50"
>
5
</span>
</a>
Name | Value | Description |
---|---|---|
current-class |
string |
The css classes to apply if the link matches the current url. |
default-class |
string |
The css classes to apply if the link doesn't match the current url. |
match |
Full (default) or Base |
The method to use when matching the link to the current url. |
The merge default class tag helper is applied by adding the merge-classes
attribute and will merge the default-class
attribute with the class
attribute.
This 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.
<div
merge-classes
class="flex flex-col"
default-class="bg-white text-black"
>
</div>
This tag helper target element is *
so it can be used with any element, including web components and other tag helpers.
<heroicon-solid
icon="AtSymbol"
merge-classes
class="h-5 w-5"
default-class="text-gray-400"
/>
Name | Value | Description |
---|---|---|
default-class |
string |
The classes to merge into the class attribute. |
The 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.
The default-class
list will be applied if the field is valid, and the error-class
list will be applied if the field is invalid.
<input
type="email"
asp-for="Input.Email"
class="block w-full rounded-md pl-10 sm:text-sm transition"
default-class="border-gray-300 focus:border-blue-400 focus:ring-blue-400"
error-class="border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500"
>
This tag helper target element is *
so it can be used with any element, including web components and other tag helpers.
<heroicon-solid
icon="AtSymbol"
class="h-5 w-5"
asp-for="Input.Email"
default-class="text-gray-400"
error-class="text-red-400"
/>
Name | Value | Description |
---|---|---|
asp-for |
ModelExpression |
An expression to be evaluated against the current model. |
default-class |
string |
The classes to apply when the form field doesn't have any errors. |
error-class |
string |
The classes to apply when the form input has one or more errors. |
This project uses the run-script dotnet tool to manage its build and test scripts.
To 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.