@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,399 @@
+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 = "position";
+export const description = "Utilities for controlling how an element is positioned in the document.";
+
+<ApiTable
+  rows={[
+    ["static", "position: static;"],
+    ["fixed", "position: fixed;"],
+    ["absolute", "position: absolute;"],
+    ["relative", "position: relative;"],
+    ["sticky", "position: sticky;"],
+  ]}
+/>
+
+## Examples
+
+### Statically positioning elements
+
+Use the `static` utility to position an element according to the normal flow of the document:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative text-sm leading-6 font-medium">
+      <div className="rounded-lg border border-purple-700/10 bg-purple-400/20 p-4 dark:border-0 dark:bg-sky-900/70">
+        <div className="static h-32 border border-purple-700/10 bg-purple-400/20 p-4 dark:border-0 dark:bg-sky-400/20">
+          <p className="text-purple-700 dark:text-sky-200">Static parent</p>
+          <div className="absolute bottom-0 left-0 rounded-lg bg-purple-500 p-4 text-white shadow-lg dark:bg-sky-500">
+            <p>Absolute child</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:static] -->
+<div class="static ...">
+  <p>Static parent</p>
+  <div class="absolute bottom-0 left-0 ...">
+    <p>Absolute child</p>
+  </div>
+</div>
+```
+
+</Figure>
+
+With statically positioned elements, any [offsets](/docs/top-right-bottom-left) will be ignored and the element will not act as a position reference for absolutely positioned children.
+
+### Relatively positioning elements
+
+Use the `relative` utility to position an element according to the normal flow of the document:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative text-sm leading-6 font-medium">
+      <div className="rounded-lg border border-sky-700/10 bg-sky-400/20 p-4 dark:border-0 dark:bg-blue-900/70">
+        <div className="relative h-32 border border-sky-700/10 bg-sky-400/20 p-4 dark:border-0 dark:bg-blue-400/20">
+          <p className="text-sky-700 dark:text-white">Relative parent</p>
+          <div className="absolute bottom-0 left-0 rounded-lg bg-sky-500 p-4 text-white shadow-lg dark:bg-blue-500">
+            <p>Absolute child</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:relative] -->
+<div class="relative ...">
+  <p>Relative parent</p>
+  <div class="absolute bottom-0 left-0 ...">
+    <p>Absolute child</p>
+  </div>
+</div>
+```
+
+</Figure>
+
+With relatively position elements, any [offsets](/docs/top-right-bottom-left) are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.
+
+### Absolutely positioning elements
+
+Use the `absolute` utility to position an element _outside_ of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist:
+
+<Figure>
+
+<Example>
+  {
+    <div className="space-y-8">
+      <div>
+        <p className="mb-4 text-sm font-medium text-gray-500">With static positioning</p>
+        <div className="relative text-sm leading-6 font-medium">
+          <div className="relative rounded-lg border border-indigo-700/10 bg-indigo-400/20 p-4 dark:border-0 dark:bg-indigo-900/80">
+            <p className="-mt-2 mb-2 text-indigo-700 dark:text-indigo-200">Relative parent</p>
+            <div className="static flex h-32 flex-col justify-between border border-indigo-700/10 bg-indigo-400/20 p-4 dark:border-0">
+              <p className="text-indigo-700 dark:text-indigo-200">Static parent</p>
+              <div className="flex gap-4">
+                <div className="bottom-0 left-0 rounded-lg bg-indigo-500 p-4 text-white shadow-lg">
+                  <p>Static child?</p>
+                </div>
+                <div className="rounded-lg bg-indigo-100 p-4 text-indigo-600 shadow-lg">
+                  <p>Static sibling</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="mb-4 text-sm font-medium text-gray-500">With absolute positioning</p>
+        <div className="relative text-sm leading-6 font-medium">
+          <div className="relative rounded-lg border border-indigo-700/10 bg-indigo-400/20 p-4 dark:border-0 dark:bg-indigo-900/80">
+            <p className="-mt-2 mb-2 text-indigo-700 dark:text-indigo-200">Relative parent</p>
+            <div className="static flex h-32 flex-col justify-between border border-indigo-700/10 bg-indigo-400/20 p-4 dark:border-0">
+              <p className="text-indigo-700 dark:text-indigo-200">Static parent</p>
+              <div className="flex gap-4">
+                <div className="absolute top-0 right-0 rounded-lg bg-indigo-500 p-4 text-white shadow-lg">
+                  <p>Absolute child</p>
+                </div>
+                <div className="rounded-lg bg-indigo-100 p-4 text-indigo-600 shadow-lg">
+                  <p>Static sibling</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:absolute] -->
+<div class="static ...">
+  <!-- Static parent -->
+  <div class="static ..."><p>Static child</p></div>
+  <div class="inline-block ..."><p>Static sibling</p></div>
+  <!-- Static parent -->
+  <div class="absolute ..."><p>Absolute child</p></div>
+  <div class="inline-block ..."><p>Static sibling</p></div>
+</div>
+```
+
+</Figure>
+
+With absolutely positioned elements, any [offsets](/docs/top-right-bottom-left) are calculated relative to the nearest parent that has a position other than `static`, and the element will act as a position reference for other absolutely positioned children.
+
+### Fixed positioning elements
+
+Use the `fixed` utility to position an element relative to the browser window:
+
+<Figure hint="Scroll this element to see the fixed positioning in action">
+
+<Example padding={false}>
+  {
+    <div className="px-3">
+      <div className="relative mx-auto h-80 max-w-md overflow-hidden bg-white shadow-lg ring-1 ring-gray-900/5 dark:bg-gray-800">
+        <div className="absolute top-0 right-0 left-0 flex items-center bg-gray-50/90 px-4 py-3 text-sm font-semibold text-gray-900 ring-1 ring-gray-900/10 backdrop-blur-sm dark:bg-gray-700/90 dark:text-gray-200 dark:ring-black/10">
+          Contacts
+        </div>
+        <div className="flex h-80 flex-col divide-y divide-gray-200 overflow-auto dark:divide-gray-200/5">
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-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"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+          </div>
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-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"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Debra Houston</strong>
+          </div>
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-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"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Jane White</strong>
+          </div>
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-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"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Ray Flint</strong>
+          </div>
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-12 rounded-full"
+              src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Mindy Albrect</strong>
+          </div>
+          <div className="flex items-center gap-4 p-4">
+            <img
+              className="size-12 rounded-full"
+              src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+            />
+            <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">David Arnold</strong>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:fixed] -->
+<div class="relative">
+  <div class="fixed top-0 right-0 left-0">Contacts</div>
+  <div>
+    <div>
+      <img src="/img/andrew.jpg" />
+      <strong>Andrew Alfred</strong>
+    </div>
+    <div>
+      <img src="/img/debra.jpg" />
+      <strong>Debra Houston</strong>
+    </div>
+    <!-- ... -->
+  </div>
+</div>
+```
+
+</Figure>
+
+With fixed positioned elements, any [offsets](/docs/top-right-bottom-left) are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children:
+
+### Sticky positioning elements
+
+Use the `sticky` utility to position an element as `relative` until it crosses a specified threshold, then treat it as `fixed` until its parent is off screen:
+
+<Figure hint="Scroll this element to see the sticky positioning in action">
+
+<Example padding={false}>
+  {
+    <div className="px-3">
+      <div className="relative mx-auto -my-px h-80 max-w-md overflow-auto bg-white shadow-lg ring-1 ring-gray-900/5 dark:bg-gray-800">
+        <div className="relative">
+          <div className="sticky top-0 flex items-center bg-gray-50/90 px-4 py-3 text-sm font-semibold text-gray-900 ring-1 ring-gray-900/10 backdrop-blur-sm dark:bg-gray-700/90 dark:text-gray-200 dark:ring-black/10">
+            A
+          </div>
+          <div className="divide-y divide-gray-200 dark:divide-gray-200/5">
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Aisha Houston</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Anna White</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andy Flint</strong>
+            </div>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="sticky top-0 flex items-center bg-gray-50/90 px-4 py-3 text-sm font-semibold text-gray-900 ring-1 ring-gray-900/10 backdrop-blur-sm dark:bg-gray-700/90 dark:text-gray-200 dark:ring-black/10">
+            B
+          </div>
+          <div className="divide-y divide-gray-200 dark:divide-gray-200/5">
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Bob Alfred</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Bianca Houston</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Brianna White</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Bert Flint</strong>
+            </div>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="sticky top-0 flex items-center bg-gray-50/90 px-4 py-3 text-sm font-semibold text-gray-900 ring-1 ring-gray-900/10 backdrop-blur-sm dark:bg-gray-700/90 dark:text-gray-200 dark:ring-black/10">
+            C
+          </div>
+          <div className="divide-y divide-gray-200 dark:divide-gray-200/5">
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Colton Alfred</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Cynthia Houston</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Cheyenne White</strong>
+            </div>
+            <div className="flex items-center gap-4 p-4">
+              <img
+                className="size-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"
+              />
+              <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Charlie Flint</strong>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:sticky,top-0] -->
+<div>
+  <div>
+    <div class="sticky top-0 ...">A</div>
+    <div>
+      <div>
+        <img src="/img/andrew.jpg" />
+        <strong>Andrew Alfred</strong>
+      </div>
+      <div>
+        <img src="/img/aisha.jpg" />
+        <strong>Aisha Houston</strong>
+      </div>
+      <!-- ... -->
+    </div>
+  </div>
+  <div>
+    <div class="sticky top-0">B</div>
+    <div>
+      <div>
+        <img src="/img/bob.jpg" />
+        <strong>Bob Alfred</strong>
+      </div>
+      <!-- ... -->
+    </div>
+  </div>
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+With sticky positioned elements, any [offsets](/docs/top-right-bottom-left) are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.
+
+### Responsive design
+
+<ResponsiveDesign property="position" defaultClass="relative" featuredClass="absolute" />

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

