Tailwindcss-aria-attributes NPM

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 danestves@gmail.com

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.