tailwindcss-aria-attributes

Variants for several aria-* attributes and their supported values for TailwindCSS.

<img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />

<img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />

<img alt="License: MIT" src="https://img.shields.io/github/license/danestves/tailwindcss-aria-attributes" />

<img alt="Twitter: danestves" src="https://img.shields.io/twitter/follow/danestves.svg?style=social" />

TailwindCSS aria-\* attribute utilities plugin
This is a fork from @thoughtbot/tailwindcss-aria-attributes that is not currently on NPM

Install

# 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'),
    // ...
  ],
};

Usage

The versions support two different types of attributes: boolean attributes and enumerated values.
Attributes can be found in both groups in some circumstances.

Boolean attributes

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>

Enumerated values

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>

Author

👤 Daniel Esteves

• Website: https://danestves.com/
• Twitter: @danestves
• Github: @danestves
• LinkedIn: @danestves

🤝 Contributing

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.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Daniel Esteves .
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator