Welcome to tailwindcss-aria-attributes 👋

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

Install

``sh


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:

`js
// 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.

$3

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:

`html


• Not selected


• 
  Selected
  


Submit

`

$3

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:

`html



``

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_