@@ -0,0 +1,291 @@
+export const title = "Preflight";
+export const description = "An opinionated set of base styles for Tailwind projects.";
+
+## Overview
+
+Built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize), Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.
+
+When you import `tailwindcss` into your project, Preflight is automatically injected into the `base` layer:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+/* [!code highlight:2] */
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+```
+
+While most of the styles in Preflight are meant to go unnoticed—they simply make things behave more like you'd expect them to—some are more opinionated and can be surprising when you first encounter them.
+
+For a complete reference of all the styles applied by Preflight, [see the stylesheet](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css).
+
+### Margins are removed
+
+Preflight removes all of the default margins from all elements including headings, blockquotes, paragraphs, etc:
+
+```css
+/* [!code filename:CSS] */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  margin: 0;
+  padding: 0;
+}
+```
+
+This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale.
+
+### Border styles are reset
+
+In order to make it easy to add a border by simply adding the `border` class, Tailwind overrides the default border styles for all elements with the following rules:
+
+```css
+/* [!code filename:CSS] */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box;
+  border: 0 solid;
+}
+```
+
+Since the `border` class only sets the `border-width` property, this reset ensures that adding that class always adds a solid `1px` border that uses `currentColor`.
+
+This can cause some unexpected results when integrating certain third-party libraries, like [Google maps](https://github.com/tailwindlabs/tailwindcss/issues/484) for example.
+
+When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS:
+
+```css
+/* [!code filename:CSS] */
+@layer base {
+  .google-map * {
+    border-style: none;
+  }
+}
+```
+
+### Headings are unstyled
+
+All heading elements are completely unstyled by default, and have the same font size and weight as normal text:
+
+```css
+/* [!code filename:CSS] */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+```
+
+The reason for this is two-fold:
+
+- **It helps you avoid accidentally deviating from your type scale**. By default, browsers assign sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale.
+- **In UI development, headings should often be visually de-emphasized**. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.
+
+You can always add default header styles to your project by [adding your own base styles](/docs/adding-custom-styles#adding-base-styles).
+
+### Lists are unstyled
+
+Ordered and unordered lists are unstyled by default, with no bullets or numbers:
+
+```css
+/* [!code filename:CSS] */
+ol,
+ul,
+menu {
+  list-style: none;
+}
+```
+
+If you'd like to style a list, you can do so using the [list-style-type](/docs/list-style-type) and [list-style-position](/docs/list-style-position) utilities:
+
+```html
+<!-- [!code filename:HTML] -->
+<ul class="list-inside list-disc">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+```
+
+You can always add default list styles to your project by [adding your own base styles](/docs/adding-custom-styles#adding-base-styles).
+
+#### Accessibility considerations
+
+Unstyled lists are [not announced as lists by VoiceOver](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/). If your content is truly a list but you would like to keep it unstyled, [add a "list" role](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) to the element:
+
+```html
+<!-- [!code filename:HTML] -->
+<ul role="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+```
+
+### Images are block-level
+
+Images and other replaced elements (like `svg`, `video`, `canvas`, and others) are `display: block` by default:
+
+```css
+/* [!code filename:CSS] */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+```
+
+This helps to avoid unexpected alignment issues that you often run into using the browser default of `display: inline`.
+
+If you ever need to make one of these elements `inline` instead of `block`, simply use the `inline` utility:
+
+```html
+<!-- [!code filename:HTML] -->
+<img class="inline" src="..." alt="..." />
+```
+
+### Images are constrained
+
+Images and videos are constrained to the parent width in a way that preserves their intrinsic aspect ratio:
+
+```css
+/* [!code filename:CSS] */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+This prevents them from overflowing their containers and makes them responsive by default. If you ever need to override this behavior, use the `max-w-none` utility:
+
+```html
+<!-- [!code filename:HTML] -->
+<img class="max-w-none" src="..." alt="..." />
+```
+
+#### Elements with a `hidden` attribute stay hidden
+
+```css
+/* [!code filename:CSS] */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
+```
+
+This enforces that elements with a `hidden` attribute stay invisible unless using `hidden="until-found"`. Remove the `hidden` attribute if you want an element to be visible to the user.
+
+## Extending Preflight
+
+If you'd like to add your own base styles on top of Preflight, add them to the `base` CSS layer in your CSS using `@layer base`:
+
+```css
+/* [!code filename:CSS] */
+@layer base {
+  h1 {
+    font-size: var(--text-2xl);
+  }
+  h2 {
+    font-size: var(--text-xl);
+  }
+  h3 {
+    font-size: var(--text-lg);
+  }
+  a {
+    color: var(--color-blue-600);
+    text-decoration-line: underline;
+  }
+}
+```
+
+Learn more in the [adding base styles documentation](/docs/adding-custom-styles#adding-base-styles).
+
+## Disabling Preflight
+
+If you'd like to completely disable Preflight—perhaps because you're integrating Tailwind into an existing project or you'd prefer to define your own base styles—you can do so by importing only the parts of Tailwind that you need.
+
+By default, this is what `@import "tailwindcss";` injects:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+```
+
+To disable Preflight, simply omit its import while keeping everything else:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities);
+```
+
+When importing Tailwind CSS' files individually, features like `source()`, `theme()`, and `prefix()` should go on their respective imports.
+
+For example, source detection affects generated utilities, so `source(…)` should be added to the `utilities.css` import:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) source(none); /* [!code ++] */
+```
+
+The same goes for `important`, which also affects utilities:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) important; /* [!code ++] */
+```
+
+Similarly, `theme(static)` and `theme(inline)` affect the generated theme variables and should be placed on the `theme.css` import:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme); /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) theme(static); /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities);
+```
+
+Finally, using a prefix with `prefix(tw)` affects the utilities and variables, so it should go on both imports:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme); /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities); /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) prefix(tw); /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities) prefix(tw); /* [!code ++] */
+```