Tailwind Plugin Performance Zero Dependencies MIT

tailwindcss-visibility

A lightweight Tailwind CSS plugin that adds content-visibility and contain-intrinsic-size utilities. Unlocking browser-level rendering optimizations with a single class.

Documentation GitHub npm

What problem does this solve?

Browsers render every element on a page, even content the user hasn't scrolled to yet. On long pages with many sections, images, or cards, that's wasted work that slows down the initial load. The content-visibility CSS property tells the browser to skip rendering off-screen elements entirely until they're about to come into view.

This plugin gives you that as a Tailwind class. Add content-auto to a section and the browser defers its rendering until the user scrolls near it. Pair it with size-hint-md to tell the browser how much space to reserve, so the page doesn't jump when that content loads in.

If you're building long dashboards, article pages, image galleries, or anything with a lot of scrollable content, adding two classes to your sections can cut initial render time significantly with zero JavaScript.

Installation & Setup

Install via npm:

npm install tailwindcss-visibility

Add the plugin to tailwind.config.js: 

module.exports = {
  plugins: [require('tailwindcss-visibility')],
  theme: {
    extend: {
      sizeHint: {
        // optional custom size hints
        xs: '100px',
        card: '250px',
        '2xl': '1000px',
      },
    },
  },
};

Classes

Content Visibility

Class CSS What it does
content-auto content-visibility: auto Skips rendering of off-screen content until it's near the viewport.
content-hidden content-visibility: hidden Hides content while preserving its size in layout.
content-visible content-visibility: visible Forces content to always render, overriding any inherited optimization.

Size Hints

Pairs with content-auto to tell the browser how much space to reserve for off-screen elements, preventing layout shifts when they scroll into view.

Class CSS
size-hint-sm contain-intrinsic-size: 300px
size-hint-md contain-intrinsic-size: 500px
size-hint-lg contain-intrinsic-size: 800px
size-hint-[200px] contain-intrinsic-size: 200px (arbitrary)

Usage Examples

Long scrolling pages 

<!-- each section deferred until near viewport -->
<article class="content-auto size-hint-md">
  <h2>Section Title</h2>
  <p>Content...</p>
</article>

Image galleries 

<div class="grid grid-cols-3 gap-4">
  <div class="content-auto size-hint-[200px]">
    <img src="image1.jpg" alt="..." />
  </div>
</div>

Collapsed accordion content

<div class="content-hidden">
  <p>Accordion body that's off-screen...</p>
</div>

Why Use It

  • Faster initial paint

    Off-screen sections are skipped entirely at render time.

  • No layout shift

    Size hints reserve space so the scrollbar doesn't jump.

  • Fully customizable

    Override size hint values via theme config or arbitrary values.

  • Drop-in plugin

    One line in your Tailwind config. Works with v3 and later.

Browser Support

content-visibility is supported in all modern browsers. Older browsers simply ignore the property. No broken layouts.

  • Chrome & Edge 85+
  • Firefox 90+
  • Safari 15.4+

Gracefully degrades. Browsers that don't support the property render content normally.

Related

Writing

Tools