@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,523 @@
+import dedent from "dedent";
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "display";
+export const description = "Utilities for controlling the display box type of an element.";
+
+<ApiTable
+  rows={[
+    ["inline", "display: inline;"],
+    ["block", "display: block;"],
+    ["inline-block", "display: inline-block;"],
+    ["flow-root", "display: flow-root;"],
+    ["flex", "display: flex;"],
+    ["inline-flex", "display: inline-flex;"],
+    ["grid", "display: grid;"],
+    ["inline-grid", "display: inline-grid;"],
+    ["contents", "display: contents;"],
+    ["table", "display: table;"],
+    ["inline-table", "display: inline-table;"],
+    ["table-caption", "display: table-caption;"],
+    ["table-cell", "display: table-cell;"],
+    ["table-column", "display: table-column;"],
+    ["table-column-group", "display: table-column-group;"],
+    ["table-footer-group", "display: table-footer-group;"],
+    ["table-header-group", "display: table-header-group;"],
+    ["table-row-group", "display: table-row-group;"],
+    ["table-row", "display: table-row;"],
+    ["list-item", "display: list-item;"],
+    ["hidden", "display: none;"],
+    [
+      "sr-only",
+      dedent`
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+      `,
+    ],
+    [
+      "not-sr-only",
+      dedent`
+        position: static;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        clip-path: none;
+        white-space: normal;
+      `,
+    ],
+  ]}
+/>
+
+## Examples
+
+### Block and Inline
+
+Use the `inline`, `inline-block`, and `block` utilities to control the flow of text and elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto max-w-xs px-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
+      When controlling the flow of text, using the CSS property{" "}
+      <span className="inline rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
+        display: inline
+      </span>{" "}
+      will cause the text inside the element to wrap normally.
+      <br />
+      <br />
+      While using the property{" "}
+      <span className="inline-block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
+        display: inline-block
+      </span>{" "}
+      will wrap the element to prevent the text inside from extending beyond its parent.
+      <br />
+      <br />
+      Lastly, using the property{" "}
+      <span className="block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
+        display: block
+      </span>{" "}
+      will put the element on its own line and fill its parent.
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline,inline-block,block] -->
+<p>
+  When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the
+  text inside the element to wrap normally.
+</p>
+<p>
+  While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the
+  text inside from extending beyond its parent.
+</p>
+<p>
+  Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its
+  parent.
+</p>
+```
+
+</Figure>
+
+### Flow Root
+
+Use the `flow-root` utility to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context):
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto max-w-xs p-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
+      <div className="relative mb-0.5 flow-root">
+        <div className="absolute inset-x-0">
+          <Stripes border className="h-4 w-full" />
+        </div>
+        <div className="absolute inset-x-0 bottom-0">
+          <Stripes border className="h-4" />
+        </div>
+        <div className="my-4">
+          Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public
+          Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
+        </div>
+      </div>
+      <div className="relative mt-0.5 flow-root">
+        <div className="absolute inset-x-0">
+          <Stripes border className="h-4 w-full" />
+        </div>
+        <div className="absolute inset-x-0 bottom-0">
+          <Stripes border className="h-4" />
+        </div>
+        <div className="my-4">
+          Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting
+          convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library
+          books? Well, let me give you a hint, junior.
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flow-root] -->
+<div class="p-4">
+  <div class="flow-root ...">
+    <div class="my-4 ...">Well, let me tell you something, ...</div>
+  </div>
+  <div class="flow-root ...">
+    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
+  </div>
+</div>
+```
+
+</Figure>
+
+### Flex
+
+Use the `flex` utility to create a block-level flex container:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto flex max-w-xs justify-center p-4 leading-6 text-gray-500 dark:text-gray-400">
+      <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&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
+        />
+        <div className="flex flex-col">
+          <strong className="font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+          <span className="font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex] -->
+<div class="flex items-center">
+  <img src="path/to/image.jpg" />
+  <div>
+    <strong>Andrew Alfred</strong>
+    <span>Technical advisor</span>
+  </div>
+</div>
+```
+
+</Figure>
+
+### Inline Flex
+
+Use the `inline-flex` utility to create an inline flex container that flows with text:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-lg p-4 text-sm leading-6 text-gray-500 sm:text-base/7 dark:text-gray-300">
+      Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10
+      cents in Michigan, but only 5 cents here.{" "}
+      <span className="ml-1 inline-flex items-baseline">
+        <img
+          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
+          alt=""
+          className="mr-1 size-5 self-center rounded-full"
+        />
+        <span className="font-medium text-gray-900 dark:text-gray-100">Kramer</span>
+      </span>{" "}
+      keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I
+      just have to believe there's a way to make it work, there's simply too much opportunity here.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline-flex] -->
+<p>
+  Today I spent most of the day researching ways to ...
+  <span class="inline-flex items-baseline">
+    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
+    <span>Kramer</span>
+  </span>
+  keeps telling me there is no way to make it work, that ...
+</p>
+```
+
+</Figure>
+
+### Grid
+
+Use the `grid` utility to create a grid container:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative grid grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">01</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">02</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">03</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">04</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">05</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">06</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">07</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">08</div>
+      <div className="relative rounded-lg bg-fuchsia-500 p-4">09</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:grid] -->
+<div class="grid grid-cols-3 grid-rows-3 gap-4">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Inline Grid
+
+Use the `inline-grid` utility to create an inline grid container:
+
+<Figure>
+
+<Example>
+  {
+    <div className="w-full space-x-3 overflow-x-auto p-8 whitespace-nowrap">
+      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
+      </div>
+      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
+        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline-grid] -->
+<span class="inline-grid grid-cols-3 gap-4">
+  <span>01</span>
+  <span>02</span>
+  <span>03</span>
+  <span>04</span>
+  <span>05</span>
+  <span>06</span>
+</span>
+<span class="inline-grid grid-cols-3 gap-4">
+  <span>01</span>
+  <span>02</span>
+  <span>03</span>
+  <span>04</span>
+  <span>05</span>
+  <span>06</span>
+</span>
+```
+
+</Figure>
+
+### Contents
+
+Use the `contents` utility to create a "phantom" container whose children act like direct children of the parent:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">01</div>
+      <div className="relative contents">
+        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">02</div>
+        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">03</div>
+      </div>
+      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">04</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:contents] -->
+<div class="flex ...">
+  <div class="flex-1 ...">01</div>
+  <div class="contents">
+    <div class="flex-1 ...">02</div>
+    <div class="flex-1 ...">03</div>
+  </div>
+  <div class="flex-1 ...">04</div>
+</div>
+```
+
+</Figure>
+
+### Table
+
+Use the `table`, `table-row`, `table-cell`, `table-caption`, `table-column`, `table-column-group`, `table-header-group`, `table-row-group`, and `table-footer-group` utilities to create elements that behave like their respective table elements:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="my-8 overflow-hidden">
+      <div className="table w-full table-auto border-collapse text-sm">
+        <div className="table-header-group">
+          <div className="table-row">
+            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
+              Song
+            </div>
+            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
+              Artist
+            </div>
+            <div className="table-cell border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
+              Year
+            </div>
+          </div>
+        </div>
+        <div className="table-row-group dark:bg-black/5">
+          <div className="table-row">
+            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              The Sliding Mr. Bones (Next Stop, Pottersville)
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              Malcolm Lockyer
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              1961
+            </div>
+          </div>
+          <div className="table-row">
+            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              Witchy Woman
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              The Eagles
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
+              1972
+            </div>
+          </div>
+          <div className="table-row">
+            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
+              Shining Star
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/20 dark:text-gray-300">
+              Earth, Wind, and Fire
+            </div>
+            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
+              1975
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:table,table-header-group,table-row-group,table-row,table-cell] -->
+<div class="table w-full ...">
+  <div class="table-header-group ...">
+    <div class="table-row">
+      <div class="table-cell text-left ...">Song</div>
+      <div class="table-cell text-left ...">Artist</div>
+      <div class="table-cell text-left ...">Year</div>
+    </div>
+  </div>
+  <div class="table-row-group">
+    <div class="table-row">
+      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
+      <div class="table-cell ...">Malcolm Lockyer</div>
+      <div class="table-cell ...">1961</div>
+    </div>
+    <div class="table-row">
+      <div class="table-cell ...">Witchy Woman</div>
+      <div class="table-cell ...">The Eagles</div>
+      <div class="table-cell ...">1972</div>
+    </div>
+    <div class="table-row">
+      <div class="table-cell ...">Shining Star</div>
+      <div class="table-cell ...">Earth, Wind, and Fire</div>
+      <div class="table-cell ...">1975</div>
+    </div>
+  </div>
+</div>
+```
+
+</Figure>
+
+### Hidden
+
+Use the `hidden` utility to remove an element from the document:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="absolute inset-0">
+        <Stripes border className="h-full rounded-lg" />
+      </div>
+      <div className="hidden h-14 w-14 rounded-lg bg-purple-500 p-4">01</div>
+      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">02</div>
+      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hidden] -->
+<div class="flex ...">
+  <div class="hidden ...">01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+To visually hide an element but keep it in the document, use the [visibility](/docs/visibility#making-elements-invisible) property instead.
+
+### Screen-reader only
+
+Use `sr-only` to hide an element visually without hiding it from screen readers:
+
+```html
+<!-- [!code classes:sr-only] -->
+<a href="#">
+  <svg><!-- ... --></svg>
+  <span class="sr-only">Settings</span>
+</a>
+```
+
+Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers:
+
+```html
+<!-- [!code classes:sm:not-sr-only] -->
+<a href="#">
+  <svg><!-- ... --></svg>
+  <span class="sr-only sm:not-sr-only">Settings</span>
+</a>
+```
+
+This can be useful when you want to visually hide something on small screens but show it on larger screens for example.
+
+### Responsive design
+
+<ResponsiveDesign property="display" defaultClass="flex" featuredClass="inline-flex" />

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

@@ -0,0 +1,90 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { CustomizingYourTheme } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "Editor setup";
+export const description = "Tooling to improve the developer experience when working with Tailwind CSS.";
+
+## Syntax support
+
+Tailwind CSS uses custom CSS syntax like `@theme`, `@variant`, and `@source`, and in some editors this can trigger warnings or errors where these rules aren't recognized.
+
+If you're using VS Code, our official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses.
+
+In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files.
+
+## Cursor
+
+[Cursor](https://cursor.com/?utm_source=tailwind) is an AI-native code editor with features like context-aware autocomplete and built-in coding agents. Since it supports VS Code extensions, all of the Tailwind CSS tooling you're already familiar with works out of the box – including our official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension and the [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) for class sorting.
+
+<img
+  src={require("./img/cursor-intellisense.png").default.src}
+  alt="Tailwind CSS IntelliSense extension for Cursor"
+  width={1344}
+  height={672}
+  className="rounded-lg"
+/>
+
+Check out and download [Cursor](https://cursor.com/?utm_source=tailwind).
+
+## Zed
+
+[Zed](https://zed.dev/?utm_source=tailwind) is a fast, modern code editor, designed from the ground-up for cutting-edge development workflows, including agentic editing with AI. It has built-in support for Tailwind CSS autocompletions, linting, and hover previews, without the need to install and configure a separate extension. It also integrates tightly with Prettier, so our official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) works seamlessly with Zed when installed.
+
+<img
+  src={require("./img/zed-intellisense.png").default.src}
+  alt="Built-in support for Tailwind CSS in Zed via Tailwind CSS IntelliSense"
+  width={1344}
+  height={672}
+  className="rounded-lg"
+/>
+
+Check out [Zed](https://zed.dev/?utm_source=tailwind) and learn more about [how it works with Tailwind CSS](https://zed.dev/docs/languages/tailwindcss?utm_source=tailwind).
+
+## IntelliSense for VS Code
+
+The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.
+
+<img
+  src={require("./img/intellisense.png").default.src}
+  alt="Tailwind CSS IntelliSense extension for Visual Studio Code"
+  width={1344}
+  height={672}
+  className="rounded-lg"
+/>
+
+- **Autocomplete** — providing intelligent suggestions for utility classes, as well as [CSS functions and directives](/docs/functions-and-directives).
+- **Linting** — highlighting errors and potential bugs in both your CSS and your markup.
+- **Hover previews** — revealing the complete CSS for utility classes when you hover over them.
+- **Syntax highlighting** — so that Tailwind features that use custom CSS syntax are highlighted correctly.
+
+Check out the project [on GitHub](https://github.com/tailwindcss/intellisense) to learn more, or [add it to Visual Studio Code](vscode:extension/bradlc.vscode-tailwindcss) to get started now.
+
+## Class sorting with Prettier
+
+We maintain an official [Prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) for Tailwind CSS that automatically sorts your classes following our [recommended class order](/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted).
+
+<img src={require("./img/prettier-banner.jpg").default.src} alt="" width={2400} height={819} className="rounded-lg" />
+
+It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.
+
+{/* prettier-ignore */}
+```html
+<!-- [!code filename:HTML] -->
+<!-- Before -->
+<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>
+
+<!-- After -->
+<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>
+```
+
+Check out the plugin [on GitHub](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to learn more and get started.
+
+## JetBrains IDEs
+
+JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML.
+
+[Learn more about Tailwind CSS support in JetBrains IDEs &rarr;](https://www.jetbrains.com/help/webstorm/tailwind-css.html)

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

@@ -0,0 +1,75 @@
+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 = "field-sizing";
+export const description = "Utilities for controlling the sizing of form controls.";
+
+<ApiTable
+  rows={[
+    ["field-sizing-fixed", "field-sizing: fixed;"],
+    ["field-sizing-content", "field-sizing: content;"],
+  ]}
+/>
+
+## Examples
+
+### Sizing based on content
+
+Use the `field-sizing-content` utility to allow a form control to adjust its size based on the content:
+
+<Figure hint="Type in the input below to see the size change">
+
+<Example>
+  {
+    <textarea
+      rows="2"
+      defaultValue="Latex Salesman, Vanderlay Industries"
+      className="mx-auto block field-sizing-content rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:field-sizing-content] -->
+<textarea class="field-sizing-content ..." rows="2">
+  Latex Salesman, Vanderlay Industries
+</textarea>
+```
+
+</Figure>
+
+### Using a fixed size
+
+Use the `field-sizing-fixed` utility to make a form control use a fixed size:
+
+<Figure hint="Type in the input below to see the size remain the same">
+
+<Example>
+  {
+    <textarea
+      rows="2"
+      defaultValue="Latex Salesman, Vanderlay Industries"
+      className="mx-auto block field-sizing-fixed w-80 rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:field-sizing-fixed] -->
+<textarea class="field-sizing-fixed w-80 ..." rows="2">
+  Latex Salesman, Vanderlay Industries
+</textarea>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="input"
+  property="field-sizing"
+  defaultClass="field-sizing-content"
+  featuredClass="field-sizing-fixed"
+/>