tailwindcss-content-visibility v0.1.0

tailwindcss-content-visibility

A plugin that provides utilities for the content-visibility and contain-intrinsic-size properties. These properties, when used correctly, can drastically increase page render performance in modern browsers.

Please review the following resources for more information:

• https://web.dev/content-visibility/
• https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size

Installation

Install the plugin from npm:

npm install -D tailwindcss-content-visibility

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-content-visibility'),
    // ...
  ],
}

Usage

Combine the content-visibility-{x} and contain-intrinsic-size-{x} classes to control the visibility and natural size of an element.

<div class="content-visibility-auto contain-intrinsic-size-[0px_1000px]">
  ...
</div>

This would output something like:

.content-visibility-auto {
	content-visibility: auto;
}
.contain-intrinsic-size-\[0px_1000px\] {
	contain-intrinsic-size: 0px 1000px;
}

Both utilities fully support JIT for custom values, but the following default values for content-visibility are supported:

Configuration

You can configure additional defaults and classes under the contentVisibility and containIntrinsicSize keys in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
		extend: {
			contentVisibility: {
				'foo': 'bar',
			}
			containIntrinsicSize: {
				example: '1px 20px',
			},
		}
  },
}

With the above configuration, you could then use:

<div class="content-visibility-foo contain-intrinsic-size-example">
  ...
</div>

And this would output something like:

.content-visibility-foo {
	content-visibility: bar;
}
.contain-intrinsic-size-example {
	contain-intrinsic-size: 1px 20px;
}