@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,286 @@
+import { CodeExampleStack } from "@/components/code-example";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "justify-items";
+export const description = "Utilities for controlling how grid items are aligned along their inline axis.";
+
+<ApiTable
+  rows={[
+    ["justify-items-start", "justify-items: start;"],
+    ["justify-items-end", "justify-items: end;"],
+    ["justify-items-end-safe", "justify-items: safe end;"],
+    ["justify-items-center", "justify-items: center;"],
+    ["justify-items-center-safe", "justify-items: safe center;"],
+    ["justify-items-stretch", "justify-items: stretch;"],
+    ["justify-items-normal", "justify-items: normal;"],
+  ]}
+/>
+
+## Examples
+
+### Start
+
+Use the `justify-items-start` utility to justify grid items against the start of their inline axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          01
+        </div>
+      </div>
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          02
+        </div>
+      </div>
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          03
+        </div>
+      </div>
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          04
+        </div>
+      </div>
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          05
+        </div>
+      </div>
+      <div className="grid rounded-lg">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
+          06
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-items-start] -->
+<div class="grid justify-items-start ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use the `justify-items-end` or `justify-items-end-safe` utilities to justify grid items against the end of their inline axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-items-end</p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="grid grid-cols-1 justify-items-end">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">01</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-end">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">02</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-end">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">03</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-items-end-safe
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="grid grid-cols-1 justify-items-end-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">01</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-end-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">02</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-end-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">03</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-items-end] -->
+<!-- [!code classes:justify-items-end] -->
+<div class="grid grid-flow-col justify-items-end ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+```html
+<!-- [!code filename:justify-items-end-safe] -->
+<!-- [!code classes:justify-items-end-safe] -->
+<div class="grid grid-flow-col justify-items-end-safe ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</ CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-items-end-safe` utility will align items to the start of the container instead of the end.
+
+### Center
+
+Use the `justify-items-center` or `justify-items-center-safe` utilities to justify grid items against the end of their inline axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-items-center
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="grid grid-cols-1 justify-items-center">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">01</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-center">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">02</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-center">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">03</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-items-center-safe
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="grid grid-cols-1 justify-items-center-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">01</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-center-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">02</div>
+          </div>
+          <div className="grid grid-cols-1 justify-items-center-safe">
+            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">03</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-items-center] -->
+<!-- [!code classes:justify-items-center] -->
+<div class="grid grid-flow-col justify-items-center ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+```html
+<!-- [!code filename:justify-items-center-safe] -->
+<!-- [!code classes:justify-items-center-safe] -->
+<div class="grid grid-flow-col justify-items-center-safe ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-items-center-safe` utility will align items to the start of the container instead of the center.
+
+### Stretch
+
+Use the `justify-items-stretch` utility to stretch items along their inline axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-3 justify-items-stretch gap-4 font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">01</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">02</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">03</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">04</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">05</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">06</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-items-stretch] -->
+<div class="grid justify-items-stretch ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="justify-items"
+  defaultClass="grid justify-items-start"
+  featuredClass="justify-items-center"
+/>

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

