@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

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

@@ -0,0 +1,100 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+
+export const title = "fill";
+export const description = "Utilities for styling the fill of SVG elements.";
+
+<ApiTable
+  rows={[
+    ["fill-none", "fill: none;"],
+    ["fill-inherit", "fill: inherit;"],
+    ["fill-current", "fill: currentColor;"],
+    ["fill-transparent", "fill: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [`fill-${name}`, `fill: var(--color-${name}); /* ${value} */`]),
+    ["fill-(<custom-property>)", "fill: var(<custom-property>);"],
+    ["fill-[<color>]", "fill: <color>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `fill-indigo-500` and `fill-lime-600` to change the fill color of an SVG:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-center justify-center">
+      <svg className="h-12 fill-blue-500" viewBox="0 0 46 48">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 19V32.5335C4.00017 32.8383 3.9145 33.1371 3.75292 33.3956L0.912672 37.94C0.0801118 39.2721 1.0378 41 2.60867 41H43.3917C44.9625 41 45.9202 39.2721 45.0877 37.94L42.2474 33.3956C42.0858 33.1371 42.0002 32.8383 42.0002 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 0ZM23.0002 48C20.2388 48 18.0002 45.7614 18.0002 43H28.0002C28.0002 45.7614 25.7616 48 23.0002 48Z"
+        />
+      </svg>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:fill-blue-500] -->
+<svg class="fill-blue-500 ...">
+  <!-- ... -->
+</svg>
+```
+
+</Figure>
+
+This can be useful for styling icon sets like [Heroicons](https://heroicons.com).
+
+### Using the current color
+
+Use the `fill-current` utility to set the fill color to the current text color:
+
+<Figure hint="Hover over the button to see the fill color change">
+
+<Example>
+  {
+    <div className="flex items-center justify-center">
+      <button className="inline-flex gap-2 rounded-md border border-indigo-100 bg-white px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm transition-colors duration-150 hover:border-indigo-600 hover:bg-indigo-600 hover:text-white dark:border-transparent">
+        <svg viewBox="0 0 20 20" className="size-5 fill-current">
+          <path
+            d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          />
+        </svg>
+        Check for updates
+      </button>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:fill-current] -->
+<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...">
+  <svg class="size-5 fill-current ...">
+    <!-- ... -->
+  </svg>
+  Check for updates
+</button>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="svg" utility="fill" name="fill color" value="#243c5a" variable="fill-color" />
+
+### Responsive design
+
+<ResponsiveDesign element="svg" property="fill" defaultClass="fill-cyan-500" featuredClass="fill-cyan-700" />
+
+## Customizing your theme
+
+<CustomizingYourThemeColors element="svg" utility="fill" />

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

@@ -0,0 +1,114 @@
+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";
+
+export const title = "filter: blur()";
+export const description = "Utilities for applying blur filters to an element.";
+
+<ApiTable
+  rows={[
+    ["blur-xs", "filter: blur(var(--blur-xs)); /* 4px */"],
+    ["blur-sm", "filter: blur(var(--blur-sm)); /* 8px */"],
+    ["blur-md", "filter: blur(var(--blur-md)); /* 12px */"],
+    ["blur-lg", "filter: blur(var(--blur-lg)); /* 16px */"],
+    ["blur-xl", "filter: blur(var(--blur-xl)); /* 24px */"],
+    ["blur-2xl", "filter: blur(var(--blur-2xl)); /* 40px */"],
+    ["blur-3xl", "filter: blur(var(--blur-3xl)); /* 64px */"],
+    ["blur-none", "filter: ;"],
+    ["blur-(<custom-property>)", "filter: blur(var(<custom-property>));"],
+    ["blur-[<value>]", "filter: blur(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `blur-sm` and `blur-lg` to blur an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-none</p>
+          <div className="relative blur-none">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-sm</p>
+          <div className="relative blur-sm">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-lg</p>
+          <div className="relative blur-lg">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">blur-2xl</p>
+          <div className="relative blur-2xl">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:blur-none,blur-sm,blur-lg,blur-2xl] -->
+<img class="blur-none" src="/img/mountains.jpg" />
+<img class="blur-sm" src="/img/mountains.jpg" />
+<img class="blur-lg" src="/img/mountains.jpg" />
+<img class="blur-2xl" src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="blur" value="2px" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="filter: blur()"
+  defaultClass="blur-none"
+  featuredClass="blur-lg"
+/>
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  utility="blur"
+  name="blur"
+  customName="2xs"
+  customValue="2px"
+/>

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

@@ -0,0 +1,102 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "filter: brightness()";
+export const description = "Utilities for applying brightness filters to an element.";
+
+<ApiTable
+  rows={[
+    ["brightness-<number>", "filter: brightness(<number>%);"],
+    ["brightness-(<custom-property>)", "filter: brightness(var(<custom-property>));"],
+    ["brightness-[<value>]", "filter: brightness(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `brightness-50` and `brightness-100` to control an element's brightness:
+
+<Figure>
+  {
+    <Example padding={false}>
+      <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+        <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+          <div className="flex shrink-0 flex-col items-center">
+            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+              brightness-50
+            </p>
+            <div className="relative brightness-50">
+              <img
+                className="size-24 rounded-lg object-cover"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-col items-center">
+            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+              brightness-100
+            </p>
+            <div className="relative brightness-100">
+              <img
+                className="size-24 rounded-lg object-cover"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-col items-center">
+            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+              brightness-125
+            </p>
+            <div className="relative brightness-125">
+              <img
+                className="size-24 rounded-lg object-cover"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-col items-center">
+            <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+              brightness-200
+            </p>
+            <div className="relative brightness-200">
+              <img
+                className="size-24 rounded-lg object-cover"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Example>
+  }
+</Figure>
+
+```html
+<!-- [!code classes:brightness-50,brightness-100,brightness-125,brightness-200] -->
+<img class="brightness-50 ..." src="/img/mountains.jpg" />
+<img class="brightness-100 ..." src="/img/mountains.jpg" />
+<img class="brightness-125 ..." src="/img/mountains.jpg" />
+<img class="brightness-200 ..." src="/img/mountains.jpg" />
+```
+
+### Using a custom value
+
+<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="brightness" value="1.75" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="filter: brightness()"
+  defaultClass="brightness-110"
+  featuredClass="brightness-150"
+/>

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

@@ -0,0 +1,102 @@
+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 = "filter: contrast()";
+export const description = "Utilities for applying contrast filters to an element.";
+
+<ApiTable
+  rows={[
+    ["contrast-<number>", "filter: contrast(<number>%);"],
+    ["contrast-(<custom-property>)", "filter: contrast(var(<custom-property>));"],
+    ["contrast-[<value>]", "filter: contrast(<value>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `contrast-50` and `contrast-100` to control an element's contrast:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="flex scroll-p-8 justify-start overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-6 p-8 font-mono font-bold sm:gap-4">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">contrast-50</p>
+          <div className="relative contrast-50">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            contrast-100
+          </p>
+          <div className="relative contrast-100">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            contrast-125
+          </p>
+          <div className="relative contrast-125">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            contrast-200
+          </p>
+          <div className="relative contrast-200">
+            <img
+              className="size-24 rounded-lg object-cover"
+              src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+            />
+            <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:contrast-50,contrast-100,contrast-125,contrast-200] -->
+<img class="contrast-50 ..." src="/img/mountains.jpg" />
+<img class="contrast-100 ..." src="/img/mountains.jpg" />
+<img class="contrast-125 ..." src="/img/mountains.jpg" />
+<img class="contrast-200 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="contrast" value=".25" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="filter: contrast()"
+  defaultClass="contrast-125"
+  featuredClass="contrast-150"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/filter-drop-shadow.mdx

@@ -0,0 +1,230 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourTheme,
+  ResponsiveDesign,
+  UsingACustomValue,
+  CustomizingYourThemeColors,
+} from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+
+export const title = "filter: drop-shadow()";
+export const description = "Utilities for applying drop-shadow filters to an element.";
+
+<ApiTable
+  rows={[
+    ["drop-shadow-xs", "filter: drop-shadow(var(--drop-shadow-xs)); /* 0 1px 1px rgb(0 0 0 / 0.05) */"],
+    ["drop-shadow-sm", "filter: drop-shadow(var(--drop-shadow-sm)); /* 0 1px 2px rgb(0 0 0 / 0.15) */"],
+    ["drop-shadow-md", "filter: drop-shadow(var(--drop-shadow-md)); /* 0 3px 3px rgb(0 0 0 / 0.12) */"],
+    ["drop-shadow-lg", "filter: drop-shadow(var(--drop-shadow-lg)); /* 0 4px 4px rgb(0 0 0 / 0.15) */"],
+    ["drop-shadow-xl", "filter: drop-shadow(var(--drop-shadow-xl); /* 0 9px 7px rgb(0 0 0 / 0.1) */"],
+    ["drop-shadow-2xl", "filter: drop-shadow(var(--drop-shadow-2xl)); /* 0 25px 25px rgb(0 0 0 / 0.15) */"],
+    ["drop-shadow-none", "filter: drop-shadow(0 0 #0000);"],
+    ["drop-shadow-(<custom-property>)", "filter: drop-shadow(var(<custom-property>));"],
+    ["drop-shadow-(color:<custom-property>)", "--tw-drop-shadow-color: var(<custom-property>);"],
+    ["drop-shadow-[<value>]", "filter: drop-shadow(<value>);"],
+    ["drop-shadow-inherit", "--tw-drop-shadow-color: inherit;"],
+    ["drop-shadow-current", "--tw-drop-shadow-color: currentColor;"],
+    ["drop-shadow-transparent", "--tw-drop-shadow-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `drop-shadow-${name}`,
+      `--tw-drop-shadow-color: var(--color-${name}); /* ${value} */`,
+    ]),
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `drop-shadow-sm` and `drop-shadow-xl` to add a drop shadow to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-md</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-md" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-lg</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-lg" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:drop-shadow-md,drop-shadow-lg,drop-shadow-xl] -->
+<svg class="drop-shadow-md ...">
+  <!-- ... -->
+</svg>
+<svg class="drop-shadow-lg ...">
+  <!-- ... -->
+</svg>
+<svg class="drop-shadow-xl ...">
+  <!-- ... -->
+</svg>
+```
+
+</Figure>
+
+This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use [box shadow](/docs/box-shadow) instead.
+
+### Changing the opacity
+
+Use the opacity modifier to adjust the opacity of the drop shadow:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/25</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl/25" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-xl/50</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl/50" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-white"
+          />
+        </svg>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:drop-shadow-xl,drop-shadow-xl/25,drop-shadow-xl/50] -->
+<svg class="fill-white drop-shadow-xl ...">...</svg>
+<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
+<svg class="fill-white drop-shadow-xl/50 ...">...</svg>
+```
+
+</Figure>
+
+The default drop shadow opacities are quite low (15% or less), so increasing the opacity (to like 50%) will make the drop shadows more pronounced.
+
+### Setting the shadow color
+
+Use utilities like `drop-shadow-indigo-500` and `drop-shadow-cyan-500/50` to change the color of a drop shadow:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 items-end p-8 max-sm:grid-cols-1">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-cyan-500/50</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-cyan-500/50" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-cyan-500"
+          />
+        </svg>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500">drop-shadow-indigo-500/50</p>
+        <svg className="size-28 text-gray-950/100 drop-shadow-xl drop-shadow-indigo-500/50" viewBox="0 0 84 84">
+          <path
+            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
+            className="fill-indigo-500"
+          />
+        </svg>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:drop-shadow-cyan-500/50,drop-shadow-indigo-500/50] -->
+<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
+<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>
+```
+
+</Figure>
+
+By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.
+
+### Removing a drop shadow
+
+Use the `drop-shadow-none` utility to remove an existing drop shadow from an element:
+
+<Figure>
+
+```html
+<!-- [!code classes:dark:drop-shadow-none] -->
+<svg class="drop-shadow-lg dark:drop-shadow-none">
+  <!-- ... -->
+</svg>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="svg" utility="drop-shadow" value="0_35px_35px_rgba(0,0,0,0.25)" name="drop shadow" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="svg"
+  property="filter: drop-shadow()"
+  defaultClass="drop-shadow-md"
+  featuredClass="drop-shadow-xl"
+/>
+
+## Customizing your theme
+
+### Customizing drop shadows
+
+<CustomizingYourTheme
+  element="svg"
+  utility="drop-shadow"
+  name="drop shadow"
+  customName="3xl"
+  customValue="0 35px 35px rgba(0, 0, 0, 0.25)"
+/>
+
+### Customizing shadow colors
+
+<CustomizingYourThemeColors element="svg" utility="drop-shadow" />