TailwindCSS Attributes Plugin

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

#Installation

Getting started with the TailwindCSS Attributes plugin is a breeze. Follow these straightforward steps: To use this plugin, you need to install it via pnpm, npm or yarn.

#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-primary-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-primary-500">
  <span class="data-switch-off:translate-x-0 data-switch-on:translate-x-5"></span>
</button>
...

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

#Contributors

#License

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

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