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

Tailwind CSS v3 Required

This plugin is designed for Tailwind CSS v3. Tailwind CSS v4 shifted configuration from JavaScript to CSS, which breaks compatibility with most v3 plugins. Use this plugin on v3 projects only.

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