@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,113 @@
+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 = "backdrop-filter";
+export const description = "Utilities for applying backdrop filters to an element.";
+
+<ApiTable
+  rows={[
+    ["backdrop-filter-none", "backdrop-filter: none;"],
+    ["backdrop-filter-(<custom-property>)", "backdrop-filter: var(<custom-property>);"],
+    ["backdrop-filter-[<value>]", "backdrop-filter: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `backdrop-blur-xs` and `backdrop-grayscale` to apply filters to an element's backdrop:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold 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">
+            backdrop-blur-xs
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-xs"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              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 className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </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">
+            backdrop-grayscale
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-grayscale"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              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 className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </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 italic dark:text-gray-400">
+            combined
+          </p>
+          <div className="relative">
+            <div className="absolute inset-6 size-20 bg-white/30 backdrop-blur-xs backdrop-grayscale"></div>
+            <img
+              className="size-32 rounded-lg object-cover"
+              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 className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backdrop-blur-xs,backdrop-grayscale] -->
+<div class="bg-[url(/img/mountains.jpg)] ...">
+  <div class="backdrop-blur-xs ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)] ...">
+  <div class="backdrop-grayscale ..."></div>
+</div>
+<div class="bg-[url(/img/mountains.jpg)] ...">
+  <div class="backdrop-blur-xs backdrop-grayscale ..."></div>
+</div>
+```
+
+</Figure>
+
+You can combine the following backdrop filter utilities: [blur](/docs/backdrop-filter-blur), [brightness](/docs/backdrop-filter-brightness), [contrast](/docs/backdrop-filter-contrast), [grayscale](/docs/backdrop-filter-grayscale), [hue-rotate](/docs/backdrop-filter-hue-rotate), [invert](/docs/backdrop-filter-invert), [opacity](/docs/backdrop-filter-opacity), [saturate](/docs/backdrop-filter-saturate), and [sepia](/docs/backdrop-filter-sepia).
+
+### Removing filters
+
+Use the `backdrop-filter-none` utility to remove all of the backdrop filters applied to an element:
+
+```html
+<!-- [!code classes:md:backdrop-filter-none] -->
+<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="backdrop-filter" value="url('filters.svg#filter-id')" name="backdrop filter" />
+
+### Applying on hover
+
+<TargetingSpecificStates
+  property="backdrop-filter"
+  defaultClass="backdrop-blur-sm"
+  featuredClass="backdrop-filter-none"
+/>
+
+### Responsive design
+
+<ResponsiveDesign property="backdrop-filter" defaultClass="backdrop-blur-sm" featuredClass="backdrop-filter-none" />

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

@@ -0,0 +1,110 @@
+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 = "backface-visibility";
+export const description = "Utilities for controlling if an element's backface is visible.";
+
+<ApiTable
+  rows={[
+    ["backface-hidden", "backface-visibility: hidden;"],
+    ["backface-visible", "backface-visibility: visible;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `backface-visible` utility to show the backface of an element, like a cube, even when it's rotated away from view:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <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">
+          backface-hidden
+        </p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d">
+            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              1
+            </div>
+            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              2
+            </div>
+            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              3
+            </div>
+            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              4
+            </div>
+            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              5
+            </div>
+            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-hidden dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </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">
+          backface-visible
+        </p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d">
+            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
+              1
+            </div>
+            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
+              2
+            </div>
+            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
+              3
+            </div>
+            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
+              4
+            </div>
+            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 backface-visible dark:bg-sky-400/85 dark:text-white">
+              5
+            </div>
+            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 backface-visible dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:backface-hidden,backface-visible] -->
+<div class="size-20 ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...">6</div>
+</div>
+
+<div class="size-20 ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...">6</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="backface-visibility" defaultClass="backface-visible" featuredClass="backface-hidden" />

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

@@ -0,0 +1,126 @@
+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-attachment";
+export const description = "Utilities for controlling how a background image behaves when scrolling.";
+
+<ApiTable
+  rows={[
+    ["bg-fixed", "background-attachment: fixed;"],
+    ["bg-local", "background-attachment: local;"],
+    ["bg-scroll", "background-attachment: scroll;"],
+  ]}
+/>
+
+## Examples
+
+### Fixing the background image
+
+Use the `bg-fixed` utility to fix the background image relative to the viewport:
+
+<Figure hint="Scroll the content to see the background image fixed in place">
+
+<Example padding={false}>
+  {
+    <div className="mx-auto h-80 overflow-y-scroll border-x border-x-gray-200 bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&h=800&q=80')] bg-cover bg-[center_-100px] dark:border-gray-800">
+      <div className="mt-45">
+        <div className="border-x border-x-gray-200 bg-white p-4 text-gray-500 sm:p-8 dark:border-x-gray-800 dark:bg-gray-900 dark:text-gray-400">
+          <div className="font-inter text-2xl font-extrabold tracking-tight text-black dark:text-white">
+            My trip to the summit
+          </div>
+          <div className="mt-1 text-sm font-medium text-gray-500">November 16, 2021 · 4 min read</div>
+          <p className="mt-4 leading-7">
+            Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world,
+            but what about that kid, sitting down, opening a book, right now, in a branch at the local library and
+            finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE
+            deserve better?
+          </p>
+          <p className="mt-4 leading-7">
+            Look. If you think this is about overdue fines and missing books, you'd better think again. This is about
+            that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld;
+            maybe that's how y'get your kicks. You and your good-time buddies.
+          </p>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-fixed] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-fixed ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling with the container
+
+Use the `bg-local` utility to scroll the background image with the container and the viewport:
+
+<Figure hint="Scroll the content to see the background image scroll with the container">
+
+<Example padding={false}>
+  {
+    <div>
+      <div className="h-64 overflow-y-scroll bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80')] bg-cover bg-local">
+        <div className="min-h-full bg-black/40 p-8 sm:px-16 sm:py-12">
+          <p className="text-center font-serif text-xl leading-6 text-white italic sm:text-2xl sm:leading-8">
+            Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's
+            relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it
+            out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.
+          </p>
+          <div className="font-inter mt-6 text-center text-sm font-bold text-white sm:text-base">&mdash; Newman</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-local] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-local ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling with the viewport
+
+Use the `bg-scroll` utility to scroll the background image with the viewport, but not with the container:
+
+<Figure hint="Scroll the content to see the background image fixed in the container">
+
+<Example padding={false}>
+  {
+    <div>
+      <div className="h-64 overflow-y-scroll bg-[url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=666&q=80')] bg-cover bg-scroll">
+        <div className="min-h-full bg-black/40 p-8 sm:px-16 sm:py-12">
+          <p className="text-center font-serif text-xl leading-6 text-white italic sm:text-2xl sm:leading-8">
+            Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's
+            relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it
+            out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day.
+          </p>
+          <div className="font-inter mt-6 text-center text-sm font-bold text-white sm:text-base">&mdash; Newman</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-scroll] -->
+<div class="bg-[url(/img/mountains.jpg)] bg-scroll ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="background-attachment" defaultClass="bg-local" featuredClass="bg-fixed" />

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

@@ -0,0 +1,79 @@
+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-blend-mode";
+export const description =
+  "Utilities for controlling how an element's background image should blend with its background color.";
+
+<ApiTable
+  rows={[
+    ["bg-blend-normal", "background-blend-mode: normal;"],
+    ["bg-blend-multiply", "background-blend-mode: multiply;"],
+    ["bg-blend-screen", "background-blend-mode: screen;"],
+    ["bg-blend-overlay", "background-blend-mode: overlay;"],
+    ["bg-blend-darken", "background-blend-mode: darken;"],
+    ["bg-blend-lighten", "background-blend-mode: lighten;"],
+    ["bg-blend-color-dodge", "background-blend-mode: color-dodge;"],
+    ["bg-blend-color-burn", "background-blend-mode: color-burn;"],
+    ["bg-blend-hard-light", "background-blend-mode: hard-light;"],
+    ["bg-blend-soft-light", "background-blend-mode: soft-light;"],
+    ["bg-blend-difference", "background-blend-mode: difference;"],
+    ["bg-blend-exclusion", "background-blend-mode: exclusion;"],
+    ["bg-blend-hue", "background-blend-mode: hue;"],
+    ["bg-blend-saturation", "background-blend-mode: saturation;"],
+    ["bg-blend-color", "background-blend-mode: color;"],
+    ["bg-blend-luminosity", "background-blend-mode: luminosity;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `bg-blend-difference` and `bg-blend-saturation` to control how the background image and color of an element are blended:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-between gap-y-6 px-1 sm:flex-row md:px-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">
+          bg-blend-multiply
+        </p>
+        <div className="size-24 bg-blue-500 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=80)] bg-cover bg-center bg-no-repeat bg-blend-multiply md:size-32"></div>
+      </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">
+          bg-blend-soft-light
+        </p>
+        <div className="size-24 bg-blue-500 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=80)] bg-cover bg-center bg-no-repeat bg-blend-soft-light md:size-32"></div>
+      </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">
+          bg-blend-overlay
+        </p>
+        <div className="size-24 bg-blue-500 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=80)] bg-cover bg-center bg-no-repeat bg-blend-overlay md:size-32"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-blend-multiply,bg-blend-soft-light,bg-blend-overlay] -->
+<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ..."></div>
+<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ..."></div>
+<div class="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ..."></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="background-blend-mode"
+  defaultClass="bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten"
+  featuredClass="bg-blend-darken"
+/>

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

@@ -0,0 +1,85 @@
+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-clip";
+export const description = "Utilities for controlling the bounding box of an element's background.";
+
+<ApiTable
+  rows={[
+    ["bg-clip-border", "background-clip: border-box;"],
+    ["bg-clip-padding", "background-clip: padding-box;"],
+    ["bg-clip-content", "background-clip: content-box;"],
+    ["bg-clip-text", "background-clip: text;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `bg-clip-border`, `bg-clip-padding`, and `bg-clip-content` utilities to control the bounding box of an element's background:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center space-y-10 sm:flex-row sm:space-y-0 sm:space-x-10">
+      <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">
+          bg-clip-border
+        </p>
+        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-white/50 bg-indigo-500 bg-clip-border p-3 font-mono text-sm font-extrabold text-white"></div>
+      </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">
+          bg-clip-padding
+        </p>
+        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-indigo-500/50 bg-indigo-500 bg-clip-padding p-3 font-mono text-sm font-extrabold text-white"></div>
+      </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">
+          bg-clip-content
+        </p>
+        <div className="flex h-24 w-24 items-center justify-center rounded-lg border-3 border-dashed border-indigo-500/50 bg-indigo-500 bg-clip-content p-3 font-mono text-sm font-extrabold text-white"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-clip-border,bg-clip-padding,bg-clip-content] -->
+<div class="border-4 bg-indigo-500 bg-clip-border p-3"></div>
+<div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div>
+<div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>
+```
+
+</Figure>
+
+### Cropping to text
+
+Use the `bg-clip-text` utility to crop an element's background to match the shape of the text:
+
+<Figure>
+
+<Example>
+  {
+    <p className="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-center text-4xl leading-none font-extrabold tracking-tight text-transparent sm:text-5xl">
+      Hello world
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:bg-clip-text] -->
+<p class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ...">
+  Hello world
+</p>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="background-clip" defaultClass="bg-clip-border" featuredClass="bg-clip-padding" />