JSPM

tailwindcss-visuallyhidden

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 95
  • Score
    100M100P100Q75525F
  • License MIT

Visually Hidden utility plugin for tailwindcss framework

Package Exports

  • tailwindcss-visuallyhidden

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-visuallyhidden) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Visually Hidden Utility Tailwind Plugin

Overview

Hide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

Installation

Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-visuallyhidden

Usage

You can add the plugin to your tailwind config as follows:

require('tailwindcss-visuallyhidden')()

This plugin outputs the following

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

As per the tailwind plugin docs you are able to pass variants (responsive, hover etc) as a parameter.

require('tailwindcss-visuallyhidden')({
  variants: ['responsive', 'hover'],
})