Skip to content

Adding More ARIA Modifiers to the Theme

You can use the aria-* modifier to conditionally style things based on ARIA attributes.

For example, to apply the bg-sky-700 class when the aria-checked attribute is set to true, use the aria-checked:bg-sky-700 class:

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">
  <!-- ... -->

You can customize which aria-* modifiers are available by editing theme.aria or theme.extend.aria in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
<ul aria-sort="ascending" class="aria-asc:bg-sky-700 bg-gray-600">
  <!-- ... -->

ARIA state modifiers can also target parent and sibling elements using the group-aria-* and peer-aria-* modifiers:

      <th aria-sort="ascending" class="group">
          class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"
          <!-- ... -->
      <!-- ... -->
  <!-- ... -->

From the Tailwind CSS docs.

Last Updated: