A plugin that provides aria label variants that can apply utilities when aria-label existed.
Install the plugin from npm:
npm install -D tailwindcss-aria-plugin
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-aria-plugin"),
// ...
],
};
<!-- aria-[name]-[value] -->
<input type="checkbox" id="chk1-label" class="aria-checked:bg-blue-500" />
<label for="chk1-label">Remember my preferences</label>
none
:aria-autocomplete-none
inline
:aria-autocomplete-inline
list
:aria-autocomplete-list
both
:aria-autocomplete-both
true
:aria-checked
false
:aria-!checked
mixed
:aria-checked-mixed
true
:aria-disabled
false
:aria-!disabled
id
:aria-errormessage
true
:aria-expanded
false
:aria-!expanded
true
:aria-haspopup
false
:aria-!haspopup
menu
:aria-haspopup-menu
listbox
:aria-haspopup-listbox
tree
:aria-haspopup-tree
grid
:aria-haspopup-grid
dialog
:aria-haspopup-dialog
aria-hidden
true
:aria-hidden
false
:aria-!hidden
true
:aria-invalid
false
:aria-!invalid
grammar
:aria-invalid-grammar
spelling
:aria-invalid-spelling
<string>
:aria-label
<integer>
:aria-level
true
:aria-modal
false
:aria-!modal
true
:aria-multiline
false
:aria-!multiline
true
:aria-multiselectable
false
:aria-!multiselectable
horizontal
:aria-orientation-horizontal
vertical
:aria-orientation-vertical
<string>
:aria-placeholder
true
:aria-pressed
false
:aria-!pressed
mixed
:aria-pressed-mixed
true
:aria-readonly
false
:aria-!readonly
true
:aria-required
false
:aria-!required
true
:aria-selected
false
:aria-!selected
none
:aria-sort-none
ascending
:aria-sort-ascending
descending
:aria-sort-descending
other
:aria-sort-other
<number>
:aria-valuemax
<number>
:aria-valuemin
<number>
:aria-valuenow
<string>
:aria-valuetext