@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,497 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourTheme,
+  CustomizingYourThemeColors,
+  ResponsiveDesign,
+  UsingACustomValue,
+} from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+
+export const title = "box-shadow";
+export const description = "Utilities for controlling the box shadow of an element.";
+
+<ApiTable
+  rows={[
+    // Shadows
+    ["shadow-2xs", "box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */"],
+    ["shadow-xs", "box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */"],
+    ["shadow-sm", "box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */"],
+    [
+      "shadow-md",
+      "box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */",
+    ],
+    [
+      "shadow-lg",
+      "box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */",
+    ],
+    [
+      "shadow-xl",
+      "box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */",
+    ],
+    ["shadow-2xl", "box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */"],
+    ["shadow-none", "box-shadow: 0 0 #0000;"],
+    ["shadow-(<custom-property>)", "box-shadow: var(<custom-property>);"],
+    ["shadow-(color:<custom-property>)", "--tw-shadow-color: var(<custom-property>);"],
+    ["shadow-[<value>]", "box-shadow: <value>;"],
+    // Shadow colors
+    ["shadow-inherit", "--tw-shadow-color: inherit;"],
+    ["shadow-current", "--tw-shadow-color: currentColor;"],
+    ["shadow-transparent", "--tw-shadow-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `shadow-${name}`,
+      `--tw-shadow-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    // Inset shadows
+    ["inset-shadow-2xs", "box-shadow: var(--inset-shadow-2xs); /* inset 0 1px rgb(0 0 0 / 0.05) */"],
+    ["inset-shadow-xs", "box-shadow: var(--inset-shadow-xs); /* inset 0 1px 1px rgb(0 0 0 / 0.05) */"],
+    ["inset-shadow-sm", "box-shadow: var(--inset-shadow-sm); /* inset 0 2px 4px rgb(0 0 0 / 0.05) */"],
+    ["inset-shadow-none", "box-shadow: inset 0 0 #0000;"],
+    ["inset-shadow-(<custom-property>)", "box-shadow: var(<custom-property>);"],
+    ["inset-shadow-[<value>]", "box-shadow: <value>;"],
+    // Inset shadow colors
+    ["inset-shadow-inherit", "--tw-inset-shadow-color: inherit;"],
+    ["inset-shadow-current", "--tw-inset-shadow-color: currentColor;"],
+    ["inset-shadow-transparent", "--tw-inset-shadow-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `inset-shadow-${name}`,
+      `--tw-inset-shadow-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    // Rings
+    ["ring", "--tw-ring-shadow: 0 0 0 1px;"],
+    ["ring-<number>", "--tw-ring-shadow: 0 0 0 <number>px;"],
+    ["ring-(<custom-property>)", "--tw-ring-shadow: 0 0 0 var(<custom-property>);"],
+    ["ring-[<value>]", "--tw-ring-shadow: 0 0 0 <value>;"],
+    // Ring colors
+    ["ring-inherit", "--tw-ring-color: inherit;"],
+    ["ring-current", "--tw-ring-color: currentColor;"],
+    ["ring-transparent", "--tw-ring-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `ring-${name}`,
+      `--tw-ring-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    // Inset rings
+    ["inset-ring", "--tw-inset-ring-shadow: inset 0 0 0 1px"],
+    ["inset-ring-<number>", "--tw-inset-ring-shadow: inset 0 0 0 <number>px"],
+    ["inset-ring-(<custom-property>)", "--tw-inset-ring-shadow: inset 0 0 0 var(<custom-property>);"],
+    ["inset-ring-[<value>]", "--tw-inset-ring-shadow: inset 0 0 0 <value>;"],
+    // Inset ring colors
+    ["inset-ring-inherit", "--tw-inset-ring-color: inherit;"],
+    ["inset-ring-current", "--tw-inset-ring-color: currentColor;"],
+    ["inset-ring-transparent", "--tw-inset-ring-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `inset-ring-${name}`,
+      `--tw-inset-ring-color: var(--color-${name}); /* ${value} */`,
+    ]),
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `shadow-sm` and `shadow-lg` to apply different sized outer box shadows to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-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">shadow-md</p>
+        <div className="size-24 rounded-lg bg-white shadow-md"></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">shadow-lg</p>
+        <div className="size-24 rounded-lg bg-white shadow-lg"></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">shadow-xl</p>
+        <div className="size-24 rounded-lg bg-white shadow-xl"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shadow-md,shadow-lg,shadow-xl] -->
+<div class="shadow-md ..."></div>
+<div class="shadow-lg ..."></div>
+<div class="shadow-xl ..."></div>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the opacity modifier to adjust the opacity of the box shadow:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex items-center justify-around gap-4 gap-y-6 bg-white px-6 py-14 font-mono font-bold max-sm:flex-col max-sm:py-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">shadow-xl</p>
+        <div className="size-24 rounded-lg bg-white shadow-xl"></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">shadow-xl/20</p>
+        <div className="size-24 rounded-lg bg-white shadow-xl/20"></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">shadow-xl/30</p>
+        <div className="size-24 rounded-lg bg-white shadow-xl/30"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shadow-xl,shadow-xl/20,shadow-xl/30] -->
+<div class="shadow-xl ..."></div>
+<div class="shadow-xl/20 ..."></div>
+<div class="shadow-xl/30 ..."></div>
+```
+
+</Figure>
+
+The default box shadow opacities are quite low (25% or less), so increasing the opacity (to like 50%) will make the box shadows more pronounced.
+
+### Setting the shadow color
+
+Use utilities like `shadow-indigo-500` and `shadow-cyan-500/50` to change the color of a box shadow:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col justify-center gap-8 py-6 sm:flex-row sm:gap-12">
+      <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">
+          shadow-cyan-500/50
+        </p>
+        <button className="rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/50 focus:outline-none">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          shadow-blue-500/50
+        </p>
+        <button className="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-blue-500/50 focus:outline-none">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          shadow-indigo-500/50
+        </p>
+        <button className="rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-500/50 focus:outline-none">
+          Subscribe
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shadow-cyan-500/50,shadow-blue-500/50,shadow-indigo-500/50] -->
+<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
+<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
+<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
+```
+
+</Figure>
+
+By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Adding an inset shadow
+
+Use utilities like `inset-shadow-xs` and `inset-shadow-sm` to apply an inset box shadow to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-2xs</p>
+        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-2xs ring-black/5"></div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-xs</p>
+        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-xs ring-black/5"></div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-sm</p>
+        <div className="size-24 rounded-lg bg-white ring-1 inset-shadow-sm ring-black/5"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-shadow-2xs,inset-shadow-xs,inset-shadow-sm] -->
+<div class="inset-shadow-2xs ..."></div>
+<div class="inset-shadow-xs ..."></div>
+<div class="inset-shadow-sm ..."></div>
+```
+
+</Figure>
+
+You can adjust the opacity of an inset shadow using the opacity modifier, like `inset-shadow-sm/50`. The default inset shadow opacities are quite low (5%), so increasing the opacity (to like 50%) will make the inset shadows more pronounced.
+
+### Setting the inset shadow color
+
+Use utilities like `inset-shadow-indigo-500` and `inset-shadow-cyan-500/50` to change the color of an inset box shadow:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 gap-y-6 bg-white p-6 font-mono font-bold sm:flex-row">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500</p>
+        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500"></div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">inset-shadow-indigo-500/50</p>
+        <div className="size-24 rounded-lg bg-indigo-200 inset-shadow-sm inset-shadow-indigo-500/50"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-shadow-indigo-500,inset-shadow-indigo-500/75] -->
+<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
+<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>
+```
+
+</Figure>
+
+By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Adding a ring
+
+Use `ring` or `ring-<number>` utilities like `ring-2` and `ring-4` to apply a solid box-shadow to an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
+      <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">ring</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-2</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">ring-4</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-4 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:ring,ring-2,ring-4] -->
+<button class="ring ...">Subscribe</button>
+<button class="ring-2 ...">Subscribe</button>
+<button class="ring-4 ...">Subscribe</button>
+```
+
+</Figure>
+
+By default rings match the `currentColor` of the element they are applied to.
+
+### Setting the ring color
+
+Use utilities like `ring-indigo-500` and `ring-cyan-500/50` to change the color of a ring:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
+      <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">ring-blue-500</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          ring-blue-500/50
+        </p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 ring-2 ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:ring-blue-500,ring-blue-500/50] -->
+<button class="ring-2 ring-blue-500 ...">Subscribe</button>
+<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>
+```
+
+</Figure>
+
+By default rings have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Adding an inset ring
+
+Use `inset-ring` or `inset-ring-<number>` utilities like `inset-ring-2` and `inset-ring-4` to apply a solid inset box-shadow to an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-3">
+      <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">inset-ring</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-2</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">inset-ring-4</p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-4 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-ring,inset-ring-2,inset-ring-4] -->
+<button class="inset-ring ...">Subscribe</button>
+<button class="inset-ring-2 ...">Subscribe</button>
+<button class="inset-ring-4 ...">Subscribe</button>
+```
+
+</Figure>
+
+By default inset rings match the `currentColor` of the element they are applied to.
+
+### Setting the inset ring color
+
+Use utilities like `inset-ring-indigo-500` and `inset-ring-cyan-500/50` to change the color of an inset ring:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-6 text-center leading-6 font-bold text-white sm:grid-cols-2">
+      <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">
+          inset-ring-blue-500
+        </p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          inset-ring-blue-500/50
+        </p>
+        <button className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-700 inset-ring-2 inset-ring-blue-500/50 dark:bg-white/15 dark:text-gray-200">
+          Subscribe
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-ring-blue-500,inset-ring-blue-500/50] -->
+<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
+<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>
+```
+
+</Figure>
+
+By default inset rings have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Removing a box shadow
+
+Use the `shadow-none`, `inset-shadow-none`,`ring-0`, and `inset-ring-0` utilities to remove an existing box shadow from an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex items-center justify-around gap-4 bg-white p-6 font-mono font-bold">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">shadow-none</p>
+        <div className="size-24 rounded-lg outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:shadow-none] -->
+<div class="shadow-none ..."></div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  utilities={["shadow", "inset-shadow", "ring", "inset-ring"]}
+  name="box shadow"
+  value="0_35px_35px_rgba(0,0,0,0.25)"
+/>
+
+### Responsive design
+
+<ResponsiveDesign property="box-shadow" defaultClass="shadow-none" featuredClass="shadow-lg" />
+
+## Customizing your theme
+
+### Customizing shadows
+
+<CustomizingYourTheme
+  utility="shadow"
+  themeKey="shadow"
+  name="box shadow"
+  customName="3xl"
+  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
+/>
+
+### Customizing inset shadows
+
+<CustomizingYourTheme
+  utility="inset-shadow"
+  themeKey="inset-shadow"
+  name="inset box shadow"
+  customName="md"
+  customValue="inset 0 2px 3px rgba(0, 0, 0, 0.25)"
+/>
+
+### Customizing shadow colors
+
+<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />

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

@@ -0,0 +1,175 @@
+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 = "box-sizing";
+export const description = "Utilities for controlling how the browser should calculate an element's total size.";
+
+<ApiTable
+  rows={[
+    ["box-border", "box-sizing: border-box;"],
+    ["box-content", "box-sizing: content-box;"],
+  ]}
+/>
+
+## Examples
+
+### Including borders and padding
+
+Use the `box-border` utility to set an element's `box-sizing` to `border-box`, telling the browser to include the element's borders and padding when you give it a height or width.
+
+This means a 100px &times; 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px &times; 100px, with an internal content area of 88px &times; 88px:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="relative grid w-full grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_3fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700">
+      <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div>
+      <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900">
+        {/* w-measure indicator */}
+        <div className="absolute right-0 bottom-2 left-0 flex">
+          {/* Horizontal line */}
+          <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-sky-400"></div>
+          {/* Left chip */}
+          <div className="w-full">
+            <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-sky-400"></div>
+          </div>
+          {/* Badge */}
+          <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400">
+            128px
+          </div>
+          {/* Right chip */}
+          <div className="w-full">
+            <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-sky-400"></div>
+          </div>
+        </div>
+      </div>
+      <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div>
+      <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900">
+        {/* h-measure indicator */}
+        <div className="absolute top-0 right-2 bottom-0 flex w-3">
+          {/* Vertical line */}
+          <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-sky-400"></div>
+          {/* Top chip */}
+          <div className="w-full">
+            <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-sky-400"></div>
+          </div>
+          {/* Badge */}
+          <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400">
+            128px
+          </div>
+          {/* Bottom chip */}
+          <div className="w-full">
+            <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-sky-400"></div>
+          </div>
+        </div>
+      </div>
+      <div className="col-start-2 row-start-2 size-32 bg-white ring-1 ring-sky-300 dark:bg-gray-900 dark:ring-sky-400">
+        <div className="relative box-border size-32 p-5 ring ring-sky-300 ring-inset">
+          <div className="relative z-1 h-full w-full bg-sky-500 ring-1 ring-sky-500"></div>
+          <div className="absolute inset-0">
+            <Stripes className="h-full" />
+          </div>
+        </div>
+      </div>
+      <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:box-border] -->
+<div class="box-border size-32 border-4 p-4 ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Tailwind makes this the default for all elements in our [preflight base styles](/docs/preflight).
+
+### Excluding borders and padding
+
+Use the `box-content` utility to set an element's `box-sizing` to `content-box`, telling the browser to add borders and padding on top of the element's specified width or height.
+
+This means a 100px &times; 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px &times; 112px, with an internal content area of 100px &times; 100px:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="relative grid grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_2fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700">
+      <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div>
+      <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900">
+        {/* w-measure indicator */}
+        <div className="absolute right-0 bottom-2 left-0 flex -translate-y-5">
+          {/* Horizontal line */}
+          <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-blue-400"></div>
+          {/* Left chip */}
+          <div className="w-full">
+            <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-blue-400"></div>
+          </div>
+          {/* Badge */}
+          <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400">
+            128px
+          </div>
+          {/* Right chip */}
+          <div className="w-full">
+            <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-blue-400"></div>
+          </div>
+        </div>
+      </div>
+      <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div>
+      <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900">
+        {/* h-measure indicator */}
+        <div className="absolute top-0 right-2 bottom-0 flex w-3 -translate-x-5">
+          {/* Vertical line */}
+          <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-blue-400"></div>
+          {/* Top chip */}
+          <div className="w-full">
+            <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-blue-400"></div>
+          </div>
+          {/* Badge */}
+          <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400">
+            128px
+          </div>
+          {/* Bottom chip */}
+          <div className="w-full">
+            <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-blue-400"></div>
+          </div>
+        </div>
+      </div>
+      <div className="col-start-2 row-start-2 size-32 bg-white">
+        <div className="relative box-content size-32 -translate-x-5 -translate-y-5 p-5 ring-4 ring-blue-300 ring-inset dark:ring-blue-500">
+          <div className="h-full w-full bg-blue-500 ring-1 ring-blue-500"></div>
+          <div className="absolute inset-1 z-10">
+            <Stripes className="h-full" />
+          </div>
+        </div>
+      </div>
+      <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div>
+      <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:box-content] -->
+<div class="box-content size-32 border-4 p-4 ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="box-sizing" defaultClass="box-content" featuredClass="box-border" />