{"id":19593003,"url":"https://github.com/thoughtbot/tailwindcss-aria-attributes","last_synced_at":"2025-04-09T12:07:06.701Z","repository":{"id":50372817,"uuid":"418273543","full_name":"thoughtbot/tailwindcss-aria-attributes","owner":"thoughtbot","description":"TailwindCSS variants for aria-* attributes","archived":false,"fork":false,"pushed_at":"2022-09-06T18:50:20.000Z","size":11,"stargazers_count":115,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T11:07:23.486Z","etag":null,"topics":["accessibility","aria","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thoughtbot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-17T22:42:27.000Z","updated_at":"2024-09-12T10:30:58.000Z","dependencies_parsed_at":"2023-01-17T22:02:27.213Z","dependency_job_id":null,"html_url":"https://github.com/thoughtbot/tailwindcss-aria-attributes","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Ftailwindcss-aria-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Ftailwindcss-aria-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Ftailwindcss-aria-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Ftailwindcss-aria-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thoughtbot","download_url":"https://codeload.github.com/thoughtbot/tailwindcss-aria-attributes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036065,"owners_count":21037092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","aria","tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-11T08:37:47.710Z","updated_at":"2025-04-09T12:07:06.677Z","avatar_url":"https://github.com/thoughtbot.png","language":"JavaScript","readme":"# @thoughtbot/tailwindcss-aria-attributes\n\nA plugin that provides variants for various [`aria-*`\nattributes](https://www.w3.org/TR/wai-aria/#state_prop_def) and their supported\nvalues.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\n# Using npm\nnpm install @thoughtbot/tailwindcss-aria-attributes\n\n# Using Yarn\nyarn add @thoughtbot/tailwindcss-aria-attributes\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require(\"@thoughtbot/tailwindcss-aria-attributes\"),\n    // ...\n  ],\n}\n```\n\n## Usage\n\nThere are two styles of attributes supported by the variants: boolean\nattributes, and enumerated values.\n\nIn some cases, attributes belong to both groups.\n\n### Boolean attributes\n\nVariants for boolean attributes are active when the value is `\"true\"` and _only_\n`\"true\"`. When the attribute is missing or the value is `\"false\"`, its other\napplicable utility classes are applied.\n\nCurrently, the collection of variants includes support for the following boolean\nattributes:\n\n| Attribute                                                                           | Variant\n|-------------------------------------------------------------------------------------|------------------------\n| [aria-atomic=\"true\"](https://www.w3.org/TR/wai-aria/#aria-atomic)                   | `aria-atomic:`\n| [aria-busy=\"true\"](https://www.w3.org/TR/wai-aria/#aria-busy)                       | `aria-busy:`\n| [aria-checked=\"true\"](https://www.w3.org/TR/wai-aria/#aria-checked)                 | `aria-checked:`\n| [aria-current=\"true\"](https://www.w3.org/TR/wai-aria/#aria-current)                 | `aria-current:`\n| [aria-disabled=\"true\"](https://www.w3.org/TR/wai-aria/#aria-disabled)               | `aria-disabled:`\n| [aria-expanded=\"true\"](https://www.w3.org/TR/wai-aria/#aria-expanded)               | `aria-expanded:`\n| [aria-grabbed=\"true\"](https://www.w3.org/TR/wai-aria/#aria-grabbed)                 | `aria-grabbed:`\n| [aria-haspopup=\"true\"](https://www.w3.org/TR/wai-aria/#aria-haspopup)               | `aria-haspopup:`\n| [aria-hidden=\"true\"](https://www.w3.org/TR/wai-aria/#aria-hidden)                   | `aria-hidden:`\n| [aria-invalid=\"true\"](https://www.w3.org/TR/wai-aria/#aria-invalid)                 | `aria-invalid:`\n| [aria-live=\"true\"](https://www.w3.org/TR/wai-aria/#aria-live)                       | `aria-live:`\n| [aria-modal=\"true\"](https://www.w3.org/TR/wai-aria/#aria-modal)                     | `aria-modal:`\n| [aria-multiline=\"true\"](https://www.w3.org/TR/wai-aria/#aria-multiline)             | `aria-multiline:`\n| [aria-multiselectable=\"true\"](https://www.w3.org/TR/wai-aria/#aria-multiselectable) | `aria-multiselectable:`\n| [aria-pressed=\"true\"](https://www.w3.org/TR/wai-aria/#aria-pressed)                 | `aria-pressed:`\n| [aria-readonly=\"true\"](https://www.w3.org/TR/wai-aria/#aria-readonly)               | `aria-readonly:`\n| [aria-required=\"true\"](https://www.w3.org/TR/wai-aria/#aria-required)               | `aria-required:`\n| [aria-selected=\"true\"](https://www.w3.org/TR/wai-aria/#aria-selected)               | `aria-selected:`\n\nTo utilize a boolean variant, prefix the attribute name with `aria-` and omit\nthe value:\n\n```html\n\u003cul role=\"listbox\"\u003e\n  \u003cli role=\"option\" class=\"aria-selected:border\"\u003eNot selected\u003c/li\u003e\n  \u003cli role=\"option\" class=\"aria-selected:border\" aria-selected=\"true\"\u003eSelected\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cbutton class=\"aria-disabled:cursor-not-allowed\" aria-disabled=\"true\"\u003eSubmit\u003c/button\u003e\n```\n\n### Enumerated values\n\nVariants for enumerated values are active when the value is equivalent to the\nvariant's suffix.\n\n When the attribute is missing or the value does not match the specified suffix,\nits other applicable utility classes are applied.\n\nCurrently, the collection of variants includes support for the following\nattributes and value combinations:\n\n| Attribute                                                              | Variants                      |\n|------------------------------------------------------------------------|-------------------------------|\n| [aria-autocomplete](https://www.w3.org/TR/wai-aria/#aria-autocomplete) | `aria-autocomplete-both:`\n|                                                                        | `aria-autocomplete-inline:`\n|                                                                        | `aria-autocomplete-list:`\n|                                                                        | `aria-autocomplete-none:`\n| [aria-current](https://www.w3.org/TR/wai-aria/#aria-current)           | `aria-current-date:`\n|                                                                        | `aria-current-location:`\n|                                                                        | `aria-current-page:`\n|                                                                        | `aria-current-step:`\n|                                                                        | `aria-current-time:`\n| [aria-dropeffect](https://www.w3.org/TR/wai-aria/#aria-dropeffect)     | `aria-dropeffect-copy:`\n|                                                                        | `aria-dropeffect-execute:`\n|                                                                        | `aria-dropeffect-link:`\n|                                                                        | `aria-dropeffect-move:`\n|                                                                        | `aria-dropeffect-none:`\n|                                                                        | `aria-dropeffect-popup:`\n| [aria-haspopup](https://www.w3.org/TR/wai-aria/#aria-dropeffect)       | `aria-haspopup-dialog:`\n|                                                                        | `aria-haspopup-grid:`\n|                                                                        | `aria-haspopup-listbox:`\n|                                                                        | `aria-haspopup-menu:`\n|                                                                        | `aria-haspopup-tree:`\n| [aria-orientation](https://www.w3.org/TR/wai-aria/#aria-dropeffect)    | `aria-orientation-horizontal:`\n|                                                                        | `aria-orientation-undefined:`\n|                                                                        | `aria-orientation-vertical:`\n| [aria-sort](https://www.w3.org/TR/wai-aria/#aria-dropeffect)           | `aria-sort-ascending:`\n|                                                                        | `aria-sort-descending:`\n|                                                                        | `aria-sort-none:`\n|                                                                        | `aria-sort-other:`\n| [aria-relevant](https://www.w3.org/TR/wai-aria/#aria-dropeffect)       | `aria-relevant-additions:`\n|                                                                        | `aria-relevant-all:`\n|                                                                        | `aria-relevant-removals:`\n|                                                                        | `aria-relevant-text:`\n\nTo utilize an enumerated value variant, prefix the attribute name with `aria-`\nand include the value:\n\n```html\n\u003cnav\u003e\n  \u003ca class=\"aria-current-page:font-bold\" href=\"/\" aria-current=\"page\"\u003eRoot\u003c/a\u003e\n  \u003ca class=\"aria-current-page:font-bold\" href=\"/about\"\u003eAbout us\u003c/a\u003e\n\u003c/nav\u003e\n```\n\n## License\n\ntailwindcss-aria-attributes is Copyright (c) 2021 thoughtbot, inc.\nIt contains free software that may be redistributed\nunder the terms specified in the [LICENSE] file.\n\n[LICENSE]: /LICENSE\n\n## About\n\n![thoughtbot](http://presskit.thoughtbot.com/images/thoughtbot-logo-for-readmes.svg)\n\nThis project is maintained and funded by thoughtbot, inc.\nThe names and logos for thoughtbot are trademarks of thoughtbot, inc.\n\nWe love open source software!\nSee [our other projects][community]\nor [hire us][hire] to help build your product.\n\n[community]: https://thoughtbot.com/community?utm_source=github\n[hire]: https://thoughtbot.com/hire-us?utm_source=github\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Ftailwindcss-aria-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthoughtbot%2Ftailwindcss-aria-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Ftailwindcss-aria-attributes/lists"}