https://github.com/jack-pallot/tailwindcss-accessibility

A Tailwind CSS plugin that adds additional functionality to help improve accessibility.
https://github.com/jack-pallot/tailwindcss-accessibility

Last synced: 3 months ago
JSON representation

A Tailwind CSS plugin that adds additional functionality to help improve accessibility.

• Host: GitHub
• URL: https://github.com/jack-pallot/tailwindcss-accessibility
• Owner: jack-pallot
• License: mit
• Created: 2018-08-08T17:43:49.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-08T19:21:22.000Z (almost 6 years ago)
• Last Synced: 2024-03-18T23:47:10.663Z (3 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-accessibility
• Size: 1.95 KB
• Stars: 38
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Lists

• awesome-stars - tailwindcss-accessibility - pallot | 23 | (JavaScript)
• awesome-tailwindcss - Accessibility - Adds screen reader utilities. (Plugins)

README

        
# Tailwind CSS Accessibility Plugin

A Tailwind CSS plugin that adds additional functionality to help improve accessibility.

### Installing

    npm install tailwindcss-accessibility

or

    yarn add tailwindcss-accessibility

Simply require the installed plugin directly to your Tailwind config:

    plugins: [

      require('tailwindcss-accessibility')

    ]

### Usage

For usage on individual elements:

    

      Screen readers only

    

Use on focused only elements (skip links etc):

    

      Skip to main content

    

### Utilities

By default the class utils are taken from Bootstrap 4, a highly battle-tested framework:

    .sr-only {}

    .sr-only-focusable {}

### Contributions

The goal of this project is to be a single source for as many relevant CSS accessibility helpers as possible. If we're missing something, or you would like to contribute, post an issue or PR.