@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,284 @@
+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 = "scroll-snap-type";
+export const description = "Utilities for controlling how strictly snap points are enforced in a snap container.";
+
+<ApiTable
+  rows={[
+    ["snap-none", "scroll-snap-type: none;"],
+    ["snap-x", "scroll-snap-type: x var(--tw-scroll-snap-strictness);"],
+    ["snap-y", "scroll-snap-type: y var(--tw-scroll-snap-strictness);"],
+    ["snap-both", "scroll-snap-type: both var(--tw-scroll-snap-strictness);"],
+    ["snap-mandatory", "--tw-scroll-snap-strictness: mandatory;"],
+    ["snap-proximity", "--tw-scroll-snap-strictness: proximity;"],
+  ]}
+/>
+
+## Examples
+
+### Horizontal scroll snapping
+
+Use the `snap-x` utility to enable horizontal scroll snapping within an element:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-center] -->
+<div class="snap-x ...">
+  <div class="snap-center ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+For scroll snapping to work, you need to also set the [scroll snap alignment](/docs/scroll-snap-align) on the children.
+
+### Mandatory scroll snapping
+
+Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-mandatory] -->
+<div class="snap-x snap-mandatory ...">
+  <div class="snap-center ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Proximity scroll snapping
+
+Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-proximity gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-proximity] -->
+<div class="snap-x snap-proximity ...">
+  <div class="snap-center ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="scroll-snap-type" defaultClass="snap-none" featuredClass="snap-x" />

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

@@ -0,0 +1,352 @@
+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 = "skew";
+export const description = "Utilities for skewing elements with transform.";
+
+<ApiTable
+  rows={[
+    ["skew-<number>", "transform: skewX(<number>deg) skewY(<number>deg);"],
+    ["-skew-<number>", "transform: skewX(-<number>deg) skewY(-<number>deg);"],
+    ["skew-(<custom-property>)", "transform: skewX(var(<custom-property>)) skewY(var(<custom-property>));"],
+    ["skew-[<value>]", "transform: skewX(<value>) skewY(<value>);"],
+    ["skew-x-<number>", "transform: skewX(<number>deg));"],
+    ["-skew-x-<number>", "transform: skewX(-<number>deg));"],
+    ["skew-x-(<custom-property>)", "transform: skewX(var(<custom-property>));"],
+    ["skew-x-[<value>]", "transform: skewX(<value>));"],
+    ["skew-y-<number>", "transform: skewY(<number>deg);"],
+    ["-skew-y-<number>", "transform: skewY(-<number>deg);"],
+    ["skew-y-(<custom-property>)", "transform: skewY(var(<custom-property>));"],
+    ["skew-y-[<value>]", "transform: skewY(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `skew-<number>` utilities like `skew-4` and `skew-10` to skew an element on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-3</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-3">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-6</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-6">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:skew-3,skew-6,skew-12] -->
+<img class="skew-3 ..." src="/img/mountains.jpg" />
+<img class="skew-6 ..." src="/img/mountains.jpg" />
+<img class="skew-12 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using negative values
+
+Use `-skew-<number>` utilities like `-skew-4` and `-skew-10` to skew an element on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-3</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 -skew-3">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-6</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 -skew-6">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 -skew-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-skew-3,-skew-6,-skew-12] -->
+<img class="-skew-3 ..." src="/img/mountains.jpg" />
+<img class="-skew-6 ..." src="/img/mountains.jpg" />
+<img class="-skew-12 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Skewing on the x-axis
+
+Use `skew-x-<number>` utilities like `skew-x-4` and `-skew-x-10` to skew an element on the x-axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-x-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 -skew-x-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-x-6</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-x-6">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-x-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-x-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-skew-x-12,skew-x-12,skew-x-6] -->
+<img class="-skew-x-12 ..." src="/img/mountains.jpg" />
+<img class="skew-x-6 ..." src="/img/mountains.jpg" />
+<img class="skew-x-12 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Skewing on the y-axis
+
+Use `skew-y-<number>` utilities like `skew-y-4` and `-skew-y-10` to skew an element on the y-axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">-skew-y-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 -skew-y-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-y-6</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-y-6">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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 className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">skew-y-12</p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                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>
+            <div className="relative z-10 skew-y-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                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>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-skew-y-12,skew-y-12,skew-y-6] -->
+<img class="-skew-y-12 ..." src="/img/mountains.jpg" />
+<img class="skew-y-6 ..." src="/img/mountains.jpg" />
+<img class="skew-y-12 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="skew" value="3.142rad" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  properties={["skewX()", "skewY()"]}
+  defaultClass="skew-3"
+  featuredClass="skew-12"
+/>