@@ -0,0 +1,282 @@
+import { CodeExampleStack } from "@/components/code-example";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "justify-self";
+export const description = "Utilities for controlling how an individual grid item is aligned along its inline axis.";
+
+<ApiTable
+  rows={[
+    ["justify-self-auto", "justify-self: auto;"],
+    ["justify-self-start", "justify-self: start;"],
+    ["justify-self-center", "justify-self: center;"],
+    ["justify-self-center-safe", "justify-self: safe center;"],
+    ["justify-self-end", "justify-self: end;"],
+    ["justify-self-end-safe", "justify-self: safe end;"],
+    ["justify-self-stretch", "justify-self: stretch;"],
+  ]}
+/>
+
+## Examples
+
+### Auto
+
+Use the `justify-self-auto` utility to align an item based on the value of the grid's `justify-items` property:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div>
+        <div className="justify-self-auto rounded-lg bg-purple-500 p-4">02</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">03</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div>
+        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">06</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-self-auto] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-auto ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Start
+
+Use the `justify-self-start` utility to align a grid item to the start of its inline axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">01</div>
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 justify-self-start rounded-lg bg-pink-500 p-4">02</div>
+      </div>
+      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">03</div>
+      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">04</div>
+      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">05</div>
+      <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">06</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-self-start] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-start ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use the `justify-self-center` or `justify-self-center-safe` utilities to align a grid item along the center of its inline axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-self-center
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">01</div>
+          <div className="grid grid-cols-1">
+            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 justify-self-center rounded-lg bg-indigo-500 p-4">02</div>
+          </div>
+          <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">03</div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-self-center-safe
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">01</div>
+          <div className="grid grid-cols-1">
+            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 justify-self-center-safe rounded-lg bg-sky-500 p-4">02</div>
+          </div>
+          <div className="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">03</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-self-center] -->
+<!-- [!code classes:justify-self-center] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-center ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+```html
+<!-- [!code filename:justify-self-center-safe] -->
+<!-- [!code classes:justify-self-center-safe] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-center-safe ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+</CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-self-center-safe` utility will align the item to the start of the container instead of the end.
+
+### End
+
+Use the `justify-self-end` or `justify-self-end-safe` utilities to align a grid item to the end of its inline axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-self-end</p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">01</div>
+          <div className="grid grid-cols-1">
+            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 justify-self-end rounded-lg bg-blue-500 p-4">02</div>
+          </div>
+          <div className="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">03</div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-self-end-safe
+        </p>
+        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
+          <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">01</div>
+          <div className="grid grid-cols-1">
+            <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+            <div className="col-start-1 row-start-1 size-14 justify-self-end-safe rounded-lg bg-purple-500 p-4">02</div>
+          </div>
+          <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">03</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-self-end] -->
+<!-- [!code classes:justify-self-end] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-end ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+```html
+<!-- [!code filename:justify-self-end-safe] -->
+<!-- [!code classes:justify-self-end-safe] -->
+<div class="grid justify-items-stretch ...">
+  <!-- ... -->
+  <div class="justify-self-end-safe ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+</CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-self-end-safe` utility will align the item to the start of the container instead of the end.
+
+### Stretch
+
+Use the `justify-self-stretch` utility to stretch a grid item to fill the grid area on its inline axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          01
+        </div>
+      </div>
+      <div className="bg-stripes-fuchsia grid w-full justify-self-stretch rounded-lg">
+        <div className="justify-self-stretch rounded-lg bg-fuchsia-500 p-4">02</div>
+      </div>
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          03
+        </div>
+      </div>
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          04
+        </div>
+      </div>
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          05
+        </div>
+      </div>
+      <div className="grid grid-cols-1">
+        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+        <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
+          06
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-self-stretch] -->
+<div class="grid justify-items-start ...">
+  <!-- ... -->
+  <div class="justify-self-stretch ...">02</div>
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="justify-self" defaultClass="justify-self-start" featuredClass="justify-self-end" />

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

@@ -0,0 +1,100 @@
+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 = "letter-spacing";
+export const description = "Utilities for controlling the tracking, or letter spacing, of an element.";
+
+<ApiTable
+  rows={[
+    ["tracking-tighter", "letter-spacing: var(--tracking-tighter); /* -0.05em */"],
+    ["tracking-tight", "letter-spacing: var(--tracking-tight); /* -0.025em */"],
+    ["tracking-normal", "letter-spacing: var(--tracking-normal); /* 0em */"],
+    ["tracking-wide", "letter-spacing: var(--tracking-wide); /* 0.025em */"],
+    ["tracking-wider", "letter-spacing: var(--tracking-wider); /* 0.05em */"],
+    ["tracking-widest", "letter-spacing: var(--tracking-widest); /* 0.1em */"],
+    ["tracking-(<custom-property>)", "letter-spacing: var(<custom-property>);"],
+    ["tracking-[<value>]", "letter-spacing: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `tracking-tight` and `tracking-wide` to set the letter spacing of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-tight</span>
+        <p className="text-lg font-medium tracking-tight text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-normal</span>
+        <p className="text-lg font-medium tracking-normal text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">tracking-wide</span>
+        <p className="text-lg font-medium tracking-wide text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:tracking-tight,tracking-normal,tracking-wide] -->
+<p class="tracking-tight ...">The quick brown fox ...</p>
+<p class="tracking-normal ...">The quick brown fox ...</p>
+<p class="tracking-wide ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Using negative values
+
+Using negative values doesn't make a ton of sense with the named letter spacing scale Tailwind includes out of the box, but if you've customized your scale to use numbers it can be useful:
+
+```css
+@theme {
+  --tracking-1: 0em;
+  --tracking-2: 0.025em;
+  --tracking-3: 0.05em;
+  --tracking-4: 0.1em;
+}
+```
+
+To use a negative letter spacing value, prefix the class name with a dash to convert it to a negative value:
+
+```html
+<!-- [!code classes:-tracking-2] -->
+<p class="-tracking-2">The quick brown fox ...</p>
+```
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="tracking" name="letter spacing" value=".25em" />
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="letter-spacing" defaultClass="tracking-tight" featuredClass="tracking-wide" />
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  element="p"
+  utility="tracking"
+  name="letter spacing"
+  customValue="-0.075em"
+  customName="tightest"
+/>