Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

@thoughtbot/tailwindcss-aria-attributes

A plugin that provides variants for various aria-* attributes and their supported values.

Installation

Install the plugin from npm:

# Using npm
npm install @thoughtbot/tailwindcss-aria-attributes

# Using Yarn
yarn add @thoughtbot/tailwindcss-aria-attributes

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@thoughtbot/tailwindcss-aria-attributes"),
    // ...
  ],
}

Usage

There are two styles of attributes supported by the variants: boolean attributes, and enumerated values.

In some cases, attributes belong to both groups.

Boolean attributes

Variants for boolean attributes are active when the value is "true" and only "true". When the attribute is missing or the value is "false", the typical application of utility classes will apply.

Currently, the collection of variants includes support for the following boolean attributes:

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:

To utilize a boolean variant, prefix the attribute name with aria- and omit the value:

<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

Variants for enumerated values are active when the value is equivalent to the variant's suffix.

When the attribute is missing or the value does not match the specified suffix, the typical application of utility classes will apply.

Currently, the collection of variants includes support for the following attributes and value combinations:

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 utilize an enumerated value variant, prefix the attribute name with aria- 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>

License

tailwindcss-aria-attributes is Copyright (c) 2021 thoughtbot, inc. It contains free software that may be redistributed under the terms specified in the LICENSE file.

About

thoughtbot

This project is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.

About

TailwindCSS variants for aria-* attributes

Topics

Resources

License

Code of conduct

Releases

No releases published

Sponsor this project

 

Packages

No packages published