@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/background-position.mdx

@@ -0,0 +1,171 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "background-position";
+export const description = "Utilities for controlling the position of an element's background image.";
+
+<ApiTable
+  rows={[
+    ["bg-top-left", "background-position: top left;"],
+    ["bg-top", "background-position: top;"],
+    ["bg-top-right", "background-position: top right;"],
+    ["bg-left", "background-position: left;"],
+    ["bg-center", "background-position: center;"],
+    ["bg-right", "background-position: right;"],
+    ["bg-bottom-left", "background-position: bottom left;"],
+    ["bg-bottom", "background-position: bottom;"],
+    ["bg-bottom-right", "background-position: bottom right;"],
+    ["bg-position-(<custom-property>)", "background-position: var(<custom-property>);"],
+    ["bg-position-[<value>]", "background-position: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `bg-center`, `bg-right`, and `bg-top-left` to control the position of an element's background image:
+
+<Figure hint="Hover over these examples to see the full image">
+
+<Example padding={false}>
+  {
+    <div className="w-full">
+      <div className="flex snap-x scroll-p-4 items-end overflow-x-scroll overflow-y-hidden p-8 pt-16 sm:grid sm:grid-cols-3 sm:gap-16">
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-top-left
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-left outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute top-0 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-top
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute top-0 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-top-right
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-top-right outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute top-0 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-left
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-left outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-6 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-center
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-center outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-6 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-right
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-right outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-6 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-bottom-left
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-left outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-12 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-bottom
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-12 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+        <div className="relative -mx-8 w-48 shrink-0 snap-start snap-always sm:w-auto">
+          <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            bg-bottom-right
+          </p>
+          <div className="group relative mx-auto h-20 w-20 rounded-lg">
+            <div className="relative z-10 h-full w-full rounded-md bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-[size:8rem] bg-bottom-right outline -outline-offset-1 outline-black/10"></div>
+            <img
+              className="absolute -top-12 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-top-left,bg-top-right,bg-bottom-right,bg-bottom-left,bg-center,bg-right,bg-top,bg-bottom,bg-left] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-top"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-left"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-center"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-right"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div>
+<div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="bg-position" value="center_top_1rem" name="background position" variable="bg-position" />
+
+### Responsive design
+
+<ResponsiveDesign property="background-position" defaultClass="bg-center" featuredClass="bg-top" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/background-repeat.mdx

@@ -0,0 +1,127 @@
+import cloudsImg from "@/docs/img/clouds.svg";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "background-repeat";
+export const description = "Utilities for controlling the repetition of an element's background image.";
+
+<ApiTable
+  rows={[
+    ["bg-repeat", "background-repeat: repeat;"],
+    ["bg-repeat-x", "background-repeat: repeat-x;"],
+    ["bg-repeat-y", "background-repeat: repeat-y;"],
+    ["bg-repeat-space", "background-repeat: space;"],
+    ["bg-repeat-round", "background-repeat: round;"],
+    ["bg-no-repeat", "background-repeat: no-repeat;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `bg-repeat` utility to repeat the background image both vertically and horizontally:
+
+<Figure>
+
+<Example padding={false}>
+  {<div className="h-64 bg-center bg-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-repeat] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>
+```
+
+</Figure>
+
+### Repeating horizontally
+
+Use the `bg-repeat-x` utility to only repeat the background image horizontally:
+
+<Figure>
+
+<Example padding={false}>
+  {<div className="h-64 bg-center bg-repeat-x" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-repeat-x] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>
+```
+
+</Figure>
+
+### Repeating vertically
+
+Use the `bg-repeat-y` utility to only repeat the background image vertically:
+
+<Figure>
+
+<Example padding={false}>
+  {<div className="h-64 bg-center bg-repeat-y" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-repeat-y] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>
+```
+
+</Figure>
+
+### Preventing clipping
+
+Use the `bg-repeat-space` utility to repeat the background image without clipping:
+
+<Figure>
+
+<Example padding={false} resizable>
+  {<div className="h-64 bg-center bg-repeat-space" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-repeat-space] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>
+```
+
+</Figure>
+
+### Preventing clipping and gaps
+
+Use the `bg-repeat-round` utility to repeat the background image without clipping, stretching if needed to avoid gaps:
+
+<Figure>
+
+<Example padding={false} resizable>
+  {<div className="h-64 bg-center bg-repeat-round" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-repeat-round] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>
+```
+
+</Figure>
+
+### Disabling repeating
+
+Use the `bg-no-repeat` utility to prevent a background image from repeating:
+
+<Figure>
+
+<Example padding={false}>
+  {<div className="h-64 bg-center bg-no-repeat" style={{ backgroundImage: `url(${cloudsImg.src})` }}></div>}
+</Example>
+
+```html
+<!-- [!code classes:bg-no-repeat] -->
+<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="background-repeat" defaultClass="bg-repeat" featuredClass="bg-repeat-x" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/background-size.mdx

@@ -0,0 +1,100 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "background-size";
+export const description = "Utilities for controlling the background size of an element's background image.";
+
+<ApiTable
+  rows={[
+    ["bg-auto", "background-size: auto;"],
+    ["bg-cover", "background-size: cover;"],
+    ["bg-contain", "background-size: contain;"],
+    ["bg-size-(<custom-property>)", "background-size: var(<custom-property>);"],
+    ["bg-size-[<value>]", "background-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Filling the container
+
+Use the `bg-cover` utility to scale the background image until it fills the background layer, cropping the image if needed:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-cover bg-center bg-no-repeat"></div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-cover] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>
+```
+
+</Figure>
+
+### Filling without cropping
+
+Use the `bg-contain` utility to scale the background image to the outer edges without cropping or stretching:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-contain bg-center bg-no-repeat sm:bg-top"></div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-contain] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>
+```
+
+</Figure>
+
+### Using the default size
+
+Use the `bg-auto` utility to display the background image at its default size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex h-48 w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="relative z-10 h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&h=160&q=80)] bg-auto bg-center bg-no-repeat"></div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-auto] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="bg-size" value="auto_100px" name="background size" variable="image-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="background-size" defaultClass="bg-auto" featuredClass="bg-contain" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/block-size.mdx

@@ -0,0 +1,190 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "block-size";
+export const description = "Utilities for setting the block size of an element.";
+
+<ApiTable
+  rows={[
+    ["block-<number>", "block-size: calc(var(--spacing) * <number>);"],
+    ["block-<fraction>", "block-size: calc(<fraction> * 100%);"],
+    ["block-auto", "block-size: auto;"],
+    ["block-px", "block-size: 1px;"],
+    ["block-full", "block-size: 100%;"],
+    ["block-screen", "block-size: 100vh;"],
+    ["block-dvh", "block-size: 100dvh;"],
+    ["block-dvw", "block-size: 100dvw;"],
+    ["block-lvh", "block-size: 100lvh;"],
+    ["block-lvw", "block-size: 100lvw;"],
+    ["block-svh", "block-size: 100svh;"],
+    ["block-svw", "block-size: 100svw;"],
+    ["block-min", "block-size: min-content;"],
+    ["block-max", "block-size: max-content;"],
+    ["block-fit", "block-size: fit-content;"],
+    ["block-lh", "block-size: 1lh;"],
+    ["block-(<custom-property>)", "block-size: var(<custom-property>);"],
+    ["block-[<value>]", "block-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `block-<number>` utilities like `block-24` and `block-64` to set an element to a fixed block size based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-96">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-96</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-80">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-80</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-64">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-64</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-48">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-48</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-40">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-40</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-32">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-32</div>
+      </div>
+      <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-24">
+        <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-24</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:block-96,block-80,block-64,block-48,block-40,block-32,block-24] -->
+<div class="block-96 ...">block-96</div>
+<div class="block-80 ...">block-80</div>
+<div class="block-64 ...">block-64</div>
+<div class="block-48 ...">block-48</div>
+<div class="block-40 ...">block-40</div>
+<div class="block-32 ...">block-32</div>
+<div class="block-24 ...">block-24</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `block-full` or `block-<fraction>` utilities like `block-1/2` and `block-2/5` to give an element a percentage-based block size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white block-96">
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-full">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-full</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-9/10">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-9/10</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-3/4">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-3/4</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/2">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/2</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 block-1/3">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">block-1/3</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:block-9/10,block-3/4,block-1/2,block-1/3,block-full] -->
+<div class="block-full ...">block-full</div>
+<div class="block-9/10 ...">block-9/10</div>
+<div class="block-3/4 ...">block-3/4</div>
+<div class="block-1/2 ...">block-1/2</div>
+<div class="block-1/3 ...">block-1/3</div>
+```
+
+</Figure>
+
+### Matching viewport
+
+Use the `block-screen` utility to make an element span the entire block size of the viewport:
+
+```html
+<!-- [!code classes:block-screen] -->
+<div class="block-screen">
+  <!-- ... -->
+</div>
+```
+
+### Matching dynamic viewport
+
+Use the `block-dvh` utility to make an element span the entire block size of the viewport, which changes as the browser UI expands or contracts:
+
+```html
+<!-- [!code classes:block-dvh] -->
+<div class="block-dvh">
+  <!-- ... -->
+</div>
+```
+
+### Matching large viewport
+
+Use the `block-lvh` utility to set an element's block size to the largest possible size of the viewport:
+
+```html
+<!-- [!code classes:block-lvh] -->
+<div class="block-lvh">
+  <!-- ... -->
+</div>
+```
+
+### Matching small viewport
+
+Use the `block-svh` utility to set an element's block size to the smallest possible size of the viewport:
+
+```html
+<!-- [!code classes:block-svh] -->
+<div class="block-svh">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="block" value="32rem" name="block size" variable="block-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="block-size" defaultClass="block-1/2" featuredClass="block-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="block" />