@fabien0102/tailwind-aria v1.0.0
Tailwind-aria
A plugin that provides variants for various aria-*
attributes and their supported
values.
Forked from @thoughtbot/tailwindcss-aria-attributes to fix some issues.
Installation
Install the npm package.
pnpm i -D @fabien0102/tailwind-ariaAdd the plugin to your tailwind configuration.
--- tailwind.config.ts
+++ tailwind.config.ts
export default {
plugins: [
+ require("@fabien0102/tailwind-aria"),
]
}Usage
There are two styles of attributes supported by the variants: boolean attributes, and enumerated values.
In some cases, attributes belong to both groups.
Boolean attributes
Variants for boolean attributes are active when the value is "true" and only
"true". When the attribute is missing or the value is "false", its other
applicable utility classes are applied.
Currently, the collection of variants includes support for the following boolean attributes:
| Attribute | Variant |
|---|---|
| aria-atomic="true" | aria-atomic: |
| aria-busy="true" | aria-busy: |
| aria-checked="true" | aria-checked: |
| aria-current="true" | aria-current: |
| aria-disabled="true" | aria-disabled: |
| aria-expanded="true" | aria-expanded: |
| aria-grabbed="true" | aria-grabbed: |
| aria-haspopup="true" | aria-haspopup: |
| aria-hidden="true" | aria-hidden: |
| aria-invalid="true" | aria-invalid: |
| aria-live="true" | aria-live: |
| aria-modal="true" | aria-modal: |
| aria-multiline="true" | aria-multiline: |
| aria-multiselectable="true" | aria-multiselectable: |
| aria-pressed="true" | aria-pressed: |
| aria-readonly="true" | aria-readonly: |
| aria-required="true" | aria-required: |
| aria-selected="true" | aria-selected: |
To utilize a boolean variant, prefix the attribute name with aria- and omit
the value:
<ul role="listbox">
<li role="option" class="aria-selected:border">Not selected</li>
<li role="option" class="aria-selected:border" aria-selected="true">
Selected
</li>
</ul>
<button class="aria-disabled:cursor-not-allowed" aria-disabled="true">
Submit
</button>Enumerated values
Variants for enumerated values are active when the value is equivalent to the variant's suffix.
When the attribute is missing or the value does not match the specified suffix, its other applicable utility classes are applied.
Currently, the collection of variants includes support for the following attributes and value combinations:
| Attribute | Variants |
|---|---|
| aria-autocomplete | aria-autocomplete-both: |
aria-autocomplete-inline: | |
aria-autocomplete-list: | |
aria-autocomplete-none: | |
| aria-current | aria-current-date: |
aria-current-location: | |
aria-current-page: | |
aria-current-step: | |
aria-current-time: | |
| aria-dropeffect | aria-dropeffect-copy: |
aria-dropeffect-execute: | |
aria-dropeffect-link: | |
aria-dropeffect-move: | |
aria-dropeffect-none: | |
aria-dropeffect-popup: | |
| aria-haspopup | aria-haspopup-dialog: |
aria-haspopup-grid: | |
aria-haspopup-listbox: | |
aria-haspopup-menu: | |
aria-haspopup-tree: | |
| aria-orientation | aria-orientation-horizontal: |
aria-orientation-undefined: | |
aria-orientation-vertical: | |
| aria-sort | aria-sort-ascending: |
aria-sort-descending: | |
aria-sort-none: | |
aria-sort-other: | |
| aria-relevant | aria-relevant-additions: |
aria-relevant-all: | |
aria-relevant-removals: | |
aria-relevant-text: |
To utilize an enumerated value variant, prefix the attribute name with aria-
and include the value:
<nav>
<a class="aria-current-page:font-bold" href="/" aria-current="page">Root</a>
<a class="aria-current-page:font-bold" href="/about">About us</a>
</nav>7 months ago