@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,665 @@
+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 = "overflow";
+export const description =
+  "Utilities for controlling how an element handles content that is too large for the container.";
+
+<ApiTable
+  rows={[
+    ["overflow-auto", "overflow: auto;"],
+    ["overflow-hidden", "overflow: hidden;"],
+    ["overflow-clip", "overflow: clip;"],
+    ["overflow-visible", "overflow: visible;"],
+    ["overflow-scroll", "overflow: scroll;"],
+    ["overflow-x-auto", "overflow-x: auto;"],
+    ["overflow-y-auto", "overflow-y: auto;"],
+    ["overflow-x-hidden", "overflow-x: hidden;"],
+    ["overflow-y-hidden", "overflow-y: hidden;"],
+    ["overflow-x-clip", "overflow-x: clip;"],
+    ["overflow-y-clip", "overflow-y: clip;"],
+    ["overflow-x-visible", "overflow-x: visible;"],
+    ["overflow-y-visible", "overflow-y: visible;"],
+    ["overflow-x-scroll", "overflow-x: scroll;"],
+    ["overflow-y-scroll", "overflow-y: scroll;"],
+  ]}
+/>
+
+## Examples
+
+### Showing content that overflows
+
+Use the `overflow-visible` utility to prevent content within an element from being clipped:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex max-w-sm items-center gap-6 overflow-visible rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
+      <img
+        className="absolute -left-6 h-24 w-24 rounded-full shadow-lg"
+        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+      />
+      <div className="flex flex-col py-5 pl-24">
+        <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-visible] -->
+<div class="overflow-visible ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Note that any content that overflows the bounds of the element will then be visible.
+
+### Hiding content that overflows
+
+Use the `overflow-hidden` utility to clip any content within an element that overflows the bounds of that element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex max-w-sm items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
+      <img
+        className="absolute -left-6 h-24 w-24 rounded-full shadow-lg"
+        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+      />
+      <div className="flex flex-col py-5 pl-24">
+        <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-hidden] -->
+<div class="overflow-hidden ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling if needed
+
+Use the `overflow-auto` utility to add scrollbars to an element in the event that its content overflows the bounds of that element:
+
+<Figure hint="Scroll vertically">
+
+<Example>
+  {
+    <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-auto rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800">
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-auto] -->
+<div class="overflow-auto ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Unlike `overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary.
+
+### Scrolling horizontally if needed
+
+Use the `overflow-x-auto` utility to allow horizontal scrolling if needed:
+
+<Figure hint="Scroll horizontally">
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-md min-w-0 bg-white shadow-xl dark:bg-gray-800">
+      <div className="flex overflow-x-auto">
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Andrew</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Emily</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Whitney</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">David</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Kristin</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Sarah</strong>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-x-auto] -->
+<div class="overflow-x-auto ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling vertically if needed
+
+Use the `overflow-y-auto` utility to allow vertical scrolling if needed:
+
+<Figure hint="Scroll vertically">
+
+<Example>
+  {
+    <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-y-auto rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800">
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-y-auto] -->
+<div class="h-32 overflow-y-auto ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling horizontally always
+
+Use the `overflow-x-scroll` utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:
+
+<Figure hint="Scroll horizontally">
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-md min-w-0 bg-white shadow-xl dark:bg-gray-800">
+      <div className="flex overflow-x-scroll">
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Andrew</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Emily</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Whitney</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">David</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Kristin</strong>
+          </div>
+        </div>
+        <div className="flex-none px-3 py-6 first:pl-6 last:pr-6">
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              className="h-18 w-18 rounded-full"
+              src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-xs font-medium text-gray-900 dark:text-gray-200">Sarah</strong>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-x-scroll] -->
+<div class="overflow-x-scroll ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling vertically always
+
+Use the `overflow-y-scroll` utility to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system:
+
+<Figure hint="Scroll vertically">
+
+<Example>
+  {
+    <div className="relative mx-auto flex h-72 max-w-sm flex-col divide-y divide-gray-200 overflow-y-scroll rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:divide-gray-200/5 dark:bg-gray-800">
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Analyst</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Director, Marketing</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-4 p-4">
+        <img
+          className="h-12 w-12 rounded-full"
+          src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
+          <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical Advisor</span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-y-scroll] -->
+<div class="overflow-y-scroll ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Scrolling in all directions
+
+Use the `overflow-scroll` utility to add scrollbars to an element:
+
+<Figure hint="Scroll vertically and horizontally">
+
+<Example padding={false}>
+  {
+    <div className="overflow-hidden dark:bg-gray-800">
+      <div className="grid max-h-90 grid-cols-[70px_repeat(7,150px)] grid-rows-[auto_repeat(16,50px)] overflow-scroll">
+        {/* Calendar frame */}
+        <div className="sticky top-0 z-10 col-start-1 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200"></div>
+        <div className="sticky top-0 z-10 col-start-2 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Sun
+        </div>
+        <div className="sticky top-0 z-10 col-start-3 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Mon
+        </div>
+        <div className="sticky top-0 z-10 col-start-4 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Tue
+        </div>
+        <div className="sticky top-0 z-10 col-start-5 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Wed
+        </div>
+        <div className="sticky top-0 z-10 col-start-6 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Thu
+        </div>
+        <div className="sticky top-0 z-10 col-start-7 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Fri
+        </div>
+        <div className="sticky top-0 z-10 col-start-8 row-start-1 border-b border-gray-100 bg-white bg-clip-padding py-2 text-center text-sm font-medium text-gray-900 dark:border-black/10 dark:bg-gradient-to-b dark:from-gray-600 dark:to-gray-700 dark:text-gray-200">
+          Sat
+        </div>
+        <div className="sticky left-0 col-start-1 row-start-2 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          5 AM
+        </div>
+        <div className="col-start-2 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-2 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-2 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-3 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          6 AM
+        </div>
+        <div className="col-start-2 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-3 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-3 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-4 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          7 AM
+        </div>
+        <div className="col-start-2 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-4 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-4 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-5 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          8 AM
+        </div>
+        <div className="col-start-2 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-5 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-5 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-6 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          9 AM
+        </div>
+        <div className="col-start-2 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-6 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-6 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-7 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          10 AM
+        </div>
+        <div className="col-start-2 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-7 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-7 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-8 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          11 AM
+        </div>
+        <div className="col-start-2 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-8 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-8 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-9 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          12 PM
+        </div>
+        <div className="col-start-2 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-9 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-9 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-10 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          1 PM
+        </div>
+        <div className="col-start-2 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-10 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-10 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-11 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          2 PM
+        </div>
+        <div className="col-start-2 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-11 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-11 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-12 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          3 PM
+        </div>
+        <div className="col-start-2 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-12 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-12 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-13 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          4 PM
+        </div>
+        <div className="col-start-2 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-13 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-13 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-14 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          5 PM
+        </div>
+        <div className="col-start-2 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-14 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-14 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-15 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          6 PM
+        </div>
+        <div className="col-start-2 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-15 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-15 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-16 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          7 PM
+        </div>
+        <div className="col-start-2 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-16 border-r border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-16 border-b border-gray-100 dark:border-gray-200/5"></div>
+        <div className="sticky left-0 col-start-1 row-start-17 border-r border-gray-100 bg-white p-1.5 text-right text-xs font-medium text-gray-400 uppercase dark:border-gray-200/5 dark:bg-gray-800">
+          8 PM
+        </div>
+        <div className="col-start-2 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-3 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-4 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-5 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-6 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-7 row-start-17 border-r border-gray-100 dark:border-gray-200/5"></div>
+        <div className="col-start-8 row-start-17"></div>
+        {/* Calendar contents */}
+        <div className="col-start-3 row-span-4 row-start-2 m-1 flex flex-col rounded-lg border border-blue-700/10 bg-blue-400/20 p-1 dark:border-sky-500 dark:bg-sky-600/50">
+          <span className="text-xs text-blue-600 dark:text-sky-100">5 AM</span>
+          <span className="text-xs font-medium text-blue-600 dark:text-sky-100">Flight to Vancouver</span>
+          <span className="text-xs text-blue-600 dark:text-sky-100">Toronto YYZ</span>
+        </div>
+        <div className="col-start-4 row-span-4 row-start-3 m-1 flex flex-col rounded-lg border border-purple-700/10 bg-purple-400/20 p-1 dark:border-fuchsia-500 dark:bg-fuchsia-600/50">
+          <span className="text-xs text-purple-600 dark:text-fuchsia-100">6 AM</span>
+          <span className="text-xs font-medium text-purple-600 dark:text-fuchsia-100">Breakfast</span>
+          <span className="text-xs text-purple-600 dark:text-fuchsia-100">Mel's Diner</span>
+        </div>
+        <div className="col-start-7 row-span-3 row-start-14 m-1 flex flex-col rounded-lg border border-pink-700/10 bg-pink-400/20 p-1 dark:border-indigo-500 dark:bg-indigo-600/50">
+          <span className="text-xs text-pink-600 dark:text-indigo-100">5 PM</span>
+          <span className="text-xs font-medium text-pink-600 dark:text-indigo-100">🎉 Party party 🎉</span>
+          <span className="text-xs text-pink-600 dark:text-indigo-100">We like to party!</span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-scroll] -->
+<div class="overflow-scroll ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Unlike `overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.
+
+### Responsive design
+
+<ResponsiveDesign property="overflow" defaultClass="overflow-auto" featuredClass="overflow-scroll" />