Skip to content
A Tailwind CSS plugin that adds additional functionality to help improve accessibility.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore added 1.0.0 files Aug 8, 2018
LICENSE Initial commit Aug 8, 2018
index.js added 1.0.0 files Aug 8, 2018
package-lock.json added 1.0.0 files Aug 8, 2018
package.json added 1.0.0 files Aug 8, 2018
readme.md added 1.0.0 files Aug 8, 2018

readme.md

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:

<span class="sr-only">
  Screen readers only
</span>

Use on focused only elements (skip links etc):

<a class="sr-only sr-only-focusable" href="#content" tabindex="1">
  Skip to main content
</a>

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.

You can’t perform that action at this time.