@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-decoration-style.mdx

@@ -0,0 +1,75 @@
+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 = "text-decoration-style";
+export const description = "Utilities for controlling the style of text decorations.";
+
+<ApiTable
+  rows={[
+    ["decoration-solid", "text-decoration-style: solid;"],
+    ["decoration-double", "text-decoration-style: double;"],
+    ["decoration-dotted", "text-decoration-style: dotted;"],
+    ["decoration-dashed", "text-decoration-style: dashed;"],
+    ["decoration-wavy", "text-decoration-style: wavy;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `decoration-dotted` and `decoration-dashed` to change the [text decoration](/docs/text-decoration-line) style of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8 text-gray-900 dark:text-gray-200">
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-solid</div>
+        <p className="text-lg font-medium underline decoration-solid">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-double</div>
+        <p
+          className="text-lg font-medium underline decoration-double"
+          children="The quick brown fox jumps over the lazy dog."
+        />
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-dotted</div>
+        <p className="text-lg font-medium underline decoration-dotted">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-dashed</div>
+        <p className="text-lg font-medium underline decoration-dashed">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-wavy</div>
+        <p className="text-lg font-medium underline decoration-wavy">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:decoration-solid,decoration-double,decoration-dotted,decoration-dashed,decoration-wavy] -->
+<p class="underline decoration-solid">The quick brown fox...</p>
+<p class="underline decoration-double">The quick brown fox...</p>
+<p class="underline decoration-dotted">The quick brown fox...</p>
+<p class="underline decoration-dashed">The quick brown fox...</p>
+<p class="underline decoration-wavy">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="p"
+  property="text-decoration-style"
+  defaultClass="underline"
+  featuredClass="decoration-dashed"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-decoration-thickness.mdx

@@ -0,0 +1,75 @@
+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 = "text-decoration-thickness";
+export const description = "Utilities for controlling the thickness of text decorations.";
+
+<ApiTable
+  rows={[
+    ["decoration-<number>", "text-decoration-thickness: <number>px;"],
+    ["decoration-from-font", "text-decoration-thickness: from-font;"],
+    ["decoration-auto", "text-decoration-thickness: auto;"],
+    ["decoration-(length:<custom-property>)", "text-decoration-thickness: var(<custom-property>);"],
+    ["decoration-[<value>]", "text-decoration-thickness: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `decoration-<number>` utilities like `decoration-2` and `decoration-4` to change the [text decoration](/docs/text-decoration-line) thickness of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8 text-gray-900 dark:text-gray-200">
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-1</div>
+        <p className="text-lg font-medium underline decoration-1">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-2</div>
+        <p className="text-lg font-medium underline decoration-2">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">decoration-4</div>
+        <p className="text-lg font-medium underline decoration-4">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:decoration-1] -->
+<p class="underline decoration-1">The quick brown fox...</p>
+<!-- [!code classes:decoration-2] -->
+<p class="underline decoration-2">The quick brown fox...</p>
+<!-- [!code classes:decoration-4] -->
+<p class="underline decoration-4">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="p"
+  utility="decoration"
+  name="text decoration thickness"
+  value="0.25rem"
+  variable="decoration-thickness"
+  dataType="length"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="p"
+  property="text-decoration-thickness"
+  defaultClass="underline"
+  featuredClass="decoration-4"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-indent.mdx

@@ -0,0 +1,74 @@
+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 = "text-indent";
+export const description = "Utilities for controlling the amount of empty space shown before text in a block.";
+
+<ApiTable
+  rows={[
+    ["indent-<number>", "text-indent: calc(var(--spacing) * <number>);"],
+    ["-indent-<number>", "text-indent: calc(var(--spacing) * -<number>);"],
+    ["indent-px", "text-indent: 1px;"],
+    ["-indent-px", "text-indent: -1px;"],
+    ["indent-(<custom-property>)", "text-indent: var(<custom-property>);"],
+    ["indent-[<value>]", "text-indent: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `indent-<number>` utilities like `indent-2` and `indent-8` to set the amount of empty space (indentation) that's shown before text in a block:
+
+<Figure>
+
+<Example>
+  {
+    <p className="mx-auto max-w-sm indent-8 text-gray-900 dark:text-gray-200">
+      So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my
+      way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of
+      all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:indent-8] -->
+<p class="indent-8">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Using negative values
+
+To use a negative text indent value, prefix the class name with a dash to convert it to a negative value:
+
+<Figure>
+
+<Example>
+  {
+    <p className="mx-auto max-w-sm -indent-8 text-gray-900 dark:text-gray-200">
+      So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my
+      way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of
+      all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-indent-8] -->
+<p class="-indent-8">So I started to walk into the water...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="indent" name="text indentation" value="50%" variable="indentation" />
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="text-indent" defaultClass="indent-4" featuredClass="indent-8" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-overflow.mdx

@@ -0,0 +1,103 @@
+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 dedent from "dedent";
+
+export const title = "text-overflow";
+export const description = "Utilities for controlling how the text of an element overflows.";
+
+<ApiTable
+  rows={[
+    [
+      "truncate",
+      dedent`
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `,
+    ],
+    ["text-ellipsis", "text-overflow: ellipsis;"],
+    ["text-clip", "text-overflow: clip;"],
+  ]}
+/>
+
+## Examples
+
+### Truncating text
+
+Use the `truncate` utility to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs truncate border-x border-x-pink-400/30 py-8 text-gray-900 dark:text-gray-200">
+      The longest word in any of the major English language dictionaries is{" "}
+      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> a word that refers to a lung
+      disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it
+      is the same as silicosis.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:truncate] -->
+<p class="truncate">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Adding an ellipsis
+
+Use the `text-ellipsis` utility to truncate overflowing text with an ellipsis (…) if needed:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs overflow-hidden border-x border-x-pink-400/30 py-8 text-ellipsis text-gray-900 dark:text-gray-200">
+      The longest word in any of the major English language dictionaries is{" "}
+      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> a word that refers to a lung
+      disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it
+      is the same as silicosis.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-ellipsis] -->
+<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Clipping text
+
+Use the `text-clip` utility to truncate the text at the limit of the content area:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs overflow-hidden border-x border-x-pink-400/30 py-8 text-clip text-gray-900 dark:text-gray-200">
+      The longest word in any of the major English language dictionaries is{" "}
+      <span className="font-bold">pneumonoultramicroscopicsilicovolcanoconiosis,</span> a word that refers to a lung
+      disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it
+      is the same as silicosis.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-clip] -->
+<p class="overflow-hidden text-clip">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+This is the default browser behavior.
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="text-overflow" defaultClass="text-ellipsis" featuredClass="text-clip" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-shadow.mdx

@@ -0,0 +1,177 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourTheme,
+  CustomizingYourThemeColors,
+  ResponsiveDesign,
+  UsingACustomValue,
+} from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+
+export const title = "text-shadow";
+export const description = "Utilities for controlling the shadow of a text element.";
+
+<ApiTable
+  rows={[
+    ["text-shadow-2xs", "text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */"],
+    ["text-shadow-xs", "text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */"],
+    [
+      "text-shadow-sm",
+      "text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */",
+    ],
+    [
+      "text-shadow-md",
+      "text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */",
+    ],
+    [
+      "text-shadow-lg",
+      "text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */",
+    ],
+    ["text-shadow-none", "text-shadow: none;"],
+    ["text-shadow-(<custom-property>)", "text-shadow: var(<custom-property>);"],
+    ["text-shadow-(color:<custom-property>)", "--tw-shadow-color var(<custom-property>);"],
+    ["text-shadow-[<value>]", "text-shadow: <value>;"],
+    ["text-shadow-inherit", "--tw-shadow-color inherit;"],
+    ["text-shadow-current", "--tw-shadow-color currentColor;"],
+    ["text-shadow-transparent", "--tw-shadow-color transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `text-shadow-${name}`,
+      `--tw-text-shadow-color var(--color-${name}); /* ${value} */`,
+    ]),
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `text-shadow-sm` and `shadow-lg` to apply different sized text shadows to a text element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="relative grid items-center justify-around gap-4 bg-linear-45 from-indigo-400 via-purple-500 to-pink-500 px-6 py-14 text-center text-2xl font-semibold text-white">
+      <p className="relative text-shadow-2xs">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-xs">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-sm">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-md">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-lg">The quick brown fox jumps over the lazy dog.</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-shadow-2xs,text-shadow-xs,text-shadow-sm,text-shadow-md,text-shadow-lg,text-shadow-xl] -->
+<p class="text-shadow-2xs ...">The quick brown fox...</p>
+<p class="text-shadow-xs ...">The quick brown fox...</p>
+<p class="text-shadow-sm ...">The quick brown fox...</p>
+<p class="text-shadow-md ...">The quick brown fox...</p>
+<p class="text-shadow-lg ...">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the opacity modifier to adjust the opacity of the text shadow:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="relative grid items-center justify-around gap-4 bg-linear-45 from-indigo-400 via-sky-400 to-emerald-400 px-6 py-14 text-center text-2xl font-semibold text-white">
+      <p className="relative text-shadow-lg">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-lg/20">The quick brown fox jumps over the lazy dog.</p>
+      <p className="relative text-shadow-lg/30">The quick brown fox jumps over the lazy dog.</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-shadow-lg/20,text-shadow-lg/30] -->
+<p class="text-shadow-lg ...">The quick brown fox...</p>
+<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
+<p class="text-shadow-lg/30 ...">The quick brown fox...</p>
+```
+
+</Figure>
+
+The default text shadow opacities are quite low (20% or less), so increasing the opacity (to like 50%) will make the text shadows more pronounced.
+
+### Setting the shadow color
+
+Use utilities like `text-shadow-indigo-500` and `text-shadow-cyan-500/50` to change the color of a text shadow:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative grid h-48 place-items-center">
+      <div className="-mr-10 flex gap-4 max-sm:-mr-32">
+        <button className="relative rounded-full bg-linear-to-b from-sky-300 to-sky-400 to-70% px-4 py-2 text-sm font-semibold text-sky-950 shadow-md ring inset-shadow-2xs ring-sky-500 inset-shadow-white/20 text-shadow-2xs text-shadow-sky-300 dark:ring-sky-500/50">
+          Book a demo
+          <div className="absolute top-1/2 -left-6/5 size-42 -translate-y-1/2 overflow-hidden rounded-full bg-white/20 p-2 shadow-lg ring-2 ring-black/5 backdrop-blur-sm dark:ring-black/10">
+            <div className="grid size-full items-center overflow-hidden rounded-full bg-linear-to-b from-sky-300 to-sky-400 to-50% px-5 pb-2 text-[70px] font-semibold whitespace-nowrap text-sky-900 inset-ring-2 inset-ring-black/10 text-shadow-[0px_5px_0px_var(--tw-text-shadow-color)] text-shadow-sky-300">
+              Book a demo
+            </div>
+          </div>
+        </button>
+        <button className="relative rounded-full bg-linear-to-b from-white/10 to-white/20 to-70% px-4 py-2 text-sm font-semibold text-gray-950 shadow-md ring inset-shadow-2xs ring-black/20 inset-shadow-white/10 dark:text-white dark:text-shadow-2xs">
+          See pricing
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-shadow-sky-300] -->
+<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
+<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>
+```
+
+</Figure>
+
+By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Removing a text shadow
+
+Use the `text-shadow-none` utility to remove an existing text shadow from an element:
+
+<Figure>
+
+```html
+<!-- [!code classes:dark:text-shadow-none] -->
+<p class="text-shadow-lg dark:text-shadow-none">
+  <!-- ... -->
+</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="text-shadow" name="text shadow" value="0_35px_35px_rgb(0_0_0_/_0.25)" />
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="text-shadow" defaultClass="text-shadow-none" featuredClass="text-shadow-lg" />
+
+## Customizing your theme
+
+### Customizing text shadows
+
+<CustomizingYourTheme
+  element="p"
+  utility="text-shadow"
+  themeKey="text-shadow"
+  name="text shadow"
+  customName="xl"
+  customValue="0 35px 35px rgb(0, 0, 0 / 0.25)"
+/>
+
+### Customizing shadow colors
+
+<CustomizingYourThemeColors element="p" utility="text-shadow" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-transform.mdx

@@ -0,0 +1,106 @@
+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 = "text-transform";
+export const description = "Utilities for controlling the capitalization of text.";
+
+<ApiTable
+  rows={[
+    ["uppercase", "text-transform: uppercase;"],
+    ["lowercase", "text-transform: lowercase;"],
+    ["capitalize", "text-transform: capitalize;"],
+    ["normal-case", "text-transform: none;"],
+  ]}
+/>
+
+## Examples
+
+### Uppercasing text
+
+Use the `uppercase` utility to uppercase the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 uppercase dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:uppercase] -->
+<p class="uppercase">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Lowercasing text
+
+Use the `lowercase` utility to lowercase the text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 lowercase dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:lowercase] -->
+<p class="lowercase">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Capitalizing text
+
+Use the `capitalize` utility to capitalize text of an element:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 capitalize dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:capitalize] -->
+<p class="capitalize">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Resetting text casing
+
+Use the `normal-case` utility to preserve the original text casing of an element—typically used to reset capitalization at different breakpoints:
+
+<Figure>
+
+<Example>
+  {
+    <p className="text-center text-lg font-medium text-gray-900 normal-case dark:text-gray-200">
+      The quick brown fox jumps over the lazy dog.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:normal-case] -->
+<p class="normal-case">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="text-transform" defaultClass="capitalize" featuredClass="uppercase" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/text-underline-offset.mdx

@@ -0,0 +1,74 @@
+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 = "text-underline-offset";
+export const description = "Utilities for controlling the offset of a text underline.";
+
+<ApiTable
+  rows={[
+    ["underline-offset-<number>", "text-underline-offset: <number>px;"],
+    ["-underline-offset-<number>", "text-underline-offset: calc(<number>px * -1);"],
+    ["underline-offset-auto", "text-underline-offset: auto;"],
+    ["underline-offset-(<custom-property>)", "text-underline-offset: var(<custom-property>);"],
+    ["underline-offset-[<value>]", "text-underline-offset: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `underline-offset-<number>` utilities like `underline-offset-2` and `underline-offset-4` to change the offset of a text underline:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8 text-gray-900 dark:text-gray-200">
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">underline-offset-1</div>
+        <p className="text-lg font-medium underline underline-offset-1">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">underline-offset-2</div>
+        <p className="text-lg font-medium underline underline-offset-2">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">underline-offset-4</div>
+        <p className="text-lg font-medium underline underline-offset-4">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+      <div>
+        <div className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">underline-offset-8</div>
+        <p className="text-lg font-medium underline underline-offset-8">The quick brown fox jumps over the lazy dog.</p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:underline-offset-1] -->
+<p class="underline underline-offset-1">The quick brown fox...</p>
+<!-- [!code classes:underline-offset-2] -->
+<p class="underline underline-offset-2">The quick brown fox...</p>
+<!-- [!code classes:underline-offset-4] -->
+<p class="underline underline-offset-4">The quick brown fox...</p>
+<!-- [!code classes:underline-offset-8] -->
+<p class="underline underline-offset-8">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="underline-offset" name="text underline offset" value="3px" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="p"
+  property="text-underline-offset"
+  defaultClass="underline"
+  featuredClass="underline-offset-4"
+/>