@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,310 @@
+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 { Stripes } from "@/components/stripes.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "columns";
+export const description = "Utilities for controlling the number of columns within an element.";
+
+<ApiTable
+  rows={[
+    ["columns-<number>", "columns: <number>;"],
+    ["columns-3xs", "columns: var(--container-3xs); /* 16rem (256px) */"],
+    ["columns-2xs", "columns: var(--container-2xs); /* 18rem (288px) */"],
+    ["columns-xs", "columns: var(--container-xs); /* 20rem (320px) */"],
+    ["columns-sm", "columns: var(--container-sm); /* 24rem (384px) */"],
+    ["columns-md", "columns: var(--container-md); /* 28rem (448px) */"],
+    ["columns-lg", "columns: var(--container-lg); /* 32rem (512px) */"],
+    ["columns-xl", "columns: var(--container-xl); /* 36rem (576px) */"],
+    ["columns-2xl", "columns: var(--container-2xl); /* 42rem (672px) */"],
+    ["columns-3xl", "columns: var(--container-3xl); /* 48rem (768px) */"],
+    ["columns-4xl", "columns: var(--container-4xl); /* 56rem (896px) */"],
+    ["columns-5xl", "columns: var(--container-5xl); /* 64rem (1024px) */"],
+    ["columns-6xl", "columns: var(--container-6xl); /* 72rem (1152px) */"],
+    ["columns-7xl", "columns: var(--container-7xl); /* 80rem (1280px) */"],
+    ["columns-auto", "columns: auto;"],
+    ["columns-(<custom-property>)", "columns: var(<custom-property>);"],
+    ["columns-[<value>]", "columns: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Setting by number
+
+Use `columns-<number>` utilities like `columns-3` to set the number of columns that should be created for the content within an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="@container relative">
+      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-3 gap-[5cqw]">
+        <Stripes border="x" />
+        <Stripes border="x" />
+        <Stripes border="x" />
+      </div>
+      <div className="relative -mb-[5cqw] columns-3 gap-[5cqw] *:mb-[5cqw]">
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:columns-3] -->
+<div class="columns-3 ...">
+  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+The column width will automatically adjust to accommodate the specified number of columns.
+
+### Setting by width
+
+Use utilities like `columns-xs` and `columns-sm` to set the ideal column width for the content within an element:
+
+<Figure desktopHint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="@container relative">
+      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-1 gap-8 @[34rem]:grid-cols-2">
+        <Stripes border="x" />
+        <Stripes border="x" />
+        <Stripes border="x" className="@[34rem]:hidden" />
+      </div>
+      <div className="relative -mb-4 columns-3xs gap-4 *:mb-4 @sm:-mb-8 @sm:gap-8 @sm:*:mb-8">
+        <img
+          className="aspect-3/2 w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
+        />
+        <img
+          className="aspect-square w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
+        />
+        <img
+          className="aspect-square w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
+        />
+        <img
+          className="aspect-3/2 w-full rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
+        />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:columns-3xs] -->
+<div class="columns-3xs ...">
+  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+When setting the column width, the number of columns automatically adjusts to ensure they don't get too narrow.
+
+### Setting the column gap
+
+Use the `gap-<width>` utilities to specify the width between columns:
+
+<Figure>
+
+<Example>
+  {
+    <div className="@container relative">
+      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-[1fr_2rem_1fr_2rem_1fr]">
+        <div />
+        <Stripes border="x" />
+        <div />
+        <Stripes border="x" />
+        <div />
+      </div>
+      <div className="relative -mb-8 columns-3 gap-8 *:mb-8">
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:gap-8] -->
+<div class="columns-3 gap-8 ...">
+  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Learn more about the gap utilities in the [gap documentation](/docs/gap).
+
+### Using a custom value
+
+<UsingACustomValue utility="columns" value="30vw" />
+
+### Responsive design
+
+<ResponsiveDesign property="columns" breakpoint="sm" featuredClass="aspect-square">
+
+<Figure desktopHint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="@container relative">
+      <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-2 gap-4 @sm:grid-cols-3 @sm:gap-8">
+        <Stripes border="x" />
+        <Stripes border="x" />
+        <Stripes border="x" className="@max-sm:hidden" />
+      </div>
+      <div className="relative columns-2 gap-4 *:mb-4 @sm:-mb-8 @sm:columns-3 @sm:gap-8 @sm:*:mb-8">
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2952&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2902&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3131&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1611605645802-c21be743c321?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1498603993951-8a027a8a8f84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2936&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+        <img
+          className="aspect-square rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
+        />
+        <img
+          className="aspect-3/2 rounded-lg bg-black/5 object-cover outline -outline-offset-1 outline-black/10 dark:outline-0"
+          src="https://images.unsplash.com/photo-1518892096458-a169843d7f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+        />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:sm:gap-8,sm:columns-3] -->
+<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
+  <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-2.jpg" />
+  <img class="aspect-square ..." src="/img/mountains-3.jpg" />
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+</ResponsiveDesign>
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  utility="columns"
+  themeKey="container"
+  name="fixed-width column"
+  customName="4xs"
+  customValue="14rem"
+/>

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

@@ -0,0 +1,193 @@
+import { TipGood, TipBad, TipCompat, TipInfo } from "@/components/tips";
+
+export const title = "Compatibility";
+export const description = "Learn about browser support and compatibility with other tooling.";
+
+## Browser support
+
+Tailwind CSS v4.0 is designed for and tested on modern browsers, and the core functionality of the framework specifically depends on these browser versions:
+
+- **Chrome 111** _(released March 2023)_
+- **Safari 16.4** _(released March 2023)_
+- **Firefox 128** _(released July 2024)_
+
+Tailwind also includes support for many bleeding-edge platform features like `field-sizing: content`, `@starting-style`, and `text-wrap: balance` that have limited browser support. It's up to you if you want to use these modern features in your projects — if the browsers you're targeting don't support them, simply don't use those utilities and variants.
+
+If you're unsure about the support for a modern platform feature, the [Can I use](https://caniuse.com/mdn-css_at-rules_starting-style) database is a great resource.
+
+## Sass, Less, and Stylus
+
+Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.
+
+**Think of Tailwind CSS itself as your preprocessor** — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.
+
+Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.
+
+### Build-time imports
+
+Tailwind will automatically bundle other CSS files you include with `@import`, without the need for a separate preprocessing tool.
+
+```css
+/* [!code filename:app.css] */
+@import "tailwindcss";
+@import "./typography.css";
+```
+
+In this example, the `typography.css` file will be bundled into your compiled CSS for you by Tailwind, without any other tooling like Sass or `postcss-import`.
+
+### Variables
+
+All modern browsers support [native CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) without the need for any sort of preprocessor:
+
+```css
+/* [!code filename:typography.css] */
+/* [!code word:var(--text-base)] */
+.typography {
+  font-size: var(--text-base);
+  color: var(--color-gray-700);
+}
+```
+
+Tailwind relies on CSS variables heavily internally, so if you can use Tailwind in your project, you can use native CSS variables.
+
+### Nesting
+
+Under the hood Tailwind uses [Lightning CSS](https://lightningcss.dev/) to process nested CSS like this:
+
+```css
+/* [!code filename:typography.css] */
+.typography {
+  p {
+    font-size: var(--text-base);
+  }
+  img {
+    border-radius: var(--radius-lg);
+  }
+}
+```
+
+Tailwind flattens that nested CSS for you so it can be understood by all modern browsers:
+
+```css
+[!code filename:output.css]
+/* prettier-ignore */
+.typography p {
+  font-size: var(--text-base);
+}
+
+.typography img {
+  border-radius: var(--radius-lg);
+}
+```
+
+Native CSS nesting support is also very good these days, so you don't really need a preprocessor for nesting even if you aren't using Tailwind.
+
+### Loops
+
+In Tailwind, the sorts of classes you may have used loops for in the past (like `col-span-1`, `col-span-2`, etc.) are generated for you on-demand by Tailwind whenever you use them instead of having to be predefined.
+
+On top of that, when you're building things with Tailwind CSS, you do the vast majority of your styling in your HTML, not in CSS files. Since you're not writing tons of CSS in the first place, you just don't need features like loops that are designed for programmatically generating lots of custom CSS rules.
+
+### Color and math functions
+
+When using preprocessors like Sass or Less, you may have used functions like `darken` or `lighten` to adjust colors.
+
+When using Tailwind, the recommended workflow is to use a predefined color palette that includes light and dark shades of each color, like the expertly designed [default color palette](/docs/colors) included with the framework.
+
+```html
+<!-- [!code word:hover\:bg-indigo-600] -->
+<button class="bg-indigo-500 hover:bg-indigo-600 ...">
+  <!-- ... -->
+</button>
+```
+
+You can also use modern CSS features like [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) to adjust colors at run-time directly in the browser. This even lets you adjust colors defined using CSS variables or the `currentcolor` keyword, which isn't possible with preprocessors.
+
+Similarly, browsers support math functions like `min()`, `max()`, and `round()` natively now, so there's no need to rely on a preprocessor for these features anymore either.
+
+## CSS modules
+
+Tailwind is compatible with CSS modules and can co-exist with them if you are introducing Tailwind into a project that already uses them, but **we don't recommend using CSS modules and Tailwind together** if you can avoid it.
+
+### Scoping concerns
+
+CSS modules are designed to solve scoping problems that just don't exist when composing utility classes in your HTML instead of writing custom CSS.
+
+Styles are naturally scoped with Tailwind because each utility class always does the same thing, no matter where it's used — there's no risk that adding a utility class to one part of your UI creates some unexpected side effect somewhere else.
+
+### Performance
+
+When using CSS modules, build tools like Vite, Parcel, and Turbopack process each CSS module separately. That means if you have 50 CSS modules in a project, **Tailwind needs to run 50 separate times**, which leads to much slower build times and a worse developer experience.
+
+### Explicit context sharing
+
+Since CSS modules are each processed separately, they have no `@theme` unless you import one.
+
+This means features like `@apply` won't work the way you expect unless you explicitly import your global styles as reference:
+
+<TipInfo>{<>Import your global styles as reference to make sure your theme variables are defined</>}</TipInfo>
+
+```css
+/* [!code filename:Button.module.css] */
+/* [!code highlight:2] */
+@reference "../app.css";
+
+button {
+  @apply bg-blue-500;
+}
+```
+
+Alternatively, you can also just use CSS variables instead of `@apply` which has the added benefit of letting Tailwind skip processing those files and will improve your build performance:
+
+```css
+/* [!code filename:Button.module.css] */
+button {
+  /* [!code highlight:2] */
+  background: var(--color-blue-500);
+}
+```
+
+## Vue, Svelte, and Astro
+
+Vue, Svelte, and Astro support `<style>` blocks in component files that behave very much like [CSS modules](#css-modules), which means they are each processed by your build tooling totally separately and have all of the same drawbacks.
+
+If you're using Tailwind with these tools, **we recommend avoiding `<style>` blocks in your components** and just styling things with utility classes directly in your markup, the way Tailwind is meant to be used.
+
+If you do use `<style>` blocks, make sure to import your global styles as reference if you want features like `@apply` to work as expected:
+
+<TipInfo
+  children={`Import your global styles as reference to make sure your theme variables are
+    defined`}
+/>
+
+```html
+<!-- [!code filename:Button.vue] -->
+<template>
+  <button><slot /></button>
+</template>
+
+<style scoped>
+  /* [!code highlight:2] */
+  @reference "../app.css";
+
+  button {
+    @apply bg-blue-500;
+  }
+</style>
+```
+
+Or just use your globally defined CSS variables instead of features like `@apply`, which don't require Tailwind to process your component CSS at all:
+
+```html
+<!-- [!code filename:Button.vue] -->
+<template>
+  <button><slot /></button>
+</template>
+
+<style scoped>
+  button {
+    /* [!code highlight:2] */
+    background-color: var(--color-blue-500);
+  }
+</style>
+```

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

@@ -0,0 +1,129 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "content";
+export const description = "Utilities for controlling the content of the before and after pseudo-elements.";
+
+<ApiTable
+  rows={[
+    ["content-[<value>]", "content: <value>;"],
+    ["content-(<custom-property>)", "content: var(<custom-property>);"],
+    ["content-none", "content: none;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `content-[<value>]` syntax, along with the `before` and `after` variants, to set the contents of the `::before` and `::after` pseudo-elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto w-full max-w-md text-gray-500 dark:text-gray-400">
+      Higher resolution means more than just a better-quality image. With a Retina 6K display,{" "}
+      <a
+        href="https://www.apple.com/pro-display-xdr/"
+        className="font-medium text-blue-600 after:text-sm after:font-bold after:content-['_↗'] dark:text-sky-400"
+        target="_blank"
+      >
+        Pro Display XDR
+      </a>{" "}
+      gives you nearly 40 percent more screen real estate than a 5K display.
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:after:content-['_↗']] -->
+<!-- prettier-ignore -->
+<p>Higher resolution means more than just a better-quality image. With a
+Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
+Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
+a 5K display.</p>
+```
+
+</Figure>
+
+### Referencing an attribute value
+
+Use the `content-[attr(<name>)]` syntax to reference a value stored in an attribute using the `attr()` CSS function:
+
+<Figure>
+
+<Example>
+  {
+    <p
+      before="Hello World"
+      className="text-center font-semibold text-gray-900 before:content-[attr(before)] dark:text-gray-200"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:before:content-[attr(before)]] -->
+<p before="Hello World" class="before:content-[attr(before)] ...">
+  <!-- ... -->
+</p>
+```
+
+</Figure>
+
+### Using spaces and underscores
+
+Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:
+
+<Figure>
+
+<Example>
+  {<p className="text-center font-semibold text-gray-900 before:content-['Hello_World'] dark:text-gray-200" />}
+</Example>
+
+```html
+<!-- [!code classes:before:content-['Hello_World']] -->
+<p class="before:content-['Hello_World'] ..."></p>
+```
+
+</Figure>
+
+If you need to include an actual underscore, you can do this by escaping it with a backslash:
+
+<Figure>
+
+<Example>
+  {<p className="text-center font-semibold text-gray-900 before:content-['Hello\_World'] dark:text-gray-200" />}
+</Example>
+
+```html
+<!-- [!code classes:before:content-['Hello\_World']] -->
+<p class="before:content-['Hello\_World']"></p>
+```
+
+</Figure>
+
+### Using a CSS variable
+
+Use the <code>content-{'(<custom-property>)'}</code> syntax to control the contents of the `::before` and `::after` pseudo-elements using a CSS variable:
+
+```html
+<!-- [!code classes:content-(--my-content)] -->
+<p class="content-(--my-content)"></p>
+```
+
+This is just a shorthand for <code>content-{'[var(<custom-property>)]'}</code> that adds the `var()` function for you automatically.
+
+### Responsive design
+
+<ResponsiveDesign property="content">
+
+```html
+<!-- [!code classes:md:before:content-['Desktop']] -->
+<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>
+```
+
+</ResponsiveDesign>