@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,104 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "z-index";
+export const description = "Utilities for controlling the stack order of an element.";
+
+<ApiTable
+  rows={[
+    ["z-<number>", "z-index: <number>;"],
+    ["z-auto", "z-index: auto;"],
+    ["z-[<value>]", "z-index: <value>;"],
+    ["z-(<custom-property>)", "z-index: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `z-<number>` utilities like `z-10` and `z-50` to control the stack order (or three-dimensional positioning) of an element, regardless of the order it has been displayed:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center -space-x-3 font-mono text-sm leading-6 font-bold text-white">
+      <div className="z-40 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        05
+      </div>
+      <div className="z-30 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        04
+      </div>
+      <div className="z-20 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        03
+      </div>
+      <div className="z-10 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        02
+      </div>
+      <div className="z-0 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        01
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:z-40,z-30,z-20,z-10,z-0] -->
+<div class="z-40 ...">05</div>
+<div class="z-30 ...">04</div>
+<div class="z-20 ...">03</div>
+<div class="z-10 ...">02</div>
+<div class="z-0 ...">01</div>
+```
+
+</Figure>
+
+### Using negative values
+
+To use a negative z-index value, prefix the class name with a dash to convert it to a negative value:
+
+<Figure>
+
+<Example>
+  {
+    <div className="isolate flex justify-center -space-x-3 font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        01
+      </div>
+      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        02
+      </div>
+      <div className="-z-10 flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        03
+      </div>
+      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        04
+      </div>
+      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
+        05
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-z-10] -->
+<div class="...">05</div>
+<div class="...">04</div>
+<div class="-z-10 ...">03</div>
+<div class="...">02</div>
+<div class="...">01</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="z" name="stack order" value="calc(var(--index)+1)" />
+
+### Responsive design
+
+<ResponsiveDesign property="z-index" defaultClass="z-0" featuredClass="z-50" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs-catalog.md

@@ -0,0 +1,251 @@
+# Tailwind v4 Docs Catalog
+
+Generated by `scripts/sync_tailwind_docs.py`. Lists every synced doc page under
+`references/docs/`, grouped by the upstream sidebar category, so a topic can be
+located without opening every file.
+
+## Getting started
+
+- `references/docs/editor-setup.mdx`
+- `references/docs/compatibility.mdx`
+- `references/docs/upgrade-guide.mdx`
+
+## Core concepts
+
+- `references/docs/styling-with-utility-classes.mdx`
+- `references/docs/hover-focus-and-other-states.mdx`
+- `references/docs/responsive-design.mdx`
+- `references/docs/dark-mode.mdx`
+- `references/docs/theme.mdx`
+- `references/docs/colors.mdx`
+- `references/docs/adding-custom-styles.mdx`
+- `references/docs/detecting-classes-in-source-files.mdx`
+- `references/docs/functions-and-directives.mdx`
+
+## Base styles
+
+- `references/docs/preflight.mdx`
+
+## Layout
+
+- `references/docs/aspect-ratio.mdx`
+- `references/docs/columns.mdx`
+- `references/docs/break-after.mdx`
+- `references/docs/break-before.mdx`
+- `references/docs/break-inside.mdx`
+- `references/docs/box-decoration-break.mdx`
+- `references/docs/box-sizing.mdx`
+- `references/docs/display.mdx`
+- `references/docs/float.mdx`
+- `references/docs/clear.mdx`
+- `references/docs/isolation.mdx`
+- `references/docs/object-fit.mdx`
+- `references/docs/object-position.mdx`
+- `references/docs/overflow.mdx`
+- `references/docs/overscroll-behavior.mdx`
+- `references/docs/position.mdx`
+- `references/docs/top-right-bottom-left.mdx`
+- `references/docs/visibility.mdx`
+- `references/docs/z-index.mdx`
+
+## Flexbox & Grid
+
+- `references/docs/flex-basis.mdx`
+- `references/docs/flex-direction.mdx`
+- `references/docs/flex-wrap.mdx`
+- `references/docs/flex.mdx`
+- `references/docs/flex-grow.mdx`
+- `references/docs/flex-shrink.mdx`
+- `references/docs/order.mdx`
+- `references/docs/grid-template-columns.mdx`
+- `references/docs/grid-column.mdx`
+- `references/docs/grid-template-rows.mdx`
+- `references/docs/grid-row.mdx`
+- `references/docs/grid-auto-flow.mdx`
+- `references/docs/grid-auto-columns.mdx`
+- `references/docs/grid-auto-rows.mdx`
+- `references/docs/gap.mdx`
+- `references/docs/justify-content.mdx`
+- `references/docs/justify-items.mdx`
+- `references/docs/justify-self.mdx`
+- `references/docs/align-content.mdx`
+- `references/docs/align-items.mdx`
+- `references/docs/align-self.mdx`
+- `references/docs/place-content.mdx`
+- `references/docs/place-items.mdx`
+- `references/docs/place-self.mdx`
+
+## Spacing
+
+- `references/docs/padding.mdx`
+- `references/docs/margin.mdx`
+
+## Sizing
+
+- `references/docs/width.mdx`
+- `references/docs/min-width.mdx`
+- `references/docs/max-width.mdx`
+- `references/docs/height.mdx`
+- `references/docs/min-height.mdx`
+- `references/docs/max-height.mdx`
+- `references/docs/inline-size.mdx`
+- `references/docs/min-inline-size.mdx`
+- `references/docs/max-inline-size.mdx`
+- `references/docs/block-size.mdx`
+- `references/docs/min-block-size.mdx`
+- `references/docs/max-block-size.mdx`
+
+## Typography
+
+- `references/docs/font-family.mdx`
+- `references/docs/font-size.mdx`
+- `references/docs/font-smoothing.mdx`
+- `references/docs/font-style.mdx`
+- `references/docs/font-weight.mdx`
+- `references/docs/font-stretch.mdx`
+- `references/docs/font-variant-numeric.mdx`
+- `references/docs/font-feature-settings.mdx`
+- `references/docs/letter-spacing.mdx`
+- `references/docs/line-clamp.mdx`
+- `references/docs/line-height.mdx`
+- `references/docs/list-style-image.mdx`
+- `references/docs/list-style-position.mdx`
+- `references/docs/list-style-type.mdx`
+- `references/docs/text-align.mdx`
+- `references/docs/color.mdx`
+- `references/docs/text-decoration-line.mdx`
+- `references/docs/text-decoration-color.mdx`
+- `references/docs/text-decoration-style.mdx`
+- `references/docs/text-decoration-thickness.mdx`
+- `references/docs/text-underline-offset.mdx`
+- `references/docs/text-transform.mdx`
+- `references/docs/text-overflow.mdx`
+- `references/docs/text-wrap.mdx`
+- `references/docs/text-indent.mdx`
+- `references/docs/vertical-align.mdx`
+- `references/docs/white-space.mdx`
+- `references/docs/word-break.mdx`
+- `references/docs/overflow-wrap.mdx`
+- `references/docs/hyphens.mdx`
+- `references/docs/content.mdx`
+
+## Backgrounds
+
+- `references/docs/background-attachment.mdx`
+- `references/docs/background-clip.mdx`
+- `references/docs/background-color.mdx`
+- `references/docs/background-image.mdx`
+- `references/docs/background-origin.mdx`
+- `references/docs/background-position.mdx`
+- `references/docs/background-repeat.mdx`
+- `references/docs/background-size.mdx`
+
+## Borders
+
+- `references/docs/border-radius.mdx`
+- `references/docs/border-width.mdx`
+- `references/docs/border-color.mdx`
+- `references/docs/border-style.mdx`
+- `references/docs/outline-width.mdx`
+- `references/docs/outline-color.mdx`
+- `references/docs/outline-style.mdx`
+- `references/docs/outline-offset.mdx`
+
+## Effects
+
+- `references/docs/box-shadow.mdx`
+- `references/docs/text-shadow.mdx`
+- `references/docs/opacity.mdx`
+- `references/docs/mix-blend-mode.mdx`
+- `references/docs/background-blend-mode.mdx`
+- `references/docs/mask-clip.mdx`
+- `references/docs/mask-composite.mdx`
+- `references/docs/mask-image.mdx`
+- `references/docs/mask-mode.mdx`
+- `references/docs/mask-origin.mdx`
+- `references/docs/mask-position.mdx`
+- `references/docs/mask-repeat.mdx`
+- `references/docs/mask-size.mdx`
+- `references/docs/mask-type.mdx`
+
+## Filters
+
+- `references/docs/filter.mdx`
+- `references/docs/filter-blur.mdx`
+- `references/docs/filter-brightness.mdx`
+- `references/docs/filter-contrast.mdx`
+- `references/docs/filter-drop-shadow.mdx`
+- `references/docs/filter-grayscale.mdx`
+- `references/docs/filter-hue-rotate.mdx`
+- `references/docs/filter-invert.mdx`
+- `references/docs/filter-saturate.mdx`
+- `references/docs/filter-sepia.mdx`
+- `references/docs/backdrop-filter.mdx`
+- `references/docs/backdrop-filter-blur.mdx`
+- `references/docs/backdrop-filter-brightness.mdx`
+- `references/docs/backdrop-filter-contrast.mdx`
+- `references/docs/backdrop-filter-grayscale.mdx`
+- `references/docs/backdrop-filter-hue-rotate.mdx`
+- `references/docs/backdrop-filter-invert.mdx`
+- `references/docs/backdrop-filter-opacity.mdx`
+- `references/docs/backdrop-filter-saturate.mdx`
+- `references/docs/backdrop-filter-sepia.mdx`
+
+## Tables
+
+- `references/docs/border-collapse.mdx`
+- `references/docs/border-spacing.mdx`
+- `references/docs/table-layout.mdx`
+- `references/docs/caption-side.mdx`
+
+## Transitions & Animation
+
+- `references/docs/transition-property.mdx`
+- `references/docs/transition-behavior.mdx`
+- `references/docs/transition-duration.mdx`
+- `references/docs/transition-timing-function.mdx`
+- `references/docs/transition-delay.mdx`
+- `references/docs/animation.mdx`
+
+## Transforms
+
+- `references/docs/backface-visibility.mdx`
+- `references/docs/perspective.mdx`
+- `references/docs/perspective-origin.mdx`
+- `references/docs/rotate.mdx`
+- `references/docs/scale.mdx`
+- `references/docs/skew.mdx`
+- `references/docs/transform.mdx`
+- `references/docs/transform-origin.mdx`
+- `references/docs/transform-style.mdx`
+- `references/docs/translate.mdx`
+
+## Interactivity
+
+- `references/docs/accent-color.mdx`
+- `references/docs/appearance.mdx`
+- `references/docs/caret-color.mdx`
+- `references/docs/color-scheme.mdx`
+- `references/docs/cursor.mdx`
+- `references/docs/field-sizing.mdx`
+- `references/docs/pointer-events.mdx`
+- `references/docs/resize.mdx`
+- `references/docs/scroll-behavior.mdx`
+- `references/docs/scroll-margin.mdx`
+- `references/docs/scroll-padding.mdx`
+- `references/docs/scroll-snap-align.mdx`
+- `references/docs/scroll-snap-stop.mdx`
+- `references/docs/scroll-snap-type.mdx`
+- `references/docs/touch-action.mdx`
+- `references/docs/user-select.mdx`
+- `references/docs/will-change.mdx`
+
+## SVG
+
+- `references/docs/fill.mdx`
+- `references/docs/stroke.mdx`
+- `references/docs/stroke-width.mdx`
+
+## Accessibility
+
+- `references/docs/forced-color-adjust.mdx`

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs-index.tsx

@@ -0,0 +1,237 @@
+export default {
+  'Getting started': [
+    ['Installation', '/docs/installation'],
+    ['Editor setup', '/docs/editor-setup'],
+    ['Compatibility', '/docs/compatibility'],
+    ['Upgrade guide', '/docs/upgrade-guide'],
+  ] as const,
+  'Core concepts': [
+    ['Styling with utility classes', '/docs/styling-with-utility-classes'],
+    ['Hover, focus, and other states', '/docs/hover-focus-and-other-states'],
+    ['Responsive design', '/docs/responsive-design'],
+    ['Dark mode', '/docs/dark-mode'],
+    ['Theme variables', '/docs/theme'],
+    ['Colors', '/docs/colors'],
+    ['Adding custom styles', '/docs/adding-custom-styles'],
+    ['Detecting classes in source files', '/docs/detecting-classes-in-source-files'],
+    ['Functions and directives', '/docs/functions-and-directives'],
+  ] as const,
+  'Base styles': [['Preflight', '/docs/preflight']] as const,
+  Layout: [
+    ['aspect-ratio', '/docs/aspect-ratio'],
+    ['columns', '/docs/columns'],
+    ['break-after', '/docs/break-after'],
+    ['break-before', '/docs/break-before'],
+    ['break-inside', '/docs/break-inside'],
+    ['box-decoration-break', '/docs/box-decoration-break'],
+    ['box-sizing', '/docs/box-sizing'],
+    ['display', '/docs/display'],
+    ['float', '/docs/float'],
+    ['clear', '/docs/clear'],
+    ['isolation', '/docs/isolation'],
+    ['object-fit', '/docs/object-fit'],
+    ['object-position', '/docs/object-position'],
+    ['overflow', '/docs/overflow'],
+    ['overscroll-behavior', '/docs/overscroll-behavior'],
+    ['position', '/docs/position'],
+    ['top / right / bottom / left', '/docs/top-right-bottom-left'],
+    ['visibility', '/docs/visibility'],
+    ['z-index', '/docs/z-index'],
+  ] as const,
+  'Flexbox & Grid': [
+    ['flex-basis', '/docs/flex-basis'],
+    ['flex-direction', '/docs/flex-direction'],
+    ['flex-wrap', '/docs/flex-wrap'],
+    ['flex', '/docs/flex'],
+    ['flex-grow', '/docs/flex-grow'],
+    ['flex-shrink', '/docs/flex-shrink'],
+    ['order', '/docs/order'],
+    ['grid-template-columns', '/docs/grid-template-columns'],
+    ['grid-column', '/docs/grid-column'],
+    ['grid-template-rows', '/docs/grid-template-rows'],
+    ['grid-row', '/docs/grid-row'],
+    ['grid-auto-flow', '/docs/grid-auto-flow'],
+    ['grid-auto-columns', '/docs/grid-auto-columns'],
+    ['grid-auto-rows', '/docs/grid-auto-rows'],
+    ['gap', '/docs/gap'],
+    ['justify-content', '/docs/justify-content'],
+    ['justify-items', '/docs/justify-items'],
+    ['justify-self', '/docs/justify-self'],
+    ['align-content', '/docs/align-content'],
+    ['align-items', '/docs/align-items'],
+    ['align-self', '/docs/align-self'],
+    ['place-content', '/docs/place-content'],
+    ['place-items', '/docs/place-items'],
+    ['place-self', '/docs/place-self'],
+  ] as const,
+  Spacing: [
+    ['padding', '/docs/padding'],
+    ['margin', '/docs/margin'],
+  ] as const,
+  Sizing: [
+    ['width', '/docs/width'],
+    ['min-width', '/docs/min-width'],
+    ['max-width', '/docs/max-width'],
+    ['height', '/docs/height'],
+    ['min-height', '/docs/min-height'],
+    ['max-height', '/docs/max-height'],
+    ['inline-size', '/docs/inline-size'],
+    ['min-inline-size', '/docs/min-inline-size'],
+    ['max-inline-size', '/docs/max-inline-size'],
+    ['block-size', '/docs/block-size'],
+    ['min-block-size', '/docs/min-block-size'],
+    ['max-block-size', '/docs/max-block-size'],
+  ] as const,
+  Typography: [
+    ['font-family', '/docs/font-family'],
+    ['font-size', '/docs/font-size'],
+    ['font-smoothing', '/docs/font-smoothing'],
+    ['font-style', '/docs/font-style'],
+    ['font-weight', '/docs/font-weight'],
+    ['font-stretch', '/docs/font-stretch'],
+    ['font-variant-numeric', '/docs/font-variant-numeric'],
+    ['font-feature-settings', '/docs/font-feature-settings'],
+    ['letter-spacing', '/docs/letter-spacing'],
+    ['line-clamp', '/docs/line-clamp'],
+    ['line-height', '/docs/line-height'],
+    ['list-style-image', '/docs/list-style-image'],
+    ['list-style-position', '/docs/list-style-position'],
+    ['list-style-type', '/docs/list-style-type'],
+    ['text-align', '/docs/text-align'],
+    ['color', '/docs/color'],
+    ['text-decoration-line', '/docs/text-decoration-line'],
+    ['text-decoration-color', '/docs/text-decoration-color'],
+    ['text-decoration-style', '/docs/text-decoration-style'],
+    ['text-decoration-thickness', '/docs/text-decoration-thickness'],
+    ['text-underline-offset', '/docs/text-underline-offset'],
+    ['text-transform', '/docs/text-transform'],
+    ['text-overflow', '/docs/text-overflow'],
+    ['text-wrap', '/docs/text-wrap'],
+    ['text-indent', '/docs/text-indent'],
+    ['vertical-align', '/docs/vertical-align'],
+    ['white-space', '/docs/white-space'],
+    ['word-break', '/docs/word-break'],
+    ['overflow-wrap', '/docs/overflow-wrap'],
+    ['hyphens', '/docs/hyphens'],
+    ['content', '/docs/content'],
+  ] as const,
+  Backgrounds: [
+    ['background-attachment', '/docs/background-attachment'],
+    ['background-clip', '/docs/background-clip'],
+    ['background-color', '/docs/background-color'],
+    ['background-image', '/docs/background-image'],
+    ['background-origin', '/docs/background-origin'],
+    ['background-position', '/docs/background-position'],
+    ['background-repeat', '/docs/background-repeat'],
+    ['background-size', '/docs/background-size'],
+  ] as const,
+  Borders: [
+    ['border-radius', '/docs/border-radius'],
+    ['border-width', '/docs/border-width'],
+    ['border-color', '/docs/border-color'],
+    ['border-style', '/docs/border-style'],
+    ['outline-width', '/docs/outline-width'],
+    ['outline-color', '/docs/outline-color'],
+    ['outline-style', '/docs/outline-style'],
+    ['outline-offset', '/docs/outline-offset'],
+  ] as const,
+  Effects: [
+    ['box-shadow', '/docs/box-shadow'],
+    ['text-shadow', '/docs/text-shadow'],
+    ['opacity', '/docs/opacity'],
+    ['mix-blend-mode', '/docs/mix-blend-mode'],
+    ['background-blend-mode', '/docs/background-blend-mode'],
+    ['mask-clip', '/docs/mask-clip'],
+    ['mask-composite', '/docs/mask-composite'],
+    ['mask-image', '/docs/mask-image'],
+    ['mask-mode', '/docs/mask-mode'],
+    ['mask-origin', '/docs/mask-origin'],
+    ['mask-position', '/docs/mask-position'],
+    ['mask-repeat', '/docs/mask-repeat'],
+    ['mask-size', '/docs/mask-size'],
+    ['mask-type', '/docs/mask-type'],
+  ] as const,
+  Filters: [
+    [
+      'filter',
+      '/docs/filter',
+      [
+        ['blur', '/docs/filter-blur'],
+        ['brightness', '/docs/filter-brightness'],
+        ['contrast', '/docs/filter-contrast'],
+        ['drop-shadow', '/docs/filter-drop-shadow'],
+        ['grayscale', '/docs/filter-grayscale'],
+        ['hue-rotate', '/docs/filter-hue-rotate'],
+        ['invert', '/docs/filter-invert'],
+        ['saturate', '/docs/filter-saturate'],
+        ['sepia', '/docs/filter-sepia'],
+      ] as const,
+    ] as const,
+    [
+      'backdrop-filter',
+      '/docs/backdrop-filter',
+      [
+        ['blur', '/docs/backdrop-filter-blur'],
+        ['brightness', '/docs/backdrop-filter-brightness'],
+        ['contrast', '/docs/backdrop-filter-contrast'],
+        ['grayscale', '/docs/backdrop-filter-grayscale'],
+        ['hue-rotate', '/docs/backdrop-filter-hue-rotate'],
+        ['invert', '/docs/backdrop-filter-invert'],
+        ['opacity', '/docs/backdrop-filter-opacity'],
+        ['saturate', '/docs/backdrop-filter-saturate'],
+        ['sepia', '/docs/backdrop-filter-sepia'],
+      ] as const,
+    ] as const,
+  ] as const,
+  Tables: [
+    ['border-collapse', '/docs/border-collapse'],
+    ['border-spacing', '/docs/border-spacing'],
+    ['table-layout', '/docs/table-layout'],
+    ['caption-side', '/docs/caption-side'],
+  ] as const,
+  'Transitions & Animation': [
+    ['transition-property', '/docs/transition-property'],
+    ['transition-behavior', '/docs/transition-behavior'],
+    ['transition-duration', '/docs/transition-duration'],
+    ['transition-timing-function', '/docs/transition-timing-function'],
+    ['transition-delay', '/docs/transition-delay'],
+    ['animation', '/docs/animation'],
+  ] as const,
+  Transforms: [
+    ['backface-visibility', '/docs/backface-visibility'],
+    ['perspective', '/docs/perspective'],
+    ['perspective-origin', '/docs/perspective-origin'],
+    ['rotate', '/docs/rotate'],
+    ['scale', '/docs/scale'],
+    ['skew', '/docs/skew'],
+    ['transform', '/docs/transform'],
+    ['transform-origin', '/docs/transform-origin'],
+    ['transform-style', '/docs/transform-style'],
+    ['translate', '/docs/translate'],
+  ] as const,
+  Interactivity: [
+    ['accent-color', '/docs/accent-color'],
+    ['appearance', '/docs/appearance'],
+    ['caret-color', '/docs/caret-color'],
+    ['color-scheme', '/docs/color-scheme'],
+    ['cursor', '/docs/cursor'],
+    ['field-sizing', '/docs/field-sizing'],
+    ['pointer-events', '/docs/pointer-events'],
+    ['resize', '/docs/resize'],
+    ['scroll-behavior', '/docs/scroll-behavior'],
+    ['scroll-margin', '/docs/scroll-margin'],
+    ['scroll-padding', '/docs/scroll-padding'],
+    ['scroll-snap-align', '/docs/scroll-snap-align'],
+    ['scroll-snap-stop', '/docs/scroll-snap-stop'],
+    ['scroll-snap-type', '/docs/scroll-snap-type'],
+    ['touch-action', '/docs/touch-action'],
+    ['user-select', '/docs/user-select'],
+    ['will-change', '/docs/will-change'],
+  ] as const,
+  SVG: [
+    ['fill', '/docs/fill'],
+    ['stroke', '/docs/stroke'],
+    ['stroke-width', '/docs/stroke-width'],
+  ] as const,
+  Accessibility: [['forced-color-adjust', '/docs/forced-color-adjust']] as const,
+}

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs-source.txt

@@ -0,0 +1,6 @@
+Source: https://github.com/tailwindlabs/tailwindcss.com
+Commit: 0ee7752300a521a1fe63d99e3bccdac832fd2a8a
+Commit-Date: 2026-03-25 07:57:28 +0100
+Docs-Path: src/docs
+Index-Path: src/app/(docs)/docs/index.tsx
+Snapshot-Date: 2026-04-05

package/extensions/enact-repo/skills/tailwind-4-docs/references/gotchas.md

@@ -0,0 +1,18 @@
+# Tailwind CSS v4 gotchas (quick scan)
+
+- Browser support is modern-only: Safari 16.4+, Chrome 111+, Firefox 128+.
+- PostCSS plugin moved to `@tailwindcss/postcss`.
+- CLI moved to `@tailwindcss/cli`.
+- Vite plugin `@tailwindcss/vite` is recommended.
+- Import Tailwind with `@import "tailwindcss";` (no `@tailwind` directives).
+- Prefix syntax is `@import "tailwindcss" prefix(tw);` and classes use `tw:` at the start.
+- Important modifier goes at the end: `bg-red-500!`.
+- Utility renames and removals: see `references/docs/upgrade-guide.mdx` for the full list.
+- Default border and ring color now use `currentColor`; ring width default is 1px.
+- `space-*` and `divide-*` selectors changed; use flex/grid with `gap` if layouts break.
+- Custom utilities should use `@utility` instead of `@layer utilities` or `@layer components`.
+- Stacked variants apply left-to-right (reverse order from v3).
+- Arbitrary CSS variable syntax is `bg-(--brand-color)` (not `bg-[--brand-color]`).
+- Transform reset uses `scale-none`, `rotate-none`, `translate-none` (not `transform-none`).
+- `hover:` now only applies on devices that support hover; override if needed.
+- CSS modules and component `<style>` blocks need `@reference` to access theme vars.