Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new
aria-{state}
variant which makes it easier to style elements based on the states of ARIA attributes.For example, you can update the background color of an element based on whether the
aria-checked
state istrue
:Included variants
By default Tailwind provides the variants for the most common boolean ARIA attributes:
aria-checked:
[aria-checked="true"]
aria-disabled:
[aria-disabled="true"]
aria-expanded:
[aria-expanded="true"]
aria-hidden:
[aria-hidden="true"]
aria-pressed:
[aria-pressed="true"]
aria-readonly:
[aria-readonly="true"]
aria-required:
[aria-required="true"]
aria-selected:
[aria-selected="true"]
Using custom values
You can customize which ARIA variants are available by editing
theme.aria
ortheme.extend.aria
in yourtailwind.config.js
file:Then you can use any custom ARIA variants you've configured in your project:
Arbitrary values
For more complex ARIA attributes that take specific values (like
aria-activedescendant
), or for situations where it just doesn't feel worth it to add an alias to your theme, you can use the arbitrary value/square bracket notation to create custom ARIA variants on the fly:Group and peer variants
The ARIA variants are also available as
group
andpeer
modifiers.