Package Exports

tailwindcss-attributes
tailwindcss-attributes/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-attributes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TailwindCSS Attributes

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

Installation

npm (tag) npm NPM npm bundle size

Install the plugin from npm:

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

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.