@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,94 @@
+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 = "order";
+export const description = "Utilities for controlling the order of flex and grid items.";
+
+<ApiTable
+  rows={[
+    ["order-<number>", "order: <number>;"],
+    ["-order-<number>", "order: calc(<number> * -1);"],
+    ["order-first", "order: -9999;"],
+    ["order-last", "order: 9999;"],
+    ["order-none", "order: 0;"],
+    ["order-(<custom-property>)", "order: var(<custom-property>);"],
+    ["order-[<value>]", "order: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Explicitly setting a sort order
+
+Use `order-<number>` utilities like `order-1` and `order-3` to render flex and grid items in a different order than they appear in the document:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-between font-mono text-sm leading-6 font-bold text-white">
+      <div className="order-3 flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500">01</div>
+      <div className="order-1 flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500">02</div>
+      <div className="order-2 flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:order-1,order-2,order-3] -->
+<div class="flex justify-between ...">
+  <div class="order-3 ...">01</div>
+  <div class="order-1 ...">02</div>
+  <div class="order-2 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Ordering items first or last
+
+Use the `order-first` and `order-last` utilities to render flex and grid items first or last:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-between font-mono text-sm leading-6 font-bold text-white">
+      <div className="order-last flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+      <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+      <div className="order-first flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:order-first,order-last] -->
+<div class="flex justify-between ...">
+  <div class="order-last ...">01</div>
+  <div class="...">02</div>
+  <div class="order-first ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Using negative values
+
+To use a negative order value, prefix the class name with a dash to convert it to a negative value:
+
+```html
+<!-- [!code classes:-order-1] -->
+<div class="-order-1">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="order" value="min(var(--total-items),10)" />
+
+### Responsive design
+
+<ResponsiveDesign property="order" defaultClass="order-first" featuredClass="order-last" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/outline-color.mdx

@@ -0,0 +1,130 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { 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 = "outline-color";
+export const description = "Utilities for controlling the color of an element's outline.";
+
+<ApiTable
+  rows={[
+    ["outline-inherit", "outline-color: inherit;"],
+    ["outline-current", "outline-color: currentColor;"],
+    ["outline-transparent", "outline-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `outline-${name}`,
+      `outline-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    ["outline-(<custom-property>)", "outline-color: var(<custom-property>);"],
+    ["outline-[<value>]", "outline-color: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `outline-rose-500` and `outline-lime-100` to control the color of an element's outline:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-blue-500
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-cyan-500
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-cyan-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-pink-500
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-pink-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:outline-blue-500,outline-cyan-500,outline-pink-500] -->
+<button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button>
+<button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button>
+<button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the color opacity modifier to control the opacity of an element's outline color:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-blue-500/100
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/100 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-blue-500/75
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/75 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-blue-500/50
+        </p>
+        <button className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500/50 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:/100] -->
+<!-- [!code word:/75] -->
+<!-- [!code word:/50] -->
+<button class="outline-2 outline-blue-500/100 ...">Button A</button>
+<button class="outline-2 outline-blue-500/75 ...">Button B</button>
+<button class="outline-2 outline-blue-500/50 ...">Button C</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="outline" name="outline color" value="#243c5a" variable="color" />
+
+### Responsive design
+
+<ResponsiveDesign property="outline-color" defaultClass="outline" featuredClass="outline-blue-400" />
+
+## Customizing your theme
+
+<CustomizingYourThemeColors utility="outline" />

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

@@ -0,0 +1,72 @@
+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 = "outline-offset";
+export const description = "Utilities for controlling the offset of an element's outline.";
+
+<ApiTable
+  rows={[
+    ["outline-offset-<number>", "outline-offset: <number>px;"],
+    ["-outline-offset-<number>", "outline-offset: calc(<number>px * -1);"],
+    ["outline-offset-(<custom-property>)", "outline-offset: var(<custom-property>);"],
+    ["outline-offset-[<value>]", "outline-offset: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `outline-offset-2` and `outline-offset-4` to change the offset of an element's outline:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-8 text-center text-sm font-bold text-white sm:grid-cols-3 sm:gap-4">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-offset-0
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-0 outline-sky-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-offset-2
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-sky-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-offset-4
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-4 outline-sky-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:outline-offset-0,outline-offset-2,outline-offset-4] -->
+<button class="outline-2 outline-offset-0 ...">Button A</button>
+<button class="outline-2 outline-offset-2 ...">Button B</button>
+<button class="outline-2 outline-offset-4 ...">Button C</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="outline-offset" name="outline offset" value="2vw" />
+
+### Responsive design
+
+<ResponsiveDesign property="outline-offset" defaultClass="outline" featuredClass="outline-offset-2" />

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

@@ -0,0 +1,134 @@
+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 = "outline-style";
+export const description = "Utilities for controlling the style of an element's outline.";
+
+<ApiTable
+  rows={[
+    ["outline-solid", "outline-style: solid;"],
+    ["outline-dashed", "outline-style: dashed;"],
+    ["outline-dotted", "outline-style: dotted;"],
+    ["outline-double", "outline-style: double;"],
+    ["outline-none", "outline-style: none;"],
+    ["outline-hidden", "outline: 2px solid transparent;\noutline-offset: 2px;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `outline-solid` and `outline-dashed` to set the style of an element's outline:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 gap-x-4 gap-y-8 text-center text-sm font-semibold text-white">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">outline-solid</p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-solid dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-dashed
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dashed dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-dotted
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-indigo-500 outline-dotted dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button C
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          outline-double
+        </p>
+        <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-3 outline-offset-2 outline-indigo-500 outline-double dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button D
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:outline-solid,outline-dashed,outline-dotted,outline-double] -->
+<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button>
+<button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button>
+<button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button>
+<button class="outline-3 outline-offset-2 outline-double ...">Button D</button>
+```
+
+</Figure>
+
+### Hiding an outline
+
+Use the `outline-hidden` utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:
+
+<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the behavior">
+
+<Example>
+  {
+    <input
+      type="text"
+      placeholder="Your full name"
+      className="mx-auto block w-full max-w-xs border-b-2 border-gray-300 bg-gray-50 px-2 py-2 text-sm text-gray-800 focus:border-indigo-600 focus:outline-hidden dark:border-white/15 dark:bg-white/5 dark:text-white dark:focus:border-indigo-500"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:focus:outline-hidden] -->
+<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />
+```
+
+</Figure>
+
+It is highly recommended to apply your own focus styling for accessibility when using this utility.
+
+### Removing outlines
+
+Use the `outline-none` utility to completely remove the default browser outline on focused elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex max-w-md flex-col rounded-lg outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-indigo-600 dark:bg-white/5 dark:outline-transparent dark:focus-within:outline-indigo-500">
+      <textarea className="w-full resize-none p-2 outline-none" placeholder="Leave a comment..." />
+      <button
+        className="mr-2 mb-2 inline-flex items-center self-end rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600"
+        type="button"
+      >
+        Post
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:outline-none] -->
+<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">
+  <textarea class="outline-none ..." placeholder="Leave a comment..." />
+  <button class="..." type="button">Post</button>
+</div>
+```
+
+</Figure>
+
+It is highly recommended to apply your own focus styling for accessibility when using this utility.
+
+### Responsive design
+
+<ResponsiveDesign property="outline-style" defaultClass="outline" featuredClass="outline-dashed" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/outline-width.mdx

@@ -0,0 +1,91 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, TargetingSpecificStates, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "outline-width";
+export const description = "Utilities for controlling the width of an element's outline.";
+
+<ApiTable
+  rows={[
+    ["outline", "outline-width: 1px;"],
+    ["outline-<number>", "outline-width: <number>px;"],
+    ["outline-(length:<custom-property>)", "outline-width: var(<custom-property>);"],
+    ["outline-[<value>]", "outline-width: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `outline` or `outline-<number>` utilities like `outline-2` and `outline-4` to set the width of an element's outline:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center gap-8 text-center text-sm font-bold text-white sm:flex-row sm:gap-16">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">outline</p>
+        <button className="dark:border-gray rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline outline-offset-2 outline-blue-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">outline-2</p>
+        <button className="dark:border-gray rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-2 outline-offset-2 outline-blue-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">outline-4</p>
+        <button className="dark:border-gray rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-4 outline-offset-2 outline-blue-500 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+          Button C
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:outline,outline-2,outline-4] -->
+<button class="outline outline-offset-2 ...">Button A</button>
+<button class="outline-2 outline-offset-2 ...">Button B</button>
+<button class="outline-4 outline-offset-2 ...">Button C</button>
+```
+
+</Figure>
+
+### Applying on focus
+
+<TargetingSpecificStates property="outline-width" variant="focus">
+
+<Figure hint="Focus the button to see the outline added">
+
+<Example>
+  {
+    <div className="mx-auto flex max-w-md justify-center gap-4 text-center text-sm leading-6 font-bold text-white">
+      <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 outline-offset-2 outline-sky-500 focus:outline-2 dark:border-transparent dark:bg-gray-700 dark:text-gray-200">
+        Save Changes
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:focus:outline-2] -->
+<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>
+```
+
+</Figure>
+
+</TargetingSpecificStates>
+
+### Using a custom value
+
+<UsingACustomValue utility="outline" value="2vw" name="outline width" dataType="length" variable="outline-width" />
+
+### Responsive design
+
+<ResponsiveDesign property="outline-width" defaultClass="outline" featuredClass="outline-2" />

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

@@ -0,0 +1,130 @@
+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 = "overflow-wrap";
+export const description = "Utilities for controlling line breaks within words in an overflowing element.";
+
+<ApiTable
+  rows={[
+    ["wrap-break-word", "overflow-wrap: break-word;"],
+    ["wrap-anywhere", "overflow-wrap: anywhere;"],
+    ["wrap-normal", "overflow-wrap: normal;"],
+  ]}
+/>
+
+## Examples
+
+### Wrapping mid-word
+
+Use the `wrap-break-word` utility to allow line breaks between letters in a word if needed:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 wrap-break-word 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:wrap-break-word] -->
+<p class="wrap-break-word">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Wrapping anywhere
+
+The `wrap-anywhere` utility behaves similarly to `wrap-break-word`, except that the browser factors in mid-word line breaks when calculating the intrinsic size of the element:
+
+<Figure>
+
+<Example>
+  {
+    <div>
+      <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">wrap-break-word</p>
+      <div className="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-3 shadow-sm ring ring-black/2.5 dark:bg-black/10 dark:ring-white/10">
+        <img
+          className="size-16 rounded-full outline -outline-offset-1 outline-black/10 dark:outline-white/10"
+          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+          alt=""
+        />
+        <div className="wrap-break-word">
+          <p className="text-sm font-medium text-gray-900 dark:text-white">Jay Riemenschneider</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">jason.riemenschneider@vandelayindustries.com</p>
+        </div>
+      </div>
+      <p className="mt-8 mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+        wrap-anywhere
+      </p>
+      <div className="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-3 shadow-sm ring ring-black/2.5 dark:bg-black/10 dark:ring-white/10">
+        <img
+          className="size-16 rounded-full outline -outline-offset-1 outline-black/10 dark:outline-white/10"
+          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+          alt=""
+        />
+        <div className="wrap-anywhere">
+          <p className="text-sm font-medium text-gray-900 dark:text-white">Jay Riemenschneider</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">jason.riemenschneider@vandelayindustries.com</p>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:wrap-anywhere,wrap-break-word] -->
+<div class="flex max-w-sm">
+  <img class="size-16 rounded-full" src="/img/profile.jpg" />
+  <div class="wrap-break-word">
+    <p class="font-medium">Jay Riemenschneider</p>
+    <p>jason.riemenschneider@vandelayindustries.com</p>
+  </div>
+</div>
+<div class="flex max-w-sm">
+  <img class="size-16 rounded-full" src="/img/profile.jpg" />
+  <div class="wrap-anywhere">
+    <p class="font-medium">Jay Riemenschneider</p>
+    <p>jason.riemenschneider@vandelayindustries.com</p>
+  </div>
+</div>
+```
+
+</Figure>
+
+This is useful for wrapping text inside of `flex` containers, where you would usually need to set `min-width: 0` on the child element to allow it to shrink below its content size.
+
+### Wrapping normally
+
+Use the `wrap-normal` utility to only allow line breaks at natural wrapping points, like spaces, hyphens, and punctuation:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 wrap-normal 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:wrap-normal] -->
+<p class="wrap-normal">The longest word in any of the major...</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="overflow-wrap" defaultClass="wrap-normal" featuredClass="wrap-break-word" />