TailwindCSS Attributes

A plugin that provides utilities for adding styles with aria attributes. Create to play nice with vanilla-headless

📇 Table of Contents

* Installation
* Using pnpm
* Using npm
* Using yarn
* Usage
* Data Attributes for Vanilla-Headless
* Aria Attributes
* Aria attributes variants
* Aria attributes variants with modifiers
* Contributing
* License
* Author
* Acknowledgments

Installation


!npm (tag)
!npm
!NPM
!npm bundle size

Install the plugin from npm:

#### Using pnpm

``bash
pnpm add -D tailwindcss-attributes
`

#### Using npm

`bash
npm install tailwindcss-attributes --save-dev
`

#### Using yarn

`bash
yarn add -D tailwindcss-attributes
`

Then add the plugin to your tailwind.config.js file:

`javascript
// tailwind.config.js
module.exports = {
theme: {},
corePlugins: {
aria: false,
},
plugins: [require("tailwindcss-attributes")],
}
`

Usage

Use aria- and data- attributes to style html elements

`html


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-indigo-500"
type="button"
>
Use setting
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
>


`

$3

Use these vanilla-headless attributes by usingdata-{name}-{value}

`html
....



...
`

| 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 |

$3

These aria-* attribute all translate to a value of true

`css
[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);
}
`

$3

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:

$3

Use modifier to access attribute value

`html

``

- 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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_

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.