Socket
Socket
Sign inDemoInstall

tailwindcss-visuallyhidden

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-visuallyhidden

Visually Hidden utility plugin for tailwindcss framework


Version published
Maintainers
1
Weekly downloads
26

Weekly downloads

Readme

Source

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'],
})

Keywords

FAQs

Last updated on 17 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc