tailwindcss-aria-attributes

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

# 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 [e-mail]

• 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 [e-mail].
This project is MIT licensed.

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