TailwindCssTagHelpers 0.2.0

<img src="assets/logo.svg" align="left" height="45"> tailwindcss-tag-helpers

ASP.NET tag helpers to make working with Tailwind CSS and Tailwind UI easier.

Installation

dotnet add package TailwindCssTagHelpers

Setup

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
  }
}

Settings

Usage

LinkAriaCurrentStateTagHelper

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>

Attributes

LinkTagHelper

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>

Attributes

Development

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.