content-auto
Maps to content-visibility: auto for sections that can be skipped offscreen.
01 · Why it exists
Long pages should not render everything up front.
Browsers normally render every section, card, and image even when the user has not scrolled to that content yet. On documentation pages, directories, and article archives, that initial work can be wasted.
content-visibility: auto lets the browser skip off-screen rendering until it is
needed. This plugin makes that optimization available as Tailwind utilities.
Utilities
A small class set around browser rendering hints.
content-hidden
Maps to content-visibility: hidden for content that should not render.
content-visible
Restores normal rendering with content-visibility: visible.
Size hints
Adds contain-intrinsic-size helpers so skipped content reserves space.
02 · Setup
Built for Tailwind CSS v3 plugin configuration.
| Step | Detail |
|---|---|
| Install | npm install tailwindcss-visibility |
| Register | Add require('tailwindcss-visibility') to tailwind.config.js. |
| Use | Apply content-auto and a size hint to long sections or repeated cards. |
| Tailwind v4 | Use a CSS-first approach instead. This plugin targets the v3 JavaScript plugin model. |
03 · Best fit
Use it where skipped rendering has a measurable payoff.
The best candidates are long pages with repeated sections: docs, product grids, feeds, archives, and marketing pages with many cards below the fold.
Pair content-auto with a realistic intrinsic size hint. That prevents layout jumps
while still letting the browser defer rendering work.