# @fabien0102/tailwind-aria
> TailwindCSS aria-* attribute utilities plugin
Latest version **1.0.0** (published 2023-10-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install @fabien0102/tailwind-aria
pnpm add @fabien0102/tailwind-aria
yarn add @fabien0102/tailwind-aria
bun add @fabien0102/tailwind-aria
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-18 |
| First published | 2023-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fabien BERNARD |
| Maintainers | fabien0102 |
| Keywords | tailwindcss, plugin, aria |
## Links
- npm: https://www.npmjs.com/package/@fabien0102/tailwind-aria
- npm.io page: https://npm.io/package/@fabien0102/tailwind-aria
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
## Recent versions
- 1.0.0 (latest) — 2023-10-18
## README
# Tailwind-aria
A plugin that provides variants for various [`aria-*`
attributes](https://www.w3.org/TR/wai-aria/#state_prop_def) and their supported
values.
Forked from @thoughtbot/tailwindcss-aria-attributes to fix some issues.
## Installation
Install the npm package.
```sh
pnpm i -D @fabien0102/tailwind-aria
```
Add the plugin to your tailwind configuration.
```diff
--- tailwind.config.ts
+++ tailwind.config.ts
export default {
plugins: [
+ require("@fabien0102/tailwind-aria"),
]
}
```
## Usage
There are two styles of attributes supported by the variants: boolean
attributes, and enumerated values.
In some cases, attributes belong to both groups.
### Boolean attributes
Variants for boolean attributes are active when the value is `"true"` and _only_
`"true"`. When the attribute is missing or the value is `"false"`, its other
applicable utility classes are applied.
Currently, the collection of variants includes support for the following boolean
attributes:
| Attribute | Variant |
| ----------------------------------------------------------------------------------- | ----------------------- |
| [aria-atomic="true"](https://www.w3.org/TR/wai-aria/#aria-atomic) | `aria-atomic:` |
| [aria-busy="true"](https://www.w3.org/TR/wai-aria/#aria-busy) | `aria-busy:` |
| [aria-checked="true"](https://www.w3.org/TR/wai-aria/#aria-checked) | `aria-checked:` |
| [aria-current="true"](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current:` |
| [aria-disabled="true"](https://www.w3.org/TR/wai-aria/#aria-disabled) | `aria-disabled:` |
| [aria-expanded="true"](https://www.w3.org/TR/wai-aria/#aria-expanded) | `aria-expanded:` |
| [aria-grabbed="true"](https://www.w3.org/TR/wai-aria/#aria-grabbed) | `aria-grabbed:` |
| [aria-haspopup="true"](https://www.w3.org/TR/wai-aria/#aria-haspopup) | `aria-haspopup:` |
| [aria-hidden="true"](https://www.w3.org/TR/wai-aria/#aria-hidden) | `aria-hidden:` |
| [aria-invalid="true"](https://www.w3.org/TR/wai-aria/#aria-invalid) | `aria-invalid:` |
| [aria-live="true"](https://www.w3.org/TR/wai-aria/#aria-live) | `aria-live:` |
| [aria-modal="true"](https://www.w3.org/TR/wai-aria/#aria-modal) | `aria-modal:` |
| [aria-multiline="true"](https://www.w3.org/TR/wai-aria/#aria-multiline) | `aria-multiline:` |
| [aria-multiselectable="true"](https://www.w3.org/TR/wai-aria/#aria-multiselectable) | `aria-multiselectable:` |
| [aria-pressed="true"](https://www.w3.org/TR/wai-aria/#aria-pressed) | `aria-pressed:` |
| [aria-readonly="true"](https://www.w3.org/TR/wai-aria/#aria-readonly) | `aria-readonly:` |
| [aria-required="true"](https://www.w3.org/TR/wai-aria/#aria-required) | `aria-required:` |
| [aria-selected="true"](https://www.w3.org/TR/wai-aria/#aria-selected) | `aria-selected:` |
To utilize a boolean variant, prefix the attribute name with `aria-` and omit
the value:
```html
Not selected
Selected
```
### Enumerated values
Variants for enumerated values are active when the value is equivalent to the
variant's suffix.
When the attribute is missing or the value does not match the specified suffix,
its other applicable utility classes are applied.
Currently, the collection of variants includes support for the following
attributes and value combinations:
| Attribute | Variants |
| ---------------------------------------------------------------------- | ------------------------------ |
| [aria-autocomplete](https://www.w3.org/TR/wai-aria/#aria-autocomplete) | `aria-autocomplete-both:` |
| | `aria-autocomplete-inline:` |
| | `aria-autocomplete-list:` |
| | `aria-autocomplete-none:` |
| [aria-current](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current-date:` |
| | `aria-current-location:` |
| | `aria-current-page:` |
| | `aria-current-step:` |
| | `aria-current-time:` |
| [aria-dropeffect](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-dropeffect-copy:` |
| | `aria-dropeffect-execute:` |
| | `aria-dropeffect-link:` |
| | `aria-dropeffect-move:` |
| | `aria-dropeffect-none:` |
| | `aria-dropeffect-popup:` |
| [aria-haspopup](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-haspopup-dialog:` |
| | `aria-haspopup-grid:` |
| | `aria-haspopup-listbox:` |
| | `aria-haspopup-menu:` |
| | `aria-haspopup-tree:` |
| [aria-orientation](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-orientation-horizontal:` |
| | `aria-orientation-undefined:` |
| | `aria-orientation-vertical:` |
| [aria-sort](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-sort-ascending:` |
| | `aria-sort-descending:` |
| | `aria-sort-none:` |
| | `aria-sort-other:` |
| [aria-relevant](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-relevant-additions:` |
| | `aria-relevant-all:` |
| | `aria-relevant-removals:` |
| | `aria-relevant-text:` |
To utilize an enumerated value variant, prefix the attribute name with `aria-`
and include the value:
```html
```
---
_Source: https://npm.io/package/@fabien0102/tailwind-aria · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._