https://github.com/xt0rted/tailwindcss-tag-helpers
ASP.NET tag helpers to make working with Tailwind CSS and Tailwind UI easier
https://github.com/xt0rted/tailwindcss-tag-helpers
hacktoberfest taghelper taghelpers tailwindcss tailwindui
Last synced: 7 months ago
JSON representation
ASP.NET tag helpers to make working with Tailwind CSS and Tailwind UI easier
- Host: GitHub
- URL: https://github.com/xt0rted/tailwindcss-tag-helpers
- Owner: xt0rted
- License: mit
- Created: 2021-02-15T03:15:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T12:01:50.000Z (11 months ago)
- Last Synced: 2024-10-29T14:33:29.459Z (11 months ago)
- Topics: hacktoberfest, taghelper, taghelpers, tailwindcss, tailwindui
- Language: C#
- Homepage:
- Size: 638 KB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 
tailwindcss-tag-helpers
[](https://github.com/xt0rted/tailwindcss-tag-helpers/actions?query=workflow%3ACI)
[](https://www.nuget.org/packages/TailwindCssTagHelpers)
[](https://nuget.pkg.github.com/xt0rted/index.json)
[](LICENSE)
ASP.NET tag helpers to make working with [Tailwind CSS](https://tailwindcss.com/) and [Tailwind UI](https://tailwindui.com/) easier.
Included tag helpers:
Name | Description
:-- | :--
[LinkAriaCurrentStateTagHelper](#linkariacurrentstatetaghelper) | Adds the `aria-current` attribute to links that are processed by `LinkTagHelper` and include an `aria-current-state` attribute
[LinkTagHelper](#linktaghelper) | Applies css classes based on the `href` value and current url
[ValidationStatusTagHelper](#validationstatustaghelper) | Applies css classes based on the validation status of a model value
## Installation
```terminal
dotnet add package TailwindCssTagHelpers
```
## Setup
In your `_ViewImports.cshtml` add:
```html
@addTagHelper *, TailwindCssTagHelpers
```
In your `Startup.cs` add:
```csharp
public void ConfigureServices(IServiceCollection services)
{
services.AddTailwindCssTagHelpers(Configuration);
}
```
In your `appsettings.json` add:
```json
{
"TailwindCss": {
"IncludeComments": true
}
}
```
## Settings
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.
## Usage
### LinkAriaCurrentStateTagHelper
Adds 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.
```html
Home
```
Will output:
```html
Home
```
#### Attributes
Name | Value | Description
:-- | :-- | :--
`aria-current-state` | `True`, `Page` (default), `Step`, `False`, `Location`, `Date`, `Time` | The value to use for the `aria-current` attribute.
### 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](https://marketplace.visualstudio.com/items?itemName=heybourn.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.
```html
Home
5
```
Will output:
```html
Home
5
```
#### Attributes
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.
### MergeDefaultClassTagHelper
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.
```html
```
This tag helper target element is `*` so it can be used with any element, including web components and other tag helpers.
```html
```
#### Attributes
Name | Value | Description
:-- | :-- | :--
`default-class` | `string` | The classes to merge into the class attribute.
### ValidationStatusTagHelper
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.
```html
```
This tag helper target element is `*` so it can be used with any element, including web components and other tag helpers.
```html
```
#### Attributes
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.
## Development
This project uses the [run-script](https://github.com/xt0rted/dotnet-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](global.json).