Visually Hidden utility plugin for tailwindcss framework

  • By webdna
  • Last update: Apr 21, 2022
  • Comments: 3

Visually Hidden Utility Tailwind Plugin


Hide only visually, but have it available for screen readers:

For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line:


Add this plugin to your project:

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


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


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

  variants: ['responsive', 'hover'],



  • 1

    Add not-visuallyhidden class

    This allows for toggling whether an element is hidden or not responsively (e.g. should be hidden on mobile but visible on medium screens and upwards).

  • 2

    Fix inverted VoiceOver reading

    This PR fixes an issue in VoiceOver where link text is read backwards. See example below.

    <a href="/stories/my-amazing-story">
      Read More
      <span class="visuallyhidden">About My Amazing Story</span>

    VO Reading (before fix): About My Amazing Story Read More VO Reading (after fix): Read More About My Amazing Story


  • 3

    Suggestion: use Tailwind's focus variant instead of a .focusable class

    <!-- Instead of this... -->
    <p class="visuallyhidden focusable">I'm visible on focus!</p>
    <!-- Maybe this? -->
    <p class="visuallyhidden focus:not-visuallyhidden">I'm visible on focus!</p>

    Couple reasons:

    • More consistent with Tailwind's built-in utilities
    • Some projects might not need any visuallyhidden elements to become visible on focus
    • Responsive variants could switch between visuallyhidden and not-visuallyhidden:
    <p class="visuallyhidden lg:not-visuallyhidden">
    On mobile, I'm visually hidden. On larger screens, I'm visible.