@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/mask-type.mdx

@@ -0,0 +1,98 @@
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "mask-type";
+export const description = "Utilities for controlling how an SVG mask is interpreted.";
+
+<ApiTable
+  rows={[
+    ["mask-type-alpha", "mask-type: alpha;"],
+    ["mask-type-luminance", "mask-type: luminance;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `mask-type-alpha` and `mask-type-luminance` utilities to control the type of an SVG mask:
+
+<Figure>
+
+<Example>
+  {
+    <div>
+      <Stripes
+        border
+        className="relative mx-auto flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
+      >
+        <svg viewBox="0 0 384 192">
+          <mask id="blob1" className="mask-type-alpha fill-gray-700/70">
+            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
+          </mask>
+          <image
+            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
+            height="100%"
+            width="100%"
+            preserveAspectRatio="xMaxYMid slice"
+            mask="url(#blob1)"
+          />
+        </svg>
+      </Stripes>
+      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">mask-type-alpha</p>
+      <Stripes
+        border
+        className="relative mx-auto mt-8 flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
+      >
+        <svg viewBox="0 0 384 192">
+          <mask id="blob2" className="mask-type-luminance fill-gray-700/70">
+            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
+          </mask>
+          <image
+            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
+            height="100%"
+            width="100%"
+            preserveAspectRatio="xMaxYMid slice"
+            mask="url(#blob2)"
+          />
+        </svg>
+      </Stripes>
+      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+        mask-type-luminance
+      </p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mask-type-alpha,mask-type-luminance] -->
+<svg>
+  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">
+    <path d="..."></path>
+  </mask>
+  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
+</svg>
+
+<svg>
+  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">
+    <path d="..."></path>
+  </mask>
+  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
+</svg>
+```
+
+</Figure>
+
+When using `mask-type-luminance` the luminance value of the SVG mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With `mask-alpha`, the opacity of the SVG mask determines the visibility of the masked element.
+
+### Responsive design
+
+<ResponsiveDesign
+  element="mask"
+  property="mask-type"
+  defaultClass="mask-type-alpha"
+  featuredClass="mask-type-luminance"
+/>

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

@@ -0,0 +1,153 @@
+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 = "max-block-size";
+export const description = "Utilities for setting the maximum block size of an element.";
+
+<ApiTable
+  rows={[
+    ["max-block-<number>", "max-block-size: calc(var(--spacing) * <number>);"],
+    ["max-block-<fraction>", "max-block-size: calc(<fraction> * 100%);"],
+    ["max-block-none", "max-block-size: none;"],
+    ["max-block-px", "max-block-size: 1px;"],
+    ["max-block-full", "max-block-size: 100%;"],
+    ["max-block-screen", "max-block-size: 100vh;"],
+    ["max-block-dvh", "max-block-size: 100dvh;"],
+    ["max-block-dvw", "max-block-size: 100dvw;"],
+    ["max-block-lvh", "max-block-size: 100lvh;"],
+    ["max-block-lvw", "max-block-size: 100lvw;"],
+    ["max-block-svh", "max-block-size: 100svh;"],
+    ["max-block-svw", "max-block-size: 100svw;"],
+    ["max-block-min", "max-block-size: min-content;"],
+    ["max-block-max", "max-block-size: max-content;"],
+    ["max-block-fit", "max-block-size: fit-content;"],
+    ["max-block-lh", "max-block-size: 1lh;"],
+    ["max-block-(<custom-property>)", "max-block-size: var(<custom-property>);"],
+    ["max-block-[<value>]", "max-block-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `max-block-<number>` utilities like `max-block-24` and `max-block-64` to set an element to a fixed maximum block size based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex block-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid block-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 block-full rounded-lg" />
+        <div className="relative block-full max-block-80 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-80</div>
+        </div>
+      </div>
+      <div className="relative grid block-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 block-full rounded-lg" />
+        <div className="relative block-full max-block-64 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-64</div>
+        </div>
+      </div>
+      <div className="relative grid block-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 block-full rounded-lg" />
+        <div className="relative block-full max-block-48 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-48</div>
+        </div>
+      </div>
+      <div className="relative grid block-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 block-full rounded-lg" />
+        <div className="relative block-full max-block-40 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-40</div>
+        </div>
+      </div>
+      <div className="relative grid block-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 block-full rounded-lg" />
+        <div className="relative block-full max-block-32 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-32</div>
+        </div>
+      </div>
+
+    </div>
+
+}
+
+</Example>
+
+```html
+<!-- [!code classes:max-block-80,max-block-64,max-block-48,max-block-40,max-block-32,max-block-24] -->
+<div class="block-96 ...">
+  <div class="block-full max-block-80 ...">max-block-80</div>
+  <div class="block-full max-block-64 ...">max-block-64</div>
+  <div class="block-full max-block-48 ...">max-block-48</div>
+  <div class="block-full max-block-40 ...">max-block-40</div>
+  <div class="block-full max-block-32 ...">max-block-32</div>
+</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `max-block-full` or `max-block-<fraction>` utilities like `max-block-1/2` and `max-block-2/5` to give an element a percentage-based maximum block size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white block-96">
+      <div className="relative grid w-8 items-end rounded-lg block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-9/10">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-9/10</div>
+        </div>
+      </div>
+      <div className="relative grid w-8 items-end rounded-lg block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-3/4">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-3/4</div>
+        </div>
+      </div>
+      <div className="relative grid w-8 items-end rounded-lg block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-1/2">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-1/2</div>
+        </div>
+      </div>
+      <div className="relative grid w-8 items-end rounded-lg block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative w-full rounded-lg bg-blue-500 block-full max-block-full">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-block-full</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-block-9/10,max-block-3/4,max-block-1/2,max-block-1/4,max-block-full] -->
+<div class="block-96 ...">
+  <div class="block-full max-block-9/10 ...">max-block-9/10</div>
+  <div class="block-full max-block-3/4 ...">max-block-3/4</div>
+  <div class="block-full max-block-1/2 ...">max-block-1/2</div>
+  <div class="block-full max-block-full ...">max-block-full</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="max-block" value="220px" name="maximum block size" variable="max-block-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="max-block-size" defaultClass="block-48 max-block-full" featuredClass="max-block-screen" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="max-block" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/max-height.mdx

@@ -0,0 +1,164 @@
+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 = "max-height";
+export const description = "Utilities for setting the maximum height of an element.";
+
+<ApiTable
+  rows={[
+    ["max-h-<number>", "max-height: calc(var(--spacing) * <number>);"],
+    ["max-h-<fraction>", "max-height: calc(<fraction> * 100%);"],
+    ["max-h-none", "max-height: none;"],
+    ["max-h-px", "max-height: 1px;"],
+    ["max-h-full", "max-height: 100%;"],
+    ["max-h-screen", "max-height: 100vh;"],
+    ["max-h-dvh", "max-height: 100dvh;"],
+    ["max-h-dvw", "max-height: 100dvw;"],
+    ["max-h-lvh", "max-height: 100lvh;"],
+    ["max-h-lvw", "max-height: 100lvw;"],
+    ["max-h-svh", "max-height: 100svh;"],
+    ["max-h-svw", "max-height: 100svw;"],
+    ["max-h-min", "max-height: min-content;"],
+    ["max-h-max", "max-height: max-content;"],
+    ["max-h-fit", "max-height: fit-content;"],
+    ["max-h-lh", "max-height: 1lh;"],
+    ["max-h-(<custom-property>)", "max-height: var(<custom-property>);"],
+    ["max-h-[<value>]", "max-height: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `max-h-<number>` utilities like `max-h-24` and `max-h-64` to set an element to a fixed maximum height based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-80 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-80</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-64 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-64</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-48 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-48</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-40 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-40</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-32 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-32</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-24 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-24</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-h-80,max-h-64,max-h-48,max-h-40,max-h-32,max-h-24,max-h-full] -->
+<div class="h-96 ...">
+  <div class="h-full max-h-80 ...">max-h-80</div>
+  <div class="h-full max-h-64 ...">max-h-64</div>
+  <div class="h-full max-h-48 ...">max-h-48</div>
+  <div class="h-full max-h-40 ...">max-h-40</div>
+  <div class="h-full max-h-32 ...">max-h-32</div>
+  <div class="h-full max-h-24 ...">max-h-24</div>
+</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `max-h-full` or `max-h-<fraction>` utilities like `max-h-1/2` and `max-h-2/5` to give an element a percentage-based maximum height:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex h-96 items-end justify-center space-x-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-9/10 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-9/10</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-3/4 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-3/4</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-1/2 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/2</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-1/4 w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-1/4</div>
+        </div>
+      </div>
+      <div className="relative grid h-full w-8 items-end rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative h-full max-h-full w-full rounded-lg bg-blue-500">
+          <div className="absolute bottom-6 w-8 -rotate-90 text-nowrap">max-h-full</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-h-9/10,max-h-3/4,max-h-1/2,max-h-1/4,max-h-full] -->
+<div class="h-96 ...">
+  <div class="h-full max-h-9/10 ...">max-h-9/10</div>
+  <div class="h-full max-h-3/4 ...">max-h-3/4</div>
+  <div class="h-full max-h-1/2 ...">max-h-1/2</div>
+  <div class="h-full max-h-1/4 ...">max-h-1/4</div>
+  <div class="h-full max-h-full ...">max-h-full</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="max-h" value="220px" name="maximum height" variable="max-height" />
+
+### Responsive design
+
+<ResponsiveDesign property="max-height" defaultClass="h-48 max-h-full" featuredClass="max-h-screen" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="max-h" />

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

@@ -0,0 +1,185 @@
+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 = "max-inline-size";
+export const description = "Utilities for setting the maximum inline size of an element.";
+
+<ApiTable
+  rows={[
+    ["max-inline-<number>", "max-inline-size: calc(var(--spacing) * <number>);"],
+    ["max-inline-<fraction>", "max-inline-size: calc(<fraction> * 100%);"],
+    ["max-inline-3xs", "max-inline-size: var(--container-3xs); /* 16rem (256px) */"],
+    ["max-inline-2xs", "max-inline-size: var(--container-2xs); /* 18rem (288px) */"],
+    ["max-inline-xs", "max-inline-size: var(--container-xs); /* 20rem (320px) */"],
+    ["max-inline-sm", "max-inline-size: var(--container-sm); /* 24rem (384px) */"],
+    ["max-inline-md", "max-inline-size: var(--container-md); /* 28rem (448px) */"],
+    ["max-inline-lg", "max-inline-size: var(--container-lg); /* 32rem (512px) */"],
+    ["max-inline-xl", "max-inline-size: var(--container-xl); /* 36rem (576px) */"],
+    ["max-inline-2xl", "max-inline-size: var(--container-2xl); /* 42rem (672px) */"],
+    ["max-inline-3xl", "max-inline-size: var(--container-3xl); /* 48rem (768px) */"],
+    ["max-inline-4xl", "max-inline-size: var(--container-4xl); /* 56rem (896px) */"],
+    ["max-inline-5xl", "max-inline-size: var(--container-5xl); /* 64rem (1024px) */"],
+    ["max-inline-6xl", "max-inline-size: var(--container-6xl); /* 72rem (1152px) */"],
+    ["max-inline-7xl", "max-inline-size: var(--container-7xl); /* 80rem (1280px) */"],
+    ["max-inline-none", "max-inline-size: none;"],
+    ["max-inline-px", "max-inline-size: 1px;"],
+    ["max-inline-full", "max-inline-size: 100%;"],
+    ["max-inline-dvw", "max-inline-size: 100dvw;"],
+    ["max-inline-dvh", "max-inline-size: 100dvh;"],
+    ["max-inline-lvw", "max-inline-size: 100lvw;"],
+    ["max-inline-lvh", "max-inline-size: 100lvh;"],
+    ["max-inline-svw", "max-inline-size: 100svw;"],
+    ["max-inline-svh", "max-inline-size: 100svh;"],
+    ["max-inline-screen", "max-inline-size: 100vw;"],
+    ["max-inline-min", "max-inline-size: min-content;"],
+    ["max-inline-max", "max-inline-size: max-content;"],
+    ["max-inline-fit", "max-inline-size: fit-content;"],
+    ["max-inline-(<custom-property>)", "max-inline-size: var(<custom-property>);"],
+    ["max-inline-[<value>]", "max-inline-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `max-inline-<number>` utilities like `max-inline-24` and `max-inline-64` to set an element to a fixed maximum inline size based on the spacing scale:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-96">max-inline-96</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-80">max-inline-80</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-64">max-inline-64</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-48">max-inline-48</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-40">max-inline-40</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative rounded-lg bg-blue-500 px-4 py-2 max-inline-32">max-inline-32</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-inline-96,max-inline-80,max-inline-64,max-inline-48,max-inline-40,max-inline-32,max-inline-24] -->
+<div class="inline-full max-inline-96 ...">max-inline-96</div>
+<div class="inline-full max-inline-80 ...">max-inline-80</div>
+<div class="inline-full max-inline-64 ...">max-inline-64</div>
+<div class="inline-full max-inline-48 ...">max-inline-48</div>
+<div class="inline-full max-inline-40 ...">max-inline-40</div>
+<div class="inline-full max-inline-32 ...">max-inline-32</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `max-inline-full` or `max-inline-<fraction>` utilities like `max-inline-1/2` and `max-inline-2/5` to give an element a percentage-based maximum inline size:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap max-inline-9/10">
+          max-inline-9/10
+        </div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap max-inline-3/4">
+          max-inline-3/4
+        </div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap max-inline-1/2">
+          max-inline-1/2
+        </div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap max-inline-1/3">
+          max-inline-1/3
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-inline-3/4,max-inline-9/10,max-inline-1/2,max-inline-1/3] -->
+<div class="inline-full max-inline-9/10 ...">max-inline-9/10</div>
+<div class="inline-full max-inline-3/4 ...">max-inline-3/4</div>
+<div class="inline-full max-inline-1/2 ...">max-inline-1/2</div>
+<div class="inline-full max-inline-1/3 ...">max-inline-1/3</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `max-inline-sm` and `max-inline-xl` to set an element to a fixed maximum inline size based on the container scale:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="dark:highlight-white/5 relative mx-auto flex items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 max-inline-md dark:bg-gray-800">
+      <img
+        className="absolute -left-6 h-28 w-28 rounded-full"
+        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+      />
+      <div className="min-w-0 py-5 pr-5 pl-28">
+        <div className="truncate text-sm font-medium text-gray-900 sm:text-base dark:text-gray-200">Andrew Alfred</div>
+        <div className="truncate text-sm leading-tight text-gray-500 sm:text-base dark:text-gray-400">
+          Assistant to the Traveling Secretary
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-inline-md] -->
+<div class="max-inline-md ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="max-inline" value="220px" name="maximum inline size" variable="max-inline-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="max-inline-size" defaultClass="max-inline-sm" featuredClass="max-inline-lg" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="max-inline" />