Variants for several aria-*
attributes and their supported values for TailwindCSS.
TailwindCSS aria-* attribute utilities plugin
This is a fork from @thoughtbot/tailwindcss-aria-attributes that is not currently on NPM
# Using npm
npm install -D tailwindcss-aria-attributes
# Using yarn
yarn add --dev tailwindcss-aria-attributes
# Using pnpm
pnpm add --D tailwindcss-aria-attributes
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-aria-attributes'),
// ...
],
};
The versions support two different types of attributes: boolean attributes and enumerated values.
Attributes can be found in both groups in some circumstances.
When the value of a boolean attribute is "true"
and only "true"
, the variants for that attribute are active. When an attribute is absent or has the value "false"
, utility classes will be used as usual.
The following boolean attributes are supported by the variation's collection:
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: |
Prefix the attribute name with aria-
and leave the value blank to use a boolean variant:
<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>
When the value is equivalent to the variant's suffix, the variants for enumerated values are active.
When an attribute is absent or the value does not match the provided suffix, utility classes will be used as usual.
The following properties and value combinations are supported by the variations' collection:
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 use an enumerated value variation, add aria-
to the attribute name 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>
👤 Daniel Esteves danestves@gmail.com
- Website: https://danestves.com/
- Twitter: @danestves
- Github: @danestves
- LinkedIn: @danestves
Contributions, issues and feature requests are welcome!
Please don't hesitate to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!
Copyright © 2021 Daniel Esteves danestves@gmail.com.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator