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.
npm install tailwindcss-content-visibilityA 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
Install the plugin from npm:
``sh`
npm install -D tailwindcss-content-visibility
Then add the plugin to your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-content-visibility"),
// ...
],
};
Combine the content-visibility-{x} and contain-intrinsic-size-{x} classes to control the visibility and natural size of an element.
`html`
...
This would output something like:
`css`
.content-visibility-auto {
content-visibility: auto;
}
.contain-intrinsic-size-\[auto_1000px\] {
contain-intrinsic-size: auto 1000px;
}
Both utilities fully support JIT for custom values, but the following default values for content-visibility are supported:
| Class | Output |
| ---------------------------- | --------- |
| content-visibility-auto | auto |content-visibility-hidden
| | hidden |content-visibility-visible
| | visible |
You can configure additional defaults and classes under the contentVisibility and containIntrinsicSize keys in your tailwind.config.js file:
`js`
// tailwind.config.js
module.exports = {
theme: {
extend: {
contentVisibility: {
foo: "bar",
},
containIntrinsicSize: {
example: "1px 20px",
},
},
},
};
With the above configuration, you could then use:
`html`...
And this would output something like:
`css``
.content-visibility-foo {
content-visibility: bar;
}
.contain-intrinsic-size-example {
contain-intrinsic-size: 1px 20px;
}