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

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.