TailwindCSS Attributes Plugin
A plugin that provides utilities for adding styles with aria attributes. Create to play nice with vanilla-headless
Example
Installation
Getting started with the TailwindCSS Attributes plugin is a breeze. Follow these straightforward steps: To use this plugin, you need to install it via pnpm, npm or yarn.
Using pnpm
pnpm add -D tailwindcss-attributes
Using npm
npm install tailwindcss-attributes --save-dev
Using yarn
yarn add -D tailwindcss-attributes
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {},
corePlugins: {
aria: false,
},
plugins: [require("tailwindcss-attributes")],
}
Usage
Use aria-*
and data-*
attributes to style html elements
<headless-toggle class="flex items-center group aria-disabled:bg-gray-300" aria-disabled="true">
<button
aria-checked="true"
class="group-data-switch-on:bg-blue-500 bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2
focus:ring-offset-2 focus:ring-primary-500"
type="button"
>
<span class="sr-only">Use setting</span>
<span
aria-hidden="true"
class="group-data-switch-on:translate-x-5 translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-50"
data-switch
></span>
</button>
</headless-toggle>
Data Attributes for Vanilla-Headless
Use these vanilla-headless attributes by usingdata-{name}-{value}
....
<button class="data-switch-on:bg-primary-500">
<span class="data-switch-off:translate-x-0 data-switch-on:translate-x-5"></span>
</button>
...
Attribute | Variant |
---|---|
data-state="open" | data-state-open |
data-state="close" | data-state-close |
data-switch="on" | data-switch-on |
data-switch="off" | data-switch-off |
Aria Attributes
These aria-*
attribute all translate to a value of true
[aria-pressed="true"].aria-pressed\:shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
Aria attributes variants
The following attribute all evaluate to true
- aria-atomic:
- aria-busy:
- aria-checked:
- aria-current:
- aria-disabled:
- aria-expanded:
- aria-grabbed:
- aria-haspopup:
- aria-hidden:
- aria-invalid:
- aria-live:
- aria-modal:
- aria-multiline:
- aria-multiselectable:
- aria-pressed:
- aria-readonly:
- aria-required:
- aria-selected:
Aria attributes variants with modifiers
Use modifier to access attribute value
<div class="aria-activedescendant-application:text-red-500"></div>
- aria-activedescendant-{modifier}
- application
- combobox
- composite
- group
- textbox
- aria-autocomplete-{modifier}
- none
- both
- inline
- list
- aria-current-{modifier}
- page
- step
- location
- date
- time
- aria-dropeffect-{modifier}
- copy
- execute
- link
- move
- none
- popup
- aria-haspopup-{modifier}
- menu
- listbox
- tree
- grid
- dialog
- aria-invalid-{modifier}
- grammar
- spelling
- aria-live-{modifier}
- assertive
- off
- polite
- aria-orientation-{modifier}
- horizontal
- undefined
- vertical
- aria-pressed-{modifier}
- mixed
- aria-relevant-{modifier}
- additions
- all
- removals
- text
- aria-sort-{modifier}
- ascending
- descending
- none
- other
Contributing
Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.
Contributors
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- This plugin is inspired by the needs of web developers using Tailwind CSS.
- Special thanks to the Tailwind CSS team for creating such an amazing framework.