@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,151 @@
+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 = "overscroll-behavior";
+export const description =
+  "Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.";
+
+<ApiTable
+  rows={[
+    ["overscroll-auto", "overscroll-behavior: auto;"],
+    ["overscroll-contain", "overscroll-behavior: contain;"],
+    ["overscroll-none", "overscroll-behavior: none;"],
+    ["overscroll-x-auto", "overscroll-behavior-x: auto;"],
+    ["overscroll-x-contain", "overscroll-behavior-x: contain;"],
+    ["overscroll-x-none", "overscroll-behavior-x: none;"],
+    ["overscroll-y-auto", "overscroll-behavior-y: auto;"],
+    ["overscroll-y-contain", "overscroll-behavior-y: contain;"],
+    ["overscroll-y-none", "overscroll-behavior-y: none;"],
+  ]}
+/>
+
+## Examples
+
+### Preventing parent overscrolling
+
+Use the `overscroll-contain` utility to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it:
+
+<Figure hint="Scroll to see behavior">
+
+<Example padding={false}>
+  {
+    <div className="h-48 space-y-4 overflow-auto overscroll-contain p-8 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+      <p
+        children={`
+      Well, let me tell you something, funny boy. Y'know that little stamp, the
+      one that says "New York Public Library"? Well that may not mean anything
+      to you, but that means a lot to me. One whole hell of a lot.`}
+      />
+      <p
+        children={`
+      Sure, go ahead, laugh if you want to. I've seen your type before: Flashy,
+      making the scene, flaunting convention. Yeah, I know what you're thinking.
+      What's this guy making such a big stink about old library books? Well, let
+      me give you a hint, junior.`}
+      />
+      <p
+        children={`
+      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?`}
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overscroll-contain] -->
+<div class="overscroll-contain ...">Well, let me tell you something, ...</div>
+```
+
+</Figure>
+
+### Preventing overscroll bouncing
+
+Use the `overscroll-none` utility to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container:
+
+<Figure hint="Scroll to see behavior">
+
+<Example padding={false}>
+  {
+    <div className="h-48 space-y-4 overflow-auto overscroll-none p-8 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+      <p
+        children={`
+      Well, let me tell you something, funny boy. Y'know that little stamp, the
+      one that says "New York Public Library"? Well that may not mean anything
+      to you, but that means a lot to me. One whole hell of a lot.`}
+      />
+      <p
+        children={`
+      Sure, go ahead, laugh if you want to. I've seen your type before: Flashy,
+      making the scene, flaunting convention. Yeah, I know what you're thinking.
+      What's this guy making such a big stink about old library books? Well, let
+      me give you a hint, junior.`}
+      />
+      <p
+        children={`
+      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?`}
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overscroll-none] -->
+<div class="overscroll-none ...">Well, let me tell you something, ...</div>
+```
+
+</Figure>
+
+### Using the default overscroll behavior
+
+Use the `overscroll-auto` utility to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area:
+
+<Figure hint="Scroll to see behavior">
+
+<Example padding={false}>
+  {
+    <div className="h-48 space-y-4 overflow-auto overscroll-auto p-8 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+      <p
+        children={`
+      Well, let me tell you something, funny boy. Y'know that little stamp, the
+      one that says "New York Public Library"? Well that may not mean anything
+      to you, but that means a lot to me. One whole hell of a lot.`}
+      />
+      <p
+        children={`
+      Sure, go ahead, laugh if you want to. I've seen your type before: Flashy,
+      making the scene, flaunting convention. Yeah, I know what you're thinking.
+      What's this guy making such a big stink about old library books? Well, let
+      me give you a hint, junior.`}
+      />
+      <p
+        children={`
+      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?`}
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overscroll-auto] -->
+<div class="overscroll-auto ...">Well, let me tell you something, ...</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="overscroll-behavior" defaultClass="overscroll-auto" featuredClass="overscroll-contain" />

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

@@ -0,0 +1,232 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale } from "@/components/content.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";
+import { UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "padding";
+export const description = "Utilities for controlling an element's padding.";
+
+<ApiTable
+  rows={[
+    ["p", "padding"],
+    ["px", "padding-inline"],
+    ["py", "padding-block"],
+    ["ps", "padding-inline-start"],
+    ["pe", "padding-inline-end"],
+    ["pbs", "padding-block-start"],
+    ["pbe", "padding-block-end"],
+    ["pt", "padding-top"],
+    ["pr", "padding-right"],
+    ["pb", "padding-bottom"],
+    ["pl", "padding-left"],
+  ].flatMap(([prefix, property]) => [
+    [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
+    [`${prefix}-px`, `${property}: 1px;`],
+    [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
+    [`${prefix}-[<value>]`, `${property}: <value>;`],
+  ])}
+/>
+
+## Examples
+
+### Basic example
+
+Use `p-<number>` utilities like `p-4` and `p-8` to control the padding on all sides of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative rounded-lg bg-violet-500 p-8">
+        <Stripes noColor className="absolute inset-0 rounded-lg text-white/50" />
+        <div className="relative bg-violet-500 p-4">p-8</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:p-8] -->
+<div class="p-8 ...">p-8</div>
+```
+
+</Figure>
+
+### Adding padding to one side
+
+Use `pt-<number>`, `pr-<number>`, `pb-<number>`, and `pl-<number>` utilities like `pt-6` and `pr-4` to control the padding on one side of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="-mx-5 flex flex-wrap items-start justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex items-start">
+        <div className="flex-none px-5">
+          <div className="overflow-hidden rounded-lg bg-purple-500">
+            <Stripes noColor className="h-6 w-full rounded-t-lg text-white/50" />
+            <div className="p-4">pt-6</div>
+          </div>
+        </div>
+        <div className="flex-none px-5 pt-6">
+          <div className="flex overflow-hidden rounded-lg bg-purple-500">
+            <div className="flex-none p-4">pr-4</div>
+            <Stripes noColor className="min-h-full w-4 flex-none rounded-r-lg text-white/50" />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-start">
+        <div className="flex-none px-5 pt-6">
+          <div className="overflow-hidden rounded-lg bg-purple-500">
+            <div className="p-4">pb-8</div>
+            <Stripes noColor className="h-8 w-full rounded-b-lg text-white/50" />
+          </div>
+        </div>
+        <div className="flex-none px-5 pt-6">
+          <div className="flex overflow-hidden rounded-lg bg-purple-500">
+            <Stripes noColor className="min-h-full w-2 flex-none rounded-l-lg text-white/50" />
+            <div className="flex-none p-4">pl-2</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:pt-6,pr-4,pb-8,pl-2] -->
+<div class="pt-6 ...">pt-6</div>
+<div class="pr-4 ...">pr-4</div>
+<div class="pb-8 ...">pb-8</div>
+<div class="pl-2 ...">pl-2</div>
+```
+
+</Figure>
+
+### Adding horizontal padding
+
+Use `px-<number>` utilities like `px-4` and `px-8` to control the horizontal padding of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex overflow-hidden rounded-lg bg-indigo-500">
+        <Stripes noColor className="h-full w-8 flex-none rounded-l-lg text-white/50" />
+        <div className="p-4">px-8</div>
+        <Stripes noColor className="h-full w-8 flex-none rounded-r-lg text-white/50" />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:px-8] -->
+<div class="px-8 ...">px-8</div>
+```
+
+</Figure>
+
+### Adding vertical padding
+
+Use `py-<number>` utilities like `py-4` and `py-8` to control the vertical padding of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="overflow-hidden rounded-lg bg-pink-500">
+        <Stripes noColor className="h-8 w-full flex-none rounded-t-lg text-white/50" />
+        <div className="p-4">py-8</div>
+        <Stripes noColor className="h-8 w-full flex-none rounded-b-lg text-white/50" />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:py-8] -->
+<div class="py-8 ...">py-8</div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use `ps-<number>` or `pe-<number>` utilities like `ps-4` and `pe-8` to set the `padding-inline-start` and `padding-inline-end` logical properties, which map to either the left or right side based on the text direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 place-items-center gap-x-4">
+      <div className="flex flex-col items-start gap-y-4">
+        <p className="text-sm font-medium">Left-to-right</p>
+        <div className="flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
+          <Stripes noColor className="min-h-full w-8 rounded-s-lg text-white/50" />
+          <div className="p-4">ps-8</div>
+        </div>
+        <div className="mt-4 flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
+          <div className="p-4">pe-8</div>
+          <Stripes noColor className="min-h-full w-8 rounded-e-lg text-white/50" />
+        </div>
+      </div>
+      <div className="flex flex-col items-end gap-y-4">
+        <p className="text-sm font-medium">Right-to-left</p>
+        <div className="flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
+          <div className="p-4">ps-8</div>
+          <Stripes noColor className="min-h-full w-8 rounded-e-lg text-white/50" />
+        </div>
+        <div className="mt-4 flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
+          <Stripes noColor className="min-h-full w-8 rounded-s-lg text-white/50" />
+          <div className="p-4">pe-8</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:ps-8,pe-8] -->
+<!-- [!code word:dir="ltr"] -->
+<!-- [!code word:dir="rtl"] -->
+<div>
+  <div dir="ltr">
+    <div class="ps-8 ...">ps-8</div>
+    <div class="pe-8 ...">pe-8</div>
+  </div>
+  <div dir="rtl">
+    <div class="ps-8 ...">ps-8</div>
+    <div class="pe-8 ...">pe-8</div>
+  </div>
+</div>
+```
+
+</Figure>
+
+For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.
+
+Use the `pbs-<number>` and `pbe-<number>` utilities to set the `padding-block-start` and `padding-block-end` logical properties, which map to either the top or bottom side based on the writing mode:
+
+```html
+<!-- [!code classes:pbs-8] -->
+<div class="pbs-8 ...">pbs-8</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utilities={["p", "px", "pb"]} name="padding" variable="padding" value="5px" />
+
+### Responsive design
+
+<ResponsiveDesign property="padding" defaultClass="py-4" featuredClass="py-8" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utilities={["p", "px", "py", "ps", "pe", "pbs", "pbe", "pt", "pr", "pb", "pl"]} />

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

@@ -0,0 +1,127 @@
+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 = "perspective-origin";
+export const description = "Utilities for controlling an element's perspective origin when placed in 3D space.";
+
+<ApiTable
+  rows={[
+    ["perspective-origin-center", "perspective-origin: center;"],
+    ["perspective-origin-top", "perspective-origin: top;"],
+    ["perspective-origin-top-right", "perspective-origin: top right;"],
+    ["perspective-origin-right", "perspective-origin: right;"],
+    ["perspective-origin-bottom-right", "perspective-origin: bottom right;"],
+    ["perspective-origin-bottom", "perspective-origin: bottom;"],
+    ["perspective-origin-bottom-left", "perspective-origin: bottom left;"],
+    ["perspective-origin-left", "perspective-origin: left;"],
+    ["perspective-origin-top-left", "perspective-origin: top left;"],
+    ["perspective-origin-(<custom-property>)", "perspective-origin: var(<custom-property>);"],
+    ["perspective-origin-[<value>]", "perspective-origin: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `perspective-origin-top` and `perspective-origin-bottom-left` to control where the vanishing point of a perspective is located:
+
+<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">
+          perspective-origin-top-left
+        </p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-near perspective-origin-top-left transform-3d *:backface-visible">
+            <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 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 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 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 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 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 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">
+          perspective-origin-bottom-right
+        </p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-near perspective-origin-bottom-right transform-3d *:backface-visible">
+            <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 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 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 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 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 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 dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:perspective-origin-top-left,perspective-origin-bottom-right] -->
+<div class="size-20 perspective-near perspective-origin-top-left ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+
+<div class="size-20 perspective-near perspective-origin-bottom-right …">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="perspective-origin" value="200%_150%" name="perspective origin" />
+
+### Responsive design
+
+<ResponsiveDesign
+  property="perspective-origin"
+  defaultClass="perspective-origin-center"
+  featuredClass="perspective-origin-bottom-left"
+/>

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

@@ -0,0 +1,137 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "perspective";
+export const description = "Utilities for controlling an element's perspective when placed in 3D space.";
+
+<ApiTable
+  rows={[
+    ["perspective-dramatic", "perspective: var(--perspective-dramatic); /* 100px */"],
+    ["perspective-near", "perspective: var(--perspective-near); /* 300px */"],
+    ["perspective-normal", "perspective: var(--perspective-normal); /* 500px */"],
+    ["perspective-midrange", "perspective: var(--perspective-midrange); /* 800px */"],
+    ["perspective-distant", "perspective: var(--perspective-distant); /* 1200px */"],
+    ["perspective-none", "perspective: none;"],
+    ["perspective-(<custom-property>)", "perspective: var(<custom-property>);"],
+    ["perspective-[<value>]", "perspective: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `perspective-normal` and `perspective-distant` to control how close or how far away the z-plane is from the screen:
+
+<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">
+          perspective-dramatic
+        </p>
+        <div className="size-56 p-10 py-24">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-dramatic transform-3d *:backface-visible">
+            <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 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 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 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 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 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 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">
+          perspective-normal
+        </p>
+        <div className="size-56 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-normal transform-3d *:backface-visible">
+            <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 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 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 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 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 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 dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:perspective-dramatic,perspective-normal] -->
+<div class="size-20 perspective-dramatic ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+
+<div class="size-20 perspective-normal ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+```
+
+</Figure>
+
+This is like moving a camera closer to or further away from an object.
+
+### Removing a perspective
+
+Use the `perspective-none` utility to remove a perspective transform from an element:
+
+```html
+<!-- [!code classes:perspective-none] -->
+<div class="perspective-none ...">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="perspective" value="750px" />
+
+### Responsive design
+
+<ResponsiveDesign property="perspective" defaultClass="perspective-midrange" featuredClass="perspective-dramatic" />
+
+## Customizing your theme
+
+<CustomizingYourTheme utility="perspective" name="perspective" customName="remote" customValue="1800px" />