TailwindCSS Visibility Plugin

Optimize your website's performance with smart content visibility management and size hints.

What is it?

The TailwindCSS Visibility Plugin provides utilities for controlling content visibility and rendering optimization through size hints. It leverages the CSS content-visibility property and size containment to improve page performance.

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster. [mdn]

Why use it?

  • Improve initial page load performance
  • Reduce layout shifts with size hints
  • Optimize rendering of off-screen content

How it works

The plugin provides two main features:

  1. Size Hints: Pre-allocate space for content using size-hint-* utilities
  2. Visibility States: Control content rendering with content-visible, content-hidden, and content-auto

Installation

To use the TailwindCSS Visibility Plugin, you'll need to have Node.js and npm installed on your system. Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm is the package manager that comes with Node.js, which allows you to install and manage packages like TailwindCSS.

If you haven't installed Node.js and npm yet, you can download them from the official Node.js website.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without having to leave your HTML. You can learn more about Tailwind CSS from the official Tailwind CSS website. 

npm install tailwindcss-visibility

After installing the plugin, you need to add it to your Tailwind CSS configuration file, tailwind.config.js, like this: 

module.exports = {
  plugins: [
    require('tailwindcss-visibility')
  ]
}

This configuration will enable the visibility utilities provided by the plugin, allowing you to optimize your website's performance with smart content visibility management and size hints.

Configuration

Configuring the TailwindCSS Visibility Plugin involves setting up your Tailwind CSS configuration file, tailwind.config.js. This file is where you define your project's design system, including custom themes, plugins, and other settings.

The configuration file allows you to extend Tailwind's default settings to better suit your project's needs. By configuring the plugin, you can define custom size hints and visibility states that help optimize the rendering performance of your web application.

Basic Setup

In the basic setup, you can configure default size hints that pre-allocate space for content, preventing layout shifts and improving performance. Here's an example configuration: 

module.exports = {
    plugins: [require('tailwindcss-visibility')],
    theme: {
        sizeHint: {
            sm: '300px',
            md: '500px',
            lg: '800px',
        },
    },
};

Extended Setup

For more advanced configurations, you can extend the default theme with custom size hints. This allows you to tailor the size hints to specific design requirements of your application. Here's how you can extend the theme: 

module.exports = {
    content: ['./src/**/*.{html,js}'],
    plugins: [require('tailwindcss-visibility')],
    theme: {
        extend: {
            sizeHint: {
                xs: '100px',
                '2xl': '1000px',
                custom: '250px',
            },
        },
    },
};

Configuring the plugin in this way ensures that your application can efficiently manage content visibility and size allocation, leading to improved performance and a smoother user experience.

Use Cases

Long Scrolling Pages

Optimize rendering performance for long pages with multiple sections: 

<article class="content-auto size-hint-md">
    <h2>Section Title</h2>
    <p>Content...</p>
</article>

Image Galleries

Prevent layout shifts in image galleries:

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

Accordion Sections

Optimize hidden content in accordions:

<div class="content-hidden">
    <p>Collapsed accordion content...</p>
</div>

Browser Support

The content-visibility property is widely supported across modern browsers, making it a reliable choice for performance optimization. Chrome and Edge support it from version 85 onwards, Firefox from version 90, and Safari joined with version 15.4. This broad support means you can confidently use these visibility utilities across all major platforms. For detailed compatibility information and usage statistics: [caniuse.com]

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

Performance Impact

Benefits

The TailwindCSS Visibility Plugin leverages modern CSS properties like content-visibility and size containment to significantly enhance web performance. Here's how it works:

  • Reduced Rendering Time

    By using content-visibility, the browser can skip rendering work for off-screen content, reducing the time spent on layout, style, and paint operations. This leads to faster initial page loads and smoother scrolling. Learn more.

  • Improved Paint Performance

    The plugin helps optimize paint performance by ensuring that only visible content is painted. This reduces unnecessary paint operations, which can be resource-intensive, especially on complex pages.

  • Optimized Resource Usage

    By managing the rendering of off-screen content, the plugin allows the browser to allocate resources more efficiently, leading to better memory usage and overall performance. This is particularly beneficial for devices with limited resources.

Technical Insights

The content-visibility property is a powerful tool for optimizing web performance. It allows the browser to skip rendering work for elements that are not visible on the screen, which can drastically reduce the time to first paint and improve overall responsiveness. This property is supported by most modern browsers, making it a reliable choice for performance optimization.

For a deeper understanding of how content-visibility works and its impact on performance, check out this detailed guide.

Size Hints

Understanding Size Hints

Size hints tell browsers how much space content will occupy before it's rendered. This prevents layout shifts and improves performance by pre-allocating the correct amount of space. When combined with content-visibility, size hints ensure smooth scrolling experiences even with complex layouts.

Default Size Hints:

  • size-hint-sm 300px - Ideal for small content blocks
  • size-hint-md 500px - Perfect for medium content sections
  • size-hint-lg 800px - Best for large content areas

Small (300px)

Default sm size hint

Medium (500px)

Default md size hint

Large (800px)

Default lg size hint

Visibility States

Understanding Visibility States

Content visibility states provide smarter ways to control content rendering compared to traditional methods like display:none or visibility:hidden. While those properties simply hide content, content-visibility optimizes browser rendering by skipping layout, style, and paint for off-screen content.

Available States:

  • content-visible Forces content to always render, regardless of viewport position
  • content-hidden Skips rendering while preserving element size, ideal for accordions and tabs
  • content-auto Automatically manages rendering based on viewport proximity for best performance

Always Visible

This content is always visible

Toggle Visibility

This content toggles visibility

Custom Values

Understanding Custom Values

Custom values allow you to define specific size hints tailored to your design needs. These values ensure that your layout remains consistent and visually appealing across different sections of your application.

Examples of Custom Values:

  • size-hint-[75px] Perfect for small custom elements
  • size-hint-[20rem] Ideal for medium-sized components

Custom 75px

Using arbitrary value

Custom 20rem

Using rem units

Responsive

Responsive Size Hints

Changes size based on breakpoint