Add `content-visibility-auto` Tailwind utility

src/lib/components/PublicationSection.svelte

@@ -105,7 +105,7 @@
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
-<section bind:this={sectionRef} class='publication-leather'>
+<section bind:this={sectionRef} class='publication-leather content-visibility-auto'>
   {#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])}
     <TextPlaceholder size='xxl' />
   {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]}

tailwind.config.cjs

@@ -1,4 +1,5 @@
 import flowbite from "flowbite/plugin";
+import plugin from "tailwindcss/plugin";
 
 /** @type {import('tailwindcss').Config}*/
 const config = {
@@ -85,6 +86,25 @@ const config = {
 
   plugins: [
     flowbite(),
+    plugin(function({ addUtilities, matchUtilities }) {
+      addUtilities({
+        '.content-visibility-auto': {
+          'content-visibility': 'auto',
+        },
+        '.contain-size': {
+          contain: 'size',
+        },
+      });
+
+      matchUtilities({
+        'contain-intrinsic-w-*': value => ({
+          width: value,
+        }),
+        'contain-intrinsic-h-*': value => ({
+          height: value,
+        })
+      });
+    })
   ],
 
   darkMode: 'class',