From 01d4b14e8d4c8d8850ab5de0c30c996e0e6ac410 Mon Sep 17 00:00:00 2001 From: Sam Haakman Date: Thu, 12 Oct 2023 12:23:31 +1000 Subject: [PATCH] added containment to readme --- README.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/README.md b/README.md index 651db86..fdc12fd 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ A collection of useful Tailwind plugins from the team at [Josephmark](https://jo ## Available Plugins - [oklab](#oklab) +- [containment](#containment) ## `oklab` @@ -81,3 +82,39 @@ eg: `text-oklab-[0.77_-0.09_-0.06]` Set background to an Oklab colour eg: `bg-oklab-[0.77_-0.09_-0.06]` + +## `containment` + +[CSS containment](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment) can help with rendering optimisation, especially on long pages with lots of elements. Setting `contain-content content-visibility-auto` on an element will let the browser skip rendering it when it is offscreen, saving on render time. + +### Configuration + +First, add containment to your `tailwind.config.js` file: + +```js +// tailwind.config.js +const { containment } = require("@josephmark/tailwind-plugins") +module.exports = { + plugins: [containment], +} +``` + +### Utilities + +**`contain-[value]`** + +Set the element's [containment mode](https://developer.mozilla.org/en-US/docs/Web/CSS/contain). Default values are available, and JIT values can be added for specific needs / combination values. + +eg: `contain-content` or `contain-[paint_layout]` + +**`content-visibility-[value]`** + +Set the element's [content visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility). + +eg: `content-visibility-auto` or `content-visibility-hidden` + +**`contain-intrinsic-size`** + +Set the element's [contain-intrinsic-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size). This allows culled elements to contribute to the page's scroll height to minimise scrollbar jank. + +eg: `contain-intrinsic-size-auto` or `contain-intrinsic-size-[auto_500px]`