TailwindCSS utilities for ARIA attributes, expanded and hidden
npm install tailwindcss-ariaThis Tailwind CSS plugin enables the use of ARIA attributes (aria-expanded, aria-hidden) as variants in your Tailwind CSS project. It allows you to style elements conditionally based on their ARIA attribute values, directly within your Tailwind utility classes.
- ARIA Attribute Variants: Supports aria-expanded and aria-hidden attributes.
- Group and Peer Variants: Extends Tailwind's group and peer variants to conditionally apply styles based on the presence of ARIA attributes in parent or sibling components.
To install the plugin, add it to your project using npm or yarn:
``bash`
npm install --save tailwindcss-ariaor
yarn add tailwindcss-aria
First, require the plugin in your tailwind.config.js file:
`js`
module.exports = {
plugins: [require("tailwindcss-aria")],
};
You can use the ARIA variants like any other Tailwind variant. Here are some examples:
`html`This element is semi-transparent when hidden.
Group and peer variants work with ARIA attributes to style elements based on the state of their parent or sibling components.
`html
This project is licensed under the MIT License.
Contributions are welcome. Please open an issue or submit a pull request with your suggestions.