From 0bff04579061d1cecd35d3c63605167f4a300c3a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Mar 2025 10:47:26 -0400
Subject: [PATCH 01/29] Record `mask-*` in the global property list

---
 packages/tailwindcss/src/property-order.ts | 62 ++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index f2ed4bc51721..f024f69771a0 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -234,6 +234,59 @@ export default [
   '--tw-gradient-to',
   '--tw-gradient-to-position',
 
+  'mask-image',
+
+  // Edge masks
+  '--tw-mask-top',
+  '--tw-mask-top-from-color',
+  '--tw-mask-top-from-position',
+  '--tw-mask-top-to-color',
+  '--tw-mask-top-to-position',
+
+  '--tw-mask-right',
+  '--tw-mask-right-from-color',
+  '--tw-mask-right-from-position',
+  '--tw-mask-right-to-color',
+  '--tw-mask-right-to-position',
+
+  '--tw-mask-bottom',
+  '--tw-mask-bottom-from-color',
+  '--tw-mask-bottom-from-position',
+  '--tw-mask-bottom-to-color',
+  '--tw-mask-bottom-to-position',
+
+  '--tw-mask-left',
+  '--tw-mask-left-from-color',
+  '--tw-mask-left-from-position',
+  '--tw-mask-left-to-color',
+  '--tw-mask-left-to-position',
+
+  // Linear masks
+  '--tw-mask-linear',
+  '--tw-mask-linear-position',
+  '--tw-mask-linear-from-color',
+  '--tw-mask-linear-from-position',
+  '--tw-mask-linear-to-color',
+  '--tw-mask-linear-to-position',
+
+  // Radial masks
+  '--tw-mask-radial',
+  '--tw-mask-radial-shape',
+  '--tw-mask-radial-size',
+  '--tw-mask-radial-position',
+  '--tw-mask-radial-from-color',
+  '--tw-mask-radial-from-position',
+  '--tw-mask-radial-to-color',
+  '--tw-mask-radial-to-position',
+
+  // Conic masks
+  '--tw-mask-conic',
+  '--tw-mask-conic-position',
+  '--tw-mask-conic-from-color',
+  '--tw-mask-conic-from-position',
+  '--tw-mask-conic-to-color',
+  '--tw-mask-conic-to-position',
+
   'box-decoration-break',
 
   'background-size',
@@ -243,6 +296,15 @@ export default [
   'background-repeat',
   'background-origin',
 
+  'mask-composite',
+  'mask-mode',
+  'mask-type',
+  'mask-size',
+  'mask-clip',
+  'mask-position',
+  'mask-repeat',
+  'mask-origin',
+
   'fill',
   'stroke',
   'stroke-width',

From 7c96737a7aa79924fdb1cc96e8a909a622e9f0b1 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 21 Mar 2025 16:29:48 -0400
Subject: [PATCH 02/29] =?UTF-8?q?Pass=20arbitrary=20value=20data=20type=20?=
 =?UTF-8?q?to=20`handle(=E2=80=A6)`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/tailwindcss/src/utilities.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 025179a1297a..5b52a8cd7b21 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -375,7 +375,7 @@ export function createUtilities(theme: Theme) {
     defaultValue?: string | null
     handleBareValue?: (value: NamedUtilityValue) => string | null
     handleNegativeBareValue?: (value: NamedUtilityValue) => string | null
-    handle: (value: string) => AstNode[] | undefined
+    handle: (value: string, dataType: string | null) => AstNode[] | undefined
   }
 
   /**
@@ -386,6 +386,7 @@ export function createUtilities(theme: Theme) {
     function handleFunctionalUtility({ negative }: { negative: boolean }) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
         let value: string | null = null
+        let dataType: string | null = null
 
         if (!candidate.value) {
           if (candidate.modifier) return
@@ -401,6 +402,7 @@ export function createUtilities(theme: Theme) {
         } else if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return
           value = candidate.value.value
+          dataType = candidate.value.dataType
         } else {
           value = theme.resolve(
             candidate.value.fraction ?? candidate.value.value,
@@ -420,7 +422,7 @@ export function createUtilities(theme: Theme) {
           if (value === null && negative && desc.handleNegativeBareValue) {
             value = desc.handleNegativeBareValue(candidate.value)
             if (!value?.includes('/') && candidate.modifier) return
-            if (value !== null) return desc.handle(value)
+            if (value !== null) return desc.handle(value, null)
           }
 
           if (value === null && desc.handleBareValue) {
@@ -433,7 +435,7 @@ export function createUtilities(theme: Theme) {
         if (value === null) return
 
         // Negate the value if the candidate has a negative prefix.
-        return desc.handle(negative ? `calc(${value} * -1)` : value)
+        return desc.handle(negative ? `calc(${value} * -1)` : value, dataType)
       }
     }
 

From dac5cdfdba2d78cbdea383802a17c7fc95a773cd Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 24 Mar 2025 13:05:24 -0400
Subject: [PATCH 03/29] Add utilities for `mask-image`

---
 .../__snapshots__/intellisense.test.ts.snap   |  1 +
 packages/tailwindcss/src/feature-flags.ts     |  1 +
 packages/tailwindcss/src/utilities.test.ts    | 63 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 27 ++++++++
 4 files changed, 92 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index b988ed28c0b6..901723e33a5a 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5104,6 +5104,7 @@ exports[`getClassList 1`] = `
   "m-96",
   "m-auto",
   "m-px",
+  "mask-none",
   "max-h-0",
   "max-h-0.5",
   "max-h-1",
diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts
index f5c00bf656a9..d38f5b6b62ae 100644
--- a/packages/tailwindcss/src/feature-flags.ts
+++ b/packages/tailwindcss/src/feature-flags.ts
@@ -9,3 +9,4 @@ export const enableSourceNot = process.env.FEATURES_ENV !== 'stable'
 export const enableTextShadows = process.env.FEATURES_ENV !== 'stable'
 export const enableUserValid = process.env.FEATURES_ENV !== 'stable'
 export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable'
+export const enableMaskUtilities = process.env.FEATURES_ENV !== 'stable'
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1386dba4253a..1ae18b3fe023 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11564,6 +11564,69 @@ test('to', async () => {
   ).toEqual('')
 })
 
+test('mask', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      [
+        // mask-image
+        'mask-none',
+        'mask-[var(--some-var)]',
+        'mask-[image:var(--some-var)]',
+        'mask-[url:var(--some-var)]',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-\\[image\\:var\\(--some-var\\)\\], .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-image: var(--some-var);
+      -webkit-mask-image: var(--some-var);
+      mask-image: var(--some-var);
+    }
+
+    .mask-none {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }"
+  `)
+  expect(
+    await run([
+      'mask',
+      'mask-unknown',
+
+      // mask-image
+      '-mask-none',
+      'mask-none/foo',
+      '-mask-[var(--some-var)]',
+      'mask-[var(--some-var)]/foo',
+      '-mask-[image:var(--some-var)]',
+      'mask-[image:var(--some-var)]/foo',
+      '-mask-[url:var(--some-var)]',
+      'mask-[url:var(--some-var)]/foo',
+    ]),
+  ).toEqual('')
+
+  expect(
+    await compileCss(
+      css`
+        @theme reference {
+          --opacity-half: 0.5;
+          --opacity-custom: var(--custom-opacity);
+        }
+        @tailwind utilities;
+      `,
+      ['mask-current/half', 'mask-current/custom', '[color:red]/half'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".\\[color\\:red\\]\\/half {
+      color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+    }"
+  `)
+})
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 5b52a8cd7b21..09dee8d45b0c 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -13,6 +13,7 @@ import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidat
 import type { DesignSystem } from './design-system'
 import {
   enableBaselineLast,
+  enableMaskUtilities,
   enableSafeAlignment,
   enableTextShadows,
   enableWrapAnywhere,
@@ -2821,6 +2822,32 @@ export function createUtilities(theme: Theme) {
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-to-position', value)],
   })
 
+  if (enableMaskUtilities) {
+    /**
+     * @css `mask-image`
+     */
+
+    staticUtility('mask-none', [['mask-image', 'none']])
+
+    utilities.functional('mask', (candidate) => {
+      if (!candidate.value) return
+      if (candidate.modifier) return
+      if (candidate.value.kind !== 'arbitrary') return
+
+      // Arbitrary values
+      let value: string | null = candidate.value.value
+      let type = candidate.value.dataType ?? inferDataType(value, ['image', 'url'])
+
+      switch (type) {
+        case 'image':
+        case 'url':
+        default: {
+          return [decl('mask-image', value)]
+        }
+      }
+    })
+  }
+
   /**
    * @css `box-decoration-break`
    */

From 8238ac124eca0232377dcfe118e4dd0ab5fcc9b3 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 21 Mar 2025 16:54:28 -0400
Subject: [PATCH 04/29] Add utilities for `mask-composite`

---
 .../__snapshots__/intellisense.test.ts.snap   |  4 ++
 packages/tailwindcss/src/utilities.test.ts    | 40 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         |  9 +++++
 3 files changed, 53 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 901723e33a5a..e330f1c0b803 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5104,7 +5104,11 @@ exports[`getClassList 1`] = `
   "m-96",
   "m-auto",
   "m-px",
+  "mask-add",
+  "mask-exclude",
+  "mask-intersect",
   "mask-none",
+  "mask-subtract",
   "max-h-0",
   "max-h-0.5",
   "max-h-1",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1ae18b3fe023..0a1160fffba7 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11579,6 +11579,12 @@ test('mask', async () => {
         'mask-[var(--some-var)]',
         'mask-[image:var(--some-var)]',
         'mask-[url:var(--some-var)]',
+
+        // mask-composite
+        'mask-add',
+        'mask-subtract',
+        'mask-intersect',
+        'mask-exclude',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11591,6 +11597,30 @@ test('mask', async () => {
     .mask-none {
       -webkit-mask-image: none;
       mask-image: none;
+    }
+
+    .mask-add {
+      -webkit-mask-composite: source-over;
+      -webkit-mask-composite: source-over;
+      mask-composite: add;
+    }
+
+    .mask-exclude {
+      -webkit-mask-composite: xor;
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+
+    .mask-intersect {
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-subtract {
+      -webkit-mask-composite: source-out;
+      -webkit-mask-composite: source-out;
+      mask-composite: subtract;
     }"
   `)
   expect(
@@ -11607,6 +11637,16 @@ test('mask', async () => {
       'mask-[image:var(--some-var)]/foo',
       '-mask-[url:var(--some-var)]',
       'mask-[url:var(--some-var)]/foo',
+
+      // mask-composite
+      '-mask-add',
+      '-mask-subtract',
+      '-mask-intersect',
+      '-mask-exclude',
+      'mask-add/foo',
+      'mask-subtract/foo',
+      'mask-intersect/foo',
+      'mask-exclude/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 09dee8d45b0c..b52ee37b632e 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2846,6 +2846,15 @@ export function createUtilities(theme: Theme) {
         }
       }
     })
+
+    /**
+     * @css `mask-composite`
+     */
+
+    staticUtility('mask-add', [['mask-composite', 'add']])
+    staticUtility('mask-subtract', [['mask-composite', 'subtract']])
+    staticUtility('mask-intersect', [['mask-composite', 'intersect']])
+    staticUtility('mask-exclude', [['mask-composite', 'exclude']])
   }
 
   /**

From ccc9972e4208e4f6597d279d8c596c583d1afb67 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 21 Mar 2025 15:56:09 -0400
Subject: [PATCH 05/29] Add utilities for `mask-mode`

---
 .../__snapshots__/intellisense.test.ts.snap   |  3 ++
 packages/tailwindcss/src/utilities.test.ts    | 31 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 10 ++++++
 3 files changed, 44 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index e330f1c0b803..4406b2b41c65 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5105,8 +5105,11 @@ exports[`getClassList 1`] = `
   "m-auto",
   "m-px",
   "mask-add",
+  "mask-alpha",
   "mask-exclude",
   "mask-intersect",
+  "mask-luminance",
+  "mask-match",
   "mask-none",
   "mask-subtract",
   "max-h-0",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 0a1160fffba7..b8ff50337363 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11585,6 +11585,11 @@ test('mask', async () => {
         'mask-subtract',
         'mask-intersect',
         'mask-exclude',
+
+        // mask-mode
+        'mask-alpha',
+        'mask-luminance',
+        'mask-match',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11621,6 +11626,24 @@ test('mask', async () => {
       -webkit-mask-composite: source-out;
       -webkit-mask-composite: source-out;
       mask-composite: subtract;
+    }
+
+    .mask-alpha {
+      -webkit-mask-source-type: alpha;
+      -webkit-mask-source-type: alpha;
+      mask-mode: alpha;
+    }
+
+    .mask-luminance {
+      -webkit-mask-source-type: luminance;
+      -webkit-mask-source-type: luminance;
+      mask-mode: luminance;
+    }
+
+    .mask-match {
+      -webkit-mask-source-type: auto;
+      -webkit-mask-source-type: auto;
+      mask-mode: match-source;
     }"
   `)
   expect(
@@ -11647,6 +11670,14 @@ test('mask', async () => {
       'mask-subtract/foo',
       'mask-intersect/foo',
       'mask-exclude/foo',
+
+      // mask-mode
+      '-mask-alpha',
+      '-mask-luminance',
+      '-mask-match',
+      'mask-alpha/foo',
+      'mask-luminance/foo',
+      'mask-match/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index b52ee37b632e..df73ef28f839 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2855,6 +2855,16 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-subtract', [['mask-composite', 'subtract']])
     staticUtility('mask-intersect', [['mask-composite', 'intersect']])
     staticUtility('mask-exclude', [['mask-composite', 'exclude']])
+
+    /**
+     * @css `mask-mode`
+     *
+     * Sets the "mode" of the mask given by mask-image
+     */
+
+    staticUtility('mask-alpha', [['mask-mode', 'alpha']])
+    staticUtility('mask-luminance', [['mask-mode', 'luminance']])
+    staticUtility('mask-match', [['mask-mode', 'match-source']])
   }
 
   /**

From eb8447184e39e9c0ce111b3d9fe9951fc95a967b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 10 Mar 2025 15:42:36 -0400
Subject: [PATCH 06/29] Add utilities for `mask-type`

---
 .../__snapshots__/intellisense.test.ts.snap    |  2 ++
 packages/tailwindcss/src/utilities.test.ts     | 18 ++++++++++++++++++
 packages/tailwindcss/src/utilities.ts          |  9 +++++++++
 3 files changed, 29 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 4406b2b41c65..42984a4ad602 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5112,6 +5112,8 @@ exports[`getClassList 1`] = `
   "mask-match",
   "mask-none",
   "mask-subtract",
+  "mask-type-alpha",
+  "mask-type-luminance",
   "max-h-0",
   "max-h-0.5",
   "max-h-1",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index b8ff50337363..4231e20c20c4 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11590,6 +11590,10 @@ test('mask', async () => {
         'mask-alpha',
         'mask-luminance',
         'mask-match',
+
+        // mask-type
+        'mask-type-alpha',
+        'mask-type-luminance',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11644,6 +11648,14 @@ test('mask', async () => {
       -webkit-mask-source-type: auto;
       -webkit-mask-source-type: auto;
       mask-mode: match-source;
+    }
+
+    .mask-type-alpha {
+      mask-type: alpha;
+    }
+
+    .mask-type-luminance {
+      mask-type: luminance;
     }"
   `)
   expect(
@@ -11678,6 +11690,12 @@ test('mask', async () => {
       'mask-alpha/foo',
       'mask-luminance/foo',
       'mask-match/foo',
+
+      // mask-type
+      '-mask-type-alpha',
+      '-mask-type-luminance',
+      'mask-type-alpha/foo',
+      'mask-type-luminance/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index df73ef28f839..de659fe4c0e4 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2865,6 +2865,15 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-alpha', [['mask-mode', 'alpha']])
     staticUtility('mask-luminance', [['mask-mode', 'luminance']])
     staticUtility('mask-match', [['mask-mode', 'match-source']])
+
+    /**
+     * @css `mask-type`
+     *
+     * Sets the "mode" of the current `<mask>` element
+     * Is overridden by `mask-mode` if used
+     */
+    staticUtility('mask-type-alpha', [['mask-type', 'alpha']])
+    staticUtility('mask-type-luminance', [['mask-type', 'luminance']])
   }
 
   /**

From 9ac547e049f3e70f4731cadede96239d996e2fff Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 24 Mar 2025 13:14:07 -0400
Subject: [PATCH 07/29] Add utilities for `mask-size`

---
 .../__snapshots__/intellisense.test.ts.snap   |  3 ++
 packages/tailwindcss/src/utilities.test.ts    | 46 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 16 ++++++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 42984a4ad602..a059352f9f4b 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5106,6 +5106,9 @@ exports[`getClassList 1`] = `
   "m-px",
   "mask-add",
   "mask-alpha",
+  "mask-auto",
+  "mask-contain",
+  "mask-cover",
   "mask-exclude",
   "mask-intersect",
   "mask-luminance",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 4231e20c20c4..999ee5bd05f3 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11594,6 +11594,14 @@ test('mask', async () => {
         // mask-type
         'mask-type-alpha',
         'mask-type-luminance',
+
+        // mask-size
+        'mask-auto',
+        'mask-cover',
+        'mask-contain',
+        'mask-[cover]',
+        'mask-[contain]',
+        'mask-[size:120px_120px]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11656,6 +11664,36 @@ test('mask', async () => {
 
     .mask-type-luminance {
       mask-type: luminance;
+    }
+
+    .mask-\\[contain\\] {
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+
+    .mask-\\[cover\\] {
+      -webkit-mask-size: cover;
+      mask-size: cover;
+    }
+
+    .mask-\\[size\\:120px_120px\\] {
+      -webkit-mask-size: 120px 120px;
+      mask-size: 120px 120px;
+    }
+
+    .mask-auto {
+      -webkit-mask-size: auto;
+      mask-size: auto;
+    }
+
+    .mask-contain {
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+
+    .mask-cover {
+      -webkit-mask-size: cover;
+      mask-size: cover;
     }"
   `)
   expect(
@@ -11696,6 +11734,14 @@ test('mask', async () => {
       '-mask-type-luminance',
       'mask-type-alpha/foo',
       'mask-type-luminance/foo',
+
+      // mask-size
+      '-mask-auto',
+      '-mask-cover',
+      '-mask-contain',
+      '-mask-auto/foo',
+      '-mask-cover/foo',
+      '-mask-contain/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index de659fe4c0e4..8e43aff60cb5 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2836,9 +2836,15 @@ export function createUtilities(theme: Theme) {
 
       // Arbitrary values
       let value: string | null = candidate.value.value
-      let type = candidate.value.dataType ?? inferDataType(value, ['image', 'url'])
+      let type =
+        candidate.value.dataType ?? inferDataType(value, ['image', 'bg-size', 'length', 'url'])
 
       switch (type) {
+        case 'bg-size':
+        case 'length':
+        case 'size': {
+          return [decl('mask-size', value)]
+        }
         case 'image':
         case 'url':
         default: {
@@ -2874,6 +2880,14 @@ export function createUtilities(theme: Theme) {
      */
     staticUtility('mask-type-alpha', [['mask-type', 'alpha']])
     staticUtility('mask-type-luminance', [['mask-type', 'luminance']])
+
+    /**
+     * @css `mask-size`
+     */
+
+    staticUtility('mask-auto', [['mask-size', 'auto']])
+    staticUtility('mask-cover', [['mask-size', 'cover']])
+    staticUtility('mask-contain', [['mask-size', 'contain']])
   }
 
   /**

From 7eeca955c8c09dfbd8d314294eafddd69e2ae177 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 25 Mar 2025 12:36:04 -0400
Subject: [PATCH 08/29] Add utilities for `mask-position`

---
 .../__snapshots__/intellisense.test.ts.snap   |  9 ++
 packages/tailwindcss/src/utilities.test.ts    | 97 ++++++++++++++++++-
 packages/tailwindcss/src/utilities.ts         | 22 ++++-
 3 files changed, 126 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index a059352f9f4b..e9b2eabb3b10 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5107,14 +5107,23 @@ exports[`getClassList 1`] = `
   "mask-add",
   "mask-alpha",
   "mask-auto",
+  "mask-bottom",
+  "mask-bottom-left",
+  "mask-bottom-right",
+  "mask-center",
   "mask-contain",
   "mask-cover",
   "mask-exclude",
   "mask-intersect",
+  "mask-left",
   "mask-luminance",
   "mask-match",
   "mask-none",
+  "mask-right",
   "mask-subtract",
+  "mask-top",
+  "mask-top-left",
+  "mask-top-right",
   "mask-type-alpha",
   "mask-type-luminance",
   "max-h-0",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 999ee5bd05f3..adb9cdf75943 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11602,6 +11602,23 @@ test('mask', async () => {
         'mask-[cover]',
         'mask-[contain]',
         'mask-[size:120px_120px]',
+
+        // mask-position
+        'mask-center',
+        'mask-top',
+        'mask-top-right',
+        'mask-top-left',
+        'mask-bottom',
+        'mask-bottom-right',
+        'mask-bottom-left',
+        'mask-left',
+        'mask-right',
+        'mask-center',
+        'mask-[50%]',
+        'mask-[120px]',
+        'mask-[120px_120px]',
+        'mask-[length:120px_120px]',
+        'mask-[position:120px_120px]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11676,7 +11693,7 @@ test('mask', async () => {
       mask-size: cover;
     }
 
-    .mask-\\[size\\:120px_120px\\] {
+    .mask-\\[length\\:120px_120px\\], .mask-\\[size\\:120px_120px\\] {
       -webkit-mask-size: 120px 120px;
       mask-size: 120px 120px;
     }
@@ -11694,6 +11711,66 @@ test('mask', async () => {
     .mask-cover {
       -webkit-mask-size: cover;
       mask-size: cover;
+    }
+
+    .mask-\\[50\\%\\] {
+      -webkit-mask-position: 50%;
+      mask-position: 50%;
+    }
+
+    .mask-\\[120px\\] {
+      -webkit-mask-position: 120px;
+      mask-position: 120px;
+    }
+
+    .mask-\\[120px_120px\\], .mask-\\[position\\:120px_120px\\] {
+      -webkit-mask-position: 120px 120px;
+      mask-position: 120px 120px;
+    }
+
+    .mask-bottom {
+      -webkit-mask-position: bottom;
+      mask-position: bottom;
+    }
+
+    .mask-bottom-left {
+      -webkit-mask-position: 0 100%;
+      mask-position: 0 100%;
+    }
+
+    .mask-bottom-right {
+      -webkit-mask-position: 100% 100%;
+      mask-position: 100% 100%;
+    }
+
+    .mask-center {
+      -webkit-mask-position: center;
+      mask-position: center;
+    }
+
+    .mask-left {
+      -webkit-mask-position: 0;
+      mask-position: 0;
+    }
+
+    .mask-right {
+      -webkit-mask-position: 100%;
+      mask-position: 100%;
+    }
+
+    .mask-top {
+      -webkit-mask-position: top;
+      mask-position: top;
+    }
+
+    .mask-top-left {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
+    }
+
+    .mask-top-right {
+      -webkit-mask-position: 100% 0;
+      mask-position: 100% 0;
     }"
   `)
   expect(
@@ -11742,6 +11819,24 @@ test('mask', async () => {
       '-mask-auto/foo',
       '-mask-cover/foo',
       '-mask-contain/foo',
+
+      // mask-position
+      '-mask-center',
+      '-mask-top',
+      '-mask-right-top',
+      '-mask-right-bottom',
+      '-mask-bottom',
+      '-mask-left-bottom',
+      '-mask-left',
+      '-mask-left-top',
+      '-mask-center/foo',
+      '-mask-top/foo',
+      '-mask-right-top/foo',
+      '-mask-right-bottom/foo',
+      '-mask-bottom/foo',
+      '-mask-left-bottom/foo',
+      '-mask-left/foo',
+      '-mask-left-top/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 8e43aff60cb5..99ab51387482 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2837,9 +2837,15 @@ export function createUtilities(theme: Theme) {
       // Arbitrary values
       let value: string | null = candidate.value.value
       let type =
-        candidate.value.dataType ?? inferDataType(value, ['image', 'bg-size', 'length', 'url'])
+        candidate.value.dataType ??
+        inferDataType(value, ['image', 'percentage', 'position', 'bg-size', 'length', 'url'])
 
       switch (type) {
+        case 'percentage':
+        case 'position': {
+          if (candidate.modifier) return
+          return [decl('mask-position', value)]
+        }
         case 'bg-size':
         case 'length':
         case 'size': {
@@ -2888,6 +2894,20 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-auto', [['mask-size', 'auto']])
     staticUtility('mask-cover', [['mask-size', 'cover']])
     staticUtility('mask-contain', [['mask-size', 'contain']])
+
+    /**
+     * @css `mask-position`
+     */
+
+    staticUtility('mask-top', [['mask-position', 'top']])
+    staticUtility('mask-top-left', [['mask-position', 'left top']])
+    staticUtility('mask-top-right', [['mask-position', 'right top']])
+    staticUtility('mask-bottom', [['mask-position', 'bottom']])
+    staticUtility('mask-bottom-left', [['mask-position', 'left bottom']])
+    staticUtility('mask-bottom-right', [['mask-position', 'right bottom']])
+    staticUtility('mask-left', [['mask-position', 'left']])
+    staticUtility('mask-right', [['mask-position', 'right']])
+    staticUtility('mask-center', [['mask-position', 'center']])
   }
 
   /**

From a8e06833457f40bcb1c5169a7dba175cc6108e1b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 13 Mar 2025 10:19:01 -0400
Subject: [PATCH 09/29] Add utilities for `mask-repeat`

---
 .../__snapshots__/intellisense.test.ts.snap   |  6 ++
 packages/tailwindcss/src/utilities.test.ts    | 58 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 11 ++++
 3 files changed, 75 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index e9b2eabb3b10..bdb589dec9b1 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5118,7 +5118,13 @@ exports[`getClassList 1`] = `
   "mask-left",
   "mask-luminance",
   "mask-match",
+  "mask-no-repeat",
   "mask-none",
+  "mask-repeat",
+  "mask-repeat-round",
+  "mask-repeat-space",
+  "mask-repeat-x",
+  "mask-repeat-y",
   "mask-right",
   "mask-subtract",
   "mask-top",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index adb9cdf75943..c915010f5729 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11619,6 +11619,14 @@ test('mask', async () => {
         'mask-[120px_120px]',
         'mask-[length:120px_120px]',
         'mask-[position:120px_120px]',
+
+        // mask-repeat
+        'mask-repeat',
+        'mask-no-repeat',
+        'mask-repeat-x',
+        'mask-repeat-y',
+        'mask-repeat-round',
+        'mask-repeat-space',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11771,6 +11779,36 @@ test('mask', async () => {
     .mask-top-right {
       -webkit-mask-position: 100% 0;
       mask-position: 100% 0;
+    }
+
+    .mask-no-repeat {
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+    }
+
+    .mask-repeat {
+      -webkit-mask-repeat: repeat;
+      mask-repeat: repeat;
+    }
+
+    .mask-repeat-round {
+      -webkit-mask-repeat: round;
+      mask-repeat: round;
+    }
+
+    .mask-repeat-space {
+      -webkit-mask-repeat: space;
+      mask-repeat: space;
+    }
+
+    .mask-repeat-x {
+      -webkit-mask-repeat: repeat-x;
+      mask-repeat: repeat-x;
+    }
+
+    .mask-repeat-y {
+      -webkit-mask-repeat: repeat-y;
+      mask-repeat: repeat-y;
     }"
   `)
   expect(
@@ -11837,6 +11875,26 @@ test('mask', async () => {
       '-mask-left-bottom/foo',
       '-mask-left/foo',
       '-mask-left-top/foo',
+
+      // mask-repeat
+      'mask-repeat/foo',
+      'mask-no-repeat/foo',
+      'mask-repeat-x/foo',
+      'mask-repeat-y/foo',
+      'mask-round/foo',
+      'mask-space/foo',
+      '-mask-repeat',
+      '-mask-no-repeat',
+      '-mask-repeat-x',
+      '-mask-repeat-y',
+      '-mask-round',
+      '-mask-space',
+      '-mask-repeat/foo',
+      '-mask-no-repeat/foo',
+      '-mask-repeat-x/foo',
+      '-mask-repeat-y/foo',
+      '-mask-round/foo',
+      '-mask-space/foo',
     ]),
   ).toEqual('')
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 99ab51387482..2f328f91d29b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2908,6 +2908,17 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-left', [['mask-position', 'left']])
     staticUtility('mask-right', [['mask-position', 'right']])
     staticUtility('mask-center', [['mask-position', 'center']])
+
+    /**
+     * @css `mask-repeat`
+     */
+
+    staticUtility('mask-repeat', [['mask-repeat', 'repeat']])
+    staticUtility('mask-no-repeat', [['mask-repeat', 'no-repeat']])
+    staticUtility('mask-repeat-x', [['mask-repeat', 'repeat-x']])
+    staticUtility('mask-repeat-y', [['mask-repeat', 'repeat-y']])
+    staticUtility('mask-repeat-round', [['mask-repeat', 'round']])
+    staticUtility('mask-repeat-space', [['mask-repeat', 'space']])
   }
 
   /**

From df0d9cc3c15ebca908655722d75843f5e272d54e Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 21 Mar 2025 16:02:57 -0400
Subject: [PATCH 10/29] Add utilities for `mask-clip`

---
 .../__snapshots__/intellisense.test.ts.snap   |  7 ++
 packages/tailwindcss/src/utilities.test.ts    | 68 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 12 ++++
 3 files changed, 87 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index bdb589dec9b1..c57bd0f9f757 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5111,6 +5111,12 @@ exports[`getClassList 1`] = `
   "mask-bottom-left",
   "mask-bottom-right",
   "mask-center",
+  "mask-clip-border",
+  "mask-clip-content",
+  "mask-clip-fill",
+  "mask-clip-padding",
+  "mask-clip-stroke",
+  "mask-clip-view",
   "mask-contain",
   "mask-cover",
   "mask-exclude",
@@ -5118,6 +5124,7 @@ exports[`getClassList 1`] = `
   "mask-left",
   "mask-luminance",
   "mask-match",
+  "mask-no-clip",
   "mask-no-repeat",
   "mask-none",
   "mask-repeat",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index c915010f5729..233db5b93083 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12002,6 +12002,74 @@ test('bg-origin', async () => {
   ).toEqual('')
 })
 
+test('mask-clip', async () => {
+  expect(
+    await run([
+      'mask-clip-border',
+      'mask-clip-padding',
+      'mask-clip-content',
+      'mask-clip-fill',
+      'mask-clip-stroke',
+      'mask-clip-view',
+      'mask-no-clip',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".mask-clip-border {
+      -webkit-mask-clip: border-box;
+      mask-clip: border-box;
+    }
+
+    .mask-clip-content {
+      -webkit-mask-clip: content-box;
+      mask-clip: content-box;
+    }
+
+    .mask-clip-fill {
+      -webkit-mask-clip: fill-box;
+      mask-clip: fill-box;
+    }
+
+    .mask-clip-padding {
+      -webkit-mask-clip: padding-box;
+      mask-clip: padding-box;
+    }
+
+    .mask-clip-stroke {
+      -webkit-mask-clip: stroke-box;
+      mask-clip: stroke-box;
+    }
+
+    .mask-clip-view {
+      -webkit-mask-clip: view-box;
+      mask-clip: view-box;
+    }
+
+    .mask-no-clip {
+      -webkit-mask-clip: no-clip;
+      mask-clip: no-clip;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-clip',
+      '-mask-clip-border',
+      '-mask-clip-padding',
+      '-mask-clip-content',
+      '-mask-clip-fill',
+      '-mask-clip-stroke',
+      '-mask-clip-view',
+      '-mask-no-clip',
+      'mask-clip-border/foo',
+      'mask-clip-padding/foo',
+      'mask-clip-content/foo',
+      'mask-clip-fill/foo',
+      'mask-clip-stroke/foo',
+      'mask-clip-view/foo',
+      'mask-no-clip/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('bg-blend', async () => {
   expect(
     await run([
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 2f328f91d29b..51d8b51f022e 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2919,6 +2919,18 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-repeat-y', [['mask-repeat', 'repeat-y']])
     staticUtility('mask-repeat-round', [['mask-repeat', 'round']])
     staticUtility('mask-repeat-space', [['mask-repeat', 'space']])
+
+    /**
+     * @css `mask-clip`
+     */
+
+    staticUtility('mask-clip-border', [['mask-clip', 'border-box']])
+    staticUtility('mask-clip-padding', [['mask-clip', 'padding-box']])
+    staticUtility('mask-clip-content', [['mask-clip', 'content-box']])
+    staticUtility('mask-clip-fill', [['mask-clip', 'fill-box']])
+    staticUtility('mask-clip-stroke', [['mask-clip', 'stroke-box']])
+    staticUtility('mask-clip-view', [['mask-clip', 'view-box']])
+    staticUtility('mask-no-clip', [['mask-clip', 'no-clip']])
   }
 
   /**

From d69813e53b5569404eb085832e8668fdb86ff914 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 13 Mar 2025 10:19:42 -0400
Subject: [PATCH 11/29] Add utilities for `mask-origin`

---
 .../__snapshots__/intellisense.test.ts.snap   |  6 ++
 packages/tailwindcss/src/utilities.test.ts    | 60 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 11 ++++
 3 files changed, 77 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index c57bd0f9f757..ca52430683d1 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5127,6 +5127,12 @@ exports[`getClassList 1`] = `
   "mask-no-clip",
   "mask-no-repeat",
   "mask-none",
+  "mask-origin-border",
+  "mask-origin-content",
+  "mask-origin-fill",
+  "mask-origin-padding",
+  "mask-origin-stroke",
+  "mask-origin-view",
   "mask-repeat",
   "mask-repeat-round",
   "mask-repeat-space",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 233db5b93083..963b612238e7 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12070,6 +12070,66 @@ test('mask-clip', async () => {
   ).toEqual('')
 })
 
+test('mask-origin', async () => {
+  expect(
+    await run([
+      'mask-origin-border',
+      'mask-origin-padding',
+      'mask-origin-content',
+      'mask-origin-fill',
+      'mask-origin-stroke',
+      'mask-origin-view',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".mask-origin-border {
+      -webkit-mask-origin: border-box;
+      mask-origin: border-box;
+    }
+
+    .mask-origin-content {
+      -webkit-mask-origin: content-box;
+      mask-origin: content-box;
+    }
+
+    .mask-origin-fill {
+      -webkit-mask-origin: fill-box;
+      mask-origin: fill-box;
+    }
+
+    .mask-origin-padding {
+      -webkit-mask-origin: padding-box;
+      mask-origin: padding-box;
+    }
+
+    .mask-origin-stroke {
+      -webkit-mask-origin: stroke-box;
+      mask-origin: stroke-box;
+    }
+
+    .mask-origin-view {
+      -webkit-mask-origin: view-box;
+      mask-origin: view-box;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-origin',
+      '-mask-origin-border',
+      '-mask-origin-padding',
+      '-mask-origin-content',
+      '-mask-origin-fill',
+      '-mask-origin-stroke',
+      '-mask-origin-view',
+      'mask-origin-border/foo',
+      'mask-origin-padding/foo',
+      'mask-origin-content/foo',
+      'mask-origin-fill/foo',
+      'mask-origin-stroke/foo',
+      'mask-origin-view/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('bg-blend', async () => {
   expect(
     await run([
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 51d8b51f022e..d9b94d2390c6 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2931,6 +2931,17 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-clip-stroke', [['mask-clip', 'stroke-box']])
     staticUtility('mask-clip-view', [['mask-clip', 'view-box']])
     staticUtility('mask-no-clip', [['mask-clip', 'no-clip']])
+
+    /**
+     * @css `mask-origin`
+     */
+
+    staticUtility('mask-origin-border', [['mask-origin', 'border-box']])
+    staticUtility('mask-origin-padding', [['mask-origin', 'padding-box']])
+    staticUtility('mask-origin-content', [['mask-origin', 'content-box']])
+    staticUtility('mask-origin-fill', [['mask-origin', 'fill-box']])
+    staticUtility('mask-origin-stroke', [['mask-origin', 'stroke-box']])
+    staticUtility('mask-origin-view', [['mask-origin', 'view-box']])
   }
 
   /**

From 811573b1924f083223925a7346bdf5f403265245 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 26 Mar 2025 11:31:10 -0400
Subject: [PATCH 12/29] Add utilities for `mask-{t,r,b,l,x,y}-{from,to}-*`

---
 .../__snapshots__/intellisense.test.ts.snap   | 1452 +++++++++
 packages/tailwindcss/src/utilities.test.ts    | 2879 +++++++++++++++++
 packages/tailwindcss/src/utilities.ts         |  234 ++
 3 files changed, 4565 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index ca52430683d1..a64650f6d07c 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5107,6 +5107,248 @@ exports[`getClassList 1`] = `
   "mask-add",
   "mask-alpha",
   "mask-auto",
+  "mask-b-from-0",
+  "mask-b-from-0%",
+  "mask-b-from-0.5",
+  "mask-b-from-1",
+  "mask-b-from-1.5",
+  "mask-b-from-2",
+  "mask-b-from-2.5",
+  "mask-b-from-3",
+  "mask-b-from-3.5",
+  "mask-b-from-4",
+  "mask-b-from-5",
+  "mask-b-from-5%",
+  "mask-b-from-6",
+  "mask-b-from-7",
+  "mask-b-from-8",
+  "mask-b-from-9",
+  "mask-b-from-10",
+  "mask-b-from-10%",
+  "mask-b-from-11",
+  "mask-b-from-12",
+  "mask-b-from-14",
+  "mask-b-from-15%",
+  "mask-b-from-16",
+  "mask-b-from-20",
+  "mask-b-from-20%",
+  "mask-b-from-24",
+  "mask-b-from-25%",
+  "mask-b-from-28",
+  "mask-b-from-30%",
+  "mask-b-from-32",
+  "mask-b-from-35%",
+  "mask-b-from-36",
+  "mask-b-from-40",
+  "mask-b-from-40%",
+  "mask-b-from-44",
+  "mask-b-from-45%",
+  "mask-b-from-48",
+  "mask-b-from-50%",
+  "mask-b-from-52",
+  "mask-b-from-55%",
+  "mask-b-from-56",
+  "mask-b-from-60",
+  "mask-b-from-60%",
+  "mask-b-from-64",
+  "mask-b-from-65%",
+  "mask-b-from-70%",
+  "mask-b-from-72",
+  "mask-b-from-75%",
+  "mask-b-from-80",
+  "mask-b-from-80%",
+  "mask-b-from-85%",
+  "mask-b-from-90%",
+  "mask-b-from-95%",
+  "mask-b-from-96",
+  "mask-b-from-100%",
+  "mask-b-from-current",
+  "mask-b-from-current/0",
+  "mask-b-from-current/5",
+  "mask-b-from-current/10",
+  "mask-b-from-current/15",
+  "mask-b-from-current/20",
+  "mask-b-from-current/25",
+  "mask-b-from-current/30",
+  "mask-b-from-current/35",
+  "mask-b-from-current/40",
+  "mask-b-from-current/45",
+  "mask-b-from-current/50",
+  "mask-b-from-current/55",
+  "mask-b-from-current/60",
+  "mask-b-from-current/65",
+  "mask-b-from-current/70",
+  "mask-b-from-current/75",
+  "mask-b-from-current/80",
+  "mask-b-from-current/85",
+  "mask-b-from-current/90",
+  "mask-b-from-current/95",
+  "mask-b-from-current/100",
+  "mask-b-from-inherit",
+  "mask-b-from-inherit/0",
+  "mask-b-from-inherit/5",
+  "mask-b-from-inherit/10",
+  "mask-b-from-inherit/15",
+  "mask-b-from-inherit/20",
+  "mask-b-from-inherit/25",
+  "mask-b-from-inherit/30",
+  "mask-b-from-inherit/35",
+  "mask-b-from-inherit/40",
+  "mask-b-from-inherit/45",
+  "mask-b-from-inherit/50",
+  "mask-b-from-inherit/55",
+  "mask-b-from-inherit/60",
+  "mask-b-from-inherit/65",
+  "mask-b-from-inherit/70",
+  "mask-b-from-inherit/75",
+  "mask-b-from-inherit/80",
+  "mask-b-from-inherit/85",
+  "mask-b-from-inherit/90",
+  "mask-b-from-inherit/95",
+  "mask-b-from-inherit/100",
+  "mask-b-from-transparent",
+  "mask-b-from-transparent/0",
+  "mask-b-from-transparent/5",
+  "mask-b-from-transparent/10",
+  "mask-b-from-transparent/15",
+  "mask-b-from-transparent/20",
+  "mask-b-from-transparent/25",
+  "mask-b-from-transparent/30",
+  "mask-b-from-transparent/35",
+  "mask-b-from-transparent/40",
+  "mask-b-from-transparent/45",
+  "mask-b-from-transparent/50",
+  "mask-b-from-transparent/55",
+  "mask-b-from-transparent/60",
+  "mask-b-from-transparent/65",
+  "mask-b-from-transparent/70",
+  "mask-b-from-transparent/75",
+  "mask-b-from-transparent/80",
+  "mask-b-from-transparent/85",
+  "mask-b-from-transparent/90",
+  "mask-b-from-transparent/95",
+  "mask-b-from-transparent/100",
+  "mask-b-to-0",
+  "mask-b-to-0%",
+  "mask-b-to-0.5",
+  "mask-b-to-1",
+  "mask-b-to-1.5",
+  "mask-b-to-2",
+  "mask-b-to-2.5",
+  "mask-b-to-3",
+  "mask-b-to-3.5",
+  "mask-b-to-4",
+  "mask-b-to-5",
+  "mask-b-to-5%",
+  "mask-b-to-6",
+  "mask-b-to-7",
+  "mask-b-to-8",
+  "mask-b-to-9",
+  "mask-b-to-10",
+  "mask-b-to-10%",
+  "mask-b-to-11",
+  "mask-b-to-12",
+  "mask-b-to-14",
+  "mask-b-to-15%",
+  "mask-b-to-16",
+  "mask-b-to-20",
+  "mask-b-to-20%",
+  "mask-b-to-24",
+  "mask-b-to-25%",
+  "mask-b-to-28",
+  "mask-b-to-30%",
+  "mask-b-to-32",
+  "mask-b-to-35%",
+  "mask-b-to-36",
+  "mask-b-to-40",
+  "mask-b-to-40%",
+  "mask-b-to-44",
+  "mask-b-to-45%",
+  "mask-b-to-48",
+  "mask-b-to-50%",
+  "mask-b-to-52",
+  "mask-b-to-55%",
+  "mask-b-to-56",
+  "mask-b-to-60",
+  "mask-b-to-60%",
+  "mask-b-to-64",
+  "mask-b-to-65%",
+  "mask-b-to-70%",
+  "mask-b-to-72",
+  "mask-b-to-75%",
+  "mask-b-to-80",
+  "mask-b-to-80%",
+  "mask-b-to-85%",
+  "mask-b-to-90%",
+  "mask-b-to-95%",
+  "mask-b-to-96",
+  "mask-b-to-100%",
+  "mask-b-to-current",
+  "mask-b-to-current/0",
+  "mask-b-to-current/5",
+  "mask-b-to-current/10",
+  "mask-b-to-current/15",
+  "mask-b-to-current/20",
+  "mask-b-to-current/25",
+  "mask-b-to-current/30",
+  "mask-b-to-current/35",
+  "mask-b-to-current/40",
+  "mask-b-to-current/45",
+  "mask-b-to-current/50",
+  "mask-b-to-current/55",
+  "mask-b-to-current/60",
+  "mask-b-to-current/65",
+  "mask-b-to-current/70",
+  "mask-b-to-current/75",
+  "mask-b-to-current/80",
+  "mask-b-to-current/85",
+  "mask-b-to-current/90",
+  "mask-b-to-current/95",
+  "mask-b-to-current/100",
+  "mask-b-to-inherit",
+  "mask-b-to-inherit/0",
+  "mask-b-to-inherit/5",
+  "mask-b-to-inherit/10",
+  "mask-b-to-inherit/15",
+  "mask-b-to-inherit/20",
+  "mask-b-to-inherit/25",
+  "mask-b-to-inherit/30",
+  "mask-b-to-inherit/35",
+  "mask-b-to-inherit/40",
+  "mask-b-to-inherit/45",
+  "mask-b-to-inherit/50",
+  "mask-b-to-inherit/55",
+  "mask-b-to-inherit/60",
+  "mask-b-to-inherit/65",
+  "mask-b-to-inherit/70",
+  "mask-b-to-inherit/75",
+  "mask-b-to-inherit/80",
+  "mask-b-to-inherit/85",
+  "mask-b-to-inherit/90",
+  "mask-b-to-inherit/95",
+  "mask-b-to-inherit/100",
+  "mask-b-to-transparent",
+  "mask-b-to-transparent/0",
+  "mask-b-to-transparent/5",
+  "mask-b-to-transparent/10",
+  "mask-b-to-transparent/15",
+  "mask-b-to-transparent/20",
+  "mask-b-to-transparent/25",
+  "mask-b-to-transparent/30",
+  "mask-b-to-transparent/35",
+  "mask-b-to-transparent/40",
+  "mask-b-to-transparent/45",
+  "mask-b-to-transparent/50",
+  "mask-b-to-transparent/55",
+  "mask-b-to-transparent/60",
+  "mask-b-to-transparent/65",
+  "mask-b-to-transparent/70",
+  "mask-b-to-transparent/75",
+  "mask-b-to-transparent/80",
+  "mask-b-to-transparent/85",
+  "mask-b-to-transparent/90",
+  "mask-b-to-transparent/95",
+  "mask-b-to-transparent/100",
   "mask-bottom",
   "mask-bottom-left",
   "mask-bottom-right",
@@ -5121,6 +5363,248 @@ exports[`getClassList 1`] = `
   "mask-cover",
   "mask-exclude",
   "mask-intersect",
+  "mask-l-from-0",
+  "mask-l-from-0%",
+  "mask-l-from-0.5",
+  "mask-l-from-1",
+  "mask-l-from-1.5",
+  "mask-l-from-2",
+  "mask-l-from-2.5",
+  "mask-l-from-3",
+  "mask-l-from-3.5",
+  "mask-l-from-4",
+  "mask-l-from-5",
+  "mask-l-from-5%",
+  "mask-l-from-6",
+  "mask-l-from-7",
+  "mask-l-from-8",
+  "mask-l-from-9",
+  "mask-l-from-10",
+  "mask-l-from-10%",
+  "mask-l-from-11",
+  "mask-l-from-12",
+  "mask-l-from-14",
+  "mask-l-from-15%",
+  "mask-l-from-16",
+  "mask-l-from-20",
+  "mask-l-from-20%",
+  "mask-l-from-24",
+  "mask-l-from-25%",
+  "mask-l-from-28",
+  "mask-l-from-30%",
+  "mask-l-from-32",
+  "mask-l-from-35%",
+  "mask-l-from-36",
+  "mask-l-from-40",
+  "mask-l-from-40%",
+  "mask-l-from-44",
+  "mask-l-from-45%",
+  "mask-l-from-48",
+  "mask-l-from-50%",
+  "mask-l-from-52",
+  "mask-l-from-55%",
+  "mask-l-from-56",
+  "mask-l-from-60",
+  "mask-l-from-60%",
+  "mask-l-from-64",
+  "mask-l-from-65%",
+  "mask-l-from-70%",
+  "mask-l-from-72",
+  "mask-l-from-75%",
+  "mask-l-from-80",
+  "mask-l-from-80%",
+  "mask-l-from-85%",
+  "mask-l-from-90%",
+  "mask-l-from-95%",
+  "mask-l-from-96",
+  "mask-l-from-100%",
+  "mask-l-from-current",
+  "mask-l-from-current/0",
+  "mask-l-from-current/5",
+  "mask-l-from-current/10",
+  "mask-l-from-current/15",
+  "mask-l-from-current/20",
+  "mask-l-from-current/25",
+  "mask-l-from-current/30",
+  "mask-l-from-current/35",
+  "mask-l-from-current/40",
+  "mask-l-from-current/45",
+  "mask-l-from-current/50",
+  "mask-l-from-current/55",
+  "mask-l-from-current/60",
+  "mask-l-from-current/65",
+  "mask-l-from-current/70",
+  "mask-l-from-current/75",
+  "mask-l-from-current/80",
+  "mask-l-from-current/85",
+  "mask-l-from-current/90",
+  "mask-l-from-current/95",
+  "mask-l-from-current/100",
+  "mask-l-from-inherit",
+  "mask-l-from-inherit/0",
+  "mask-l-from-inherit/5",
+  "mask-l-from-inherit/10",
+  "mask-l-from-inherit/15",
+  "mask-l-from-inherit/20",
+  "mask-l-from-inherit/25",
+  "mask-l-from-inherit/30",
+  "mask-l-from-inherit/35",
+  "mask-l-from-inherit/40",
+  "mask-l-from-inherit/45",
+  "mask-l-from-inherit/50",
+  "mask-l-from-inherit/55",
+  "mask-l-from-inherit/60",
+  "mask-l-from-inherit/65",
+  "mask-l-from-inherit/70",
+  "mask-l-from-inherit/75",
+  "mask-l-from-inherit/80",
+  "mask-l-from-inherit/85",
+  "mask-l-from-inherit/90",
+  "mask-l-from-inherit/95",
+  "mask-l-from-inherit/100",
+  "mask-l-from-transparent",
+  "mask-l-from-transparent/0",
+  "mask-l-from-transparent/5",
+  "mask-l-from-transparent/10",
+  "mask-l-from-transparent/15",
+  "mask-l-from-transparent/20",
+  "mask-l-from-transparent/25",
+  "mask-l-from-transparent/30",
+  "mask-l-from-transparent/35",
+  "mask-l-from-transparent/40",
+  "mask-l-from-transparent/45",
+  "mask-l-from-transparent/50",
+  "mask-l-from-transparent/55",
+  "mask-l-from-transparent/60",
+  "mask-l-from-transparent/65",
+  "mask-l-from-transparent/70",
+  "mask-l-from-transparent/75",
+  "mask-l-from-transparent/80",
+  "mask-l-from-transparent/85",
+  "mask-l-from-transparent/90",
+  "mask-l-from-transparent/95",
+  "mask-l-from-transparent/100",
+  "mask-l-to-0",
+  "mask-l-to-0%",
+  "mask-l-to-0.5",
+  "mask-l-to-1",
+  "mask-l-to-1.5",
+  "mask-l-to-2",
+  "mask-l-to-2.5",
+  "mask-l-to-3",
+  "mask-l-to-3.5",
+  "mask-l-to-4",
+  "mask-l-to-5",
+  "mask-l-to-5%",
+  "mask-l-to-6",
+  "mask-l-to-7",
+  "mask-l-to-8",
+  "mask-l-to-9",
+  "mask-l-to-10",
+  "mask-l-to-10%",
+  "mask-l-to-11",
+  "mask-l-to-12",
+  "mask-l-to-14",
+  "mask-l-to-15%",
+  "mask-l-to-16",
+  "mask-l-to-20",
+  "mask-l-to-20%",
+  "mask-l-to-24",
+  "mask-l-to-25%",
+  "mask-l-to-28",
+  "mask-l-to-30%",
+  "mask-l-to-32",
+  "mask-l-to-35%",
+  "mask-l-to-36",
+  "mask-l-to-40",
+  "mask-l-to-40%",
+  "mask-l-to-44",
+  "mask-l-to-45%",
+  "mask-l-to-48",
+  "mask-l-to-50%",
+  "mask-l-to-52",
+  "mask-l-to-55%",
+  "mask-l-to-56",
+  "mask-l-to-60",
+  "mask-l-to-60%",
+  "mask-l-to-64",
+  "mask-l-to-65%",
+  "mask-l-to-70%",
+  "mask-l-to-72",
+  "mask-l-to-75%",
+  "mask-l-to-80",
+  "mask-l-to-80%",
+  "mask-l-to-85%",
+  "mask-l-to-90%",
+  "mask-l-to-95%",
+  "mask-l-to-96",
+  "mask-l-to-100%",
+  "mask-l-to-current",
+  "mask-l-to-current/0",
+  "mask-l-to-current/5",
+  "mask-l-to-current/10",
+  "mask-l-to-current/15",
+  "mask-l-to-current/20",
+  "mask-l-to-current/25",
+  "mask-l-to-current/30",
+  "mask-l-to-current/35",
+  "mask-l-to-current/40",
+  "mask-l-to-current/45",
+  "mask-l-to-current/50",
+  "mask-l-to-current/55",
+  "mask-l-to-current/60",
+  "mask-l-to-current/65",
+  "mask-l-to-current/70",
+  "mask-l-to-current/75",
+  "mask-l-to-current/80",
+  "mask-l-to-current/85",
+  "mask-l-to-current/90",
+  "mask-l-to-current/95",
+  "mask-l-to-current/100",
+  "mask-l-to-inherit",
+  "mask-l-to-inherit/0",
+  "mask-l-to-inherit/5",
+  "mask-l-to-inherit/10",
+  "mask-l-to-inherit/15",
+  "mask-l-to-inherit/20",
+  "mask-l-to-inherit/25",
+  "mask-l-to-inherit/30",
+  "mask-l-to-inherit/35",
+  "mask-l-to-inherit/40",
+  "mask-l-to-inherit/45",
+  "mask-l-to-inherit/50",
+  "mask-l-to-inherit/55",
+  "mask-l-to-inherit/60",
+  "mask-l-to-inherit/65",
+  "mask-l-to-inherit/70",
+  "mask-l-to-inherit/75",
+  "mask-l-to-inherit/80",
+  "mask-l-to-inherit/85",
+  "mask-l-to-inherit/90",
+  "mask-l-to-inherit/95",
+  "mask-l-to-inherit/100",
+  "mask-l-to-transparent",
+  "mask-l-to-transparent/0",
+  "mask-l-to-transparent/5",
+  "mask-l-to-transparent/10",
+  "mask-l-to-transparent/15",
+  "mask-l-to-transparent/20",
+  "mask-l-to-transparent/25",
+  "mask-l-to-transparent/30",
+  "mask-l-to-transparent/35",
+  "mask-l-to-transparent/40",
+  "mask-l-to-transparent/45",
+  "mask-l-to-transparent/50",
+  "mask-l-to-transparent/55",
+  "mask-l-to-transparent/60",
+  "mask-l-to-transparent/65",
+  "mask-l-to-transparent/70",
+  "mask-l-to-transparent/75",
+  "mask-l-to-transparent/80",
+  "mask-l-to-transparent/85",
+  "mask-l-to-transparent/90",
+  "mask-l-to-transparent/95",
+  "mask-l-to-transparent/100",
   "mask-left",
   "mask-luminance",
   "mask-match",
@@ -5133,6 +5617,248 @@ exports[`getClassList 1`] = `
   "mask-origin-padding",
   "mask-origin-stroke",
   "mask-origin-view",
+  "mask-r-from-0",
+  "mask-r-from-0%",
+  "mask-r-from-0.5",
+  "mask-r-from-1",
+  "mask-r-from-1.5",
+  "mask-r-from-2",
+  "mask-r-from-2.5",
+  "mask-r-from-3",
+  "mask-r-from-3.5",
+  "mask-r-from-4",
+  "mask-r-from-5",
+  "mask-r-from-5%",
+  "mask-r-from-6",
+  "mask-r-from-7",
+  "mask-r-from-8",
+  "mask-r-from-9",
+  "mask-r-from-10",
+  "mask-r-from-10%",
+  "mask-r-from-11",
+  "mask-r-from-12",
+  "mask-r-from-14",
+  "mask-r-from-15%",
+  "mask-r-from-16",
+  "mask-r-from-20",
+  "mask-r-from-20%",
+  "mask-r-from-24",
+  "mask-r-from-25%",
+  "mask-r-from-28",
+  "mask-r-from-30%",
+  "mask-r-from-32",
+  "mask-r-from-35%",
+  "mask-r-from-36",
+  "mask-r-from-40",
+  "mask-r-from-40%",
+  "mask-r-from-44",
+  "mask-r-from-45%",
+  "mask-r-from-48",
+  "mask-r-from-50%",
+  "mask-r-from-52",
+  "mask-r-from-55%",
+  "mask-r-from-56",
+  "mask-r-from-60",
+  "mask-r-from-60%",
+  "mask-r-from-64",
+  "mask-r-from-65%",
+  "mask-r-from-70%",
+  "mask-r-from-72",
+  "mask-r-from-75%",
+  "mask-r-from-80",
+  "mask-r-from-80%",
+  "mask-r-from-85%",
+  "mask-r-from-90%",
+  "mask-r-from-95%",
+  "mask-r-from-96",
+  "mask-r-from-100%",
+  "mask-r-from-current",
+  "mask-r-from-current/0",
+  "mask-r-from-current/5",
+  "mask-r-from-current/10",
+  "mask-r-from-current/15",
+  "mask-r-from-current/20",
+  "mask-r-from-current/25",
+  "mask-r-from-current/30",
+  "mask-r-from-current/35",
+  "mask-r-from-current/40",
+  "mask-r-from-current/45",
+  "mask-r-from-current/50",
+  "mask-r-from-current/55",
+  "mask-r-from-current/60",
+  "mask-r-from-current/65",
+  "mask-r-from-current/70",
+  "mask-r-from-current/75",
+  "mask-r-from-current/80",
+  "mask-r-from-current/85",
+  "mask-r-from-current/90",
+  "mask-r-from-current/95",
+  "mask-r-from-current/100",
+  "mask-r-from-inherit",
+  "mask-r-from-inherit/0",
+  "mask-r-from-inherit/5",
+  "mask-r-from-inherit/10",
+  "mask-r-from-inherit/15",
+  "mask-r-from-inherit/20",
+  "mask-r-from-inherit/25",
+  "mask-r-from-inherit/30",
+  "mask-r-from-inherit/35",
+  "mask-r-from-inherit/40",
+  "mask-r-from-inherit/45",
+  "mask-r-from-inherit/50",
+  "mask-r-from-inherit/55",
+  "mask-r-from-inherit/60",
+  "mask-r-from-inherit/65",
+  "mask-r-from-inherit/70",
+  "mask-r-from-inherit/75",
+  "mask-r-from-inherit/80",
+  "mask-r-from-inherit/85",
+  "mask-r-from-inherit/90",
+  "mask-r-from-inherit/95",
+  "mask-r-from-inherit/100",
+  "mask-r-from-transparent",
+  "mask-r-from-transparent/0",
+  "mask-r-from-transparent/5",
+  "mask-r-from-transparent/10",
+  "mask-r-from-transparent/15",
+  "mask-r-from-transparent/20",
+  "mask-r-from-transparent/25",
+  "mask-r-from-transparent/30",
+  "mask-r-from-transparent/35",
+  "mask-r-from-transparent/40",
+  "mask-r-from-transparent/45",
+  "mask-r-from-transparent/50",
+  "mask-r-from-transparent/55",
+  "mask-r-from-transparent/60",
+  "mask-r-from-transparent/65",
+  "mask-r-from-transparent/70",
+  "mask-r-from-transparent/75",
+  "mask-r-from-transparent/80",
+  "mask-r-from-transparent/85",
+  "mask-r-from-transparent/90",
+  "mask-r-from-transparent/95",
+  "mask-r-from-transparent/100",
+  "mask-r-to-0",
+  "mask-r-to-0%",
+  "mask-r-to-0.5",
+  "mask-r-to-1",
+  "mask-r-to-1.5",
+  "mask-r-to-2",
+  "mask-r-to-2.5",
+  "mask-r-to-3",
+  "mask-r-to-3.5",
+  "mask-r-to-4",
+  "mask-r-to-5",
+  "mask-r-to-5%",
+  "mask-r-to-6",
+  "mask-r-to-7",
+  "mask-r-to-8",
+  "mask-r-to-9",
+  "mask-r-to-10",
+  "mask-r-to-10%",
+  "mask-r-to-11",
+  "mask-r-to-12",
+  "mask-r-to-14",
+  "mask-r-to-15%",
+  "mask-r-to-16",
+  "mask-r-to-20",
+  "mask-r-to-20%",
+  "mask-r-to-24",
+  "mask-r-to-25%",
+  "mask-r-to-28",
+  "mask-r-to-30%",
+  "mask-r-to-32",
+  "mask-r-to-35%",
+  "mask-r-to-36",
+  "mask-r-to-40",
+  "mask-r-to-40%",
+  "mask-r-to-44",
+  "mask-r-to-45%",
+  "mask-r-to-48",
+  "mask-r-to-50%",
+  "mask-r-to-52",
+  "mask-r-to-55%",
+  "mask-r-to-56",
+  "mask-r-to-60",
+  "mask-r-to-60%",
+  "mask-r-to-64",
+  "mask-r-to-65%",
+  "mask-r-to-70%",
+  "mask-r-to-72",
+  "mask-r-to-75%",
+  "mask-r-to-80",
+  "mask-r-to-80%",
+  "mask-r-to-85%",
+  "mask-r-to-90%",
+  "mask-r-to-95%",
+  "mask-r-to-96",
+  "mask-r-to-100%",
+  "mask-r-to-current",
+  "mask-r-to-current/0",
+  "mask-r-to-current/5",
+  "mask-r-to-current/10",
+  "mask-r-to-current/15",
+  "mask-r-to-current/20",
+  "mask-r-to-current/25",
+  "mask-r-to-current/30",
+  "mask-r-to-current/35",
+  "mask-r-to-current/40",
+  "mask-r-to-current/45",
+  "mask-r-to-current/50",
+  "mask-r-to-current/55",
+  "mask-r-to-current/60",
+  "mask-r-to-current/65",
+  "mask-r-to-current/70",
+  "mask-r-to-current/75",
+  "mask-r-to-current/80",
+  "mask-r-to-current/85",
+  "mask-r-to-current/90",
+  "mask-r-to-current/95",
+  "mask-r-to-current/100",
+  "mask-r-to-inherit",
+  "mask-r-to-inherit/0",
+  "mask-r-to-inherit/5",
+  "mask-r-to-inherit/10",
+  "mask-r-to-inherit/15",
+  "mask-r-to-inherit/20",
+  "mask-r-to-inherit/25",
+  "mask-r-to-inherit/30",
+  "mask-r-to-inherit/35",
+  "mask-r-to-inherit/40",
+  "mask-r-to-inherit/45",
+  "mask-r-to-inherit/50",
+  "mask-r-to-inherit/55",
+  "mask-r-to-inherit/60",
+  "mask-r-to-inherit/65",
+  "mask-r-to-inherit/70",
+  "mask-r-to-inherit/75",
+  "mask-r-to-inherit/80",
+  "mask-r-to-inherit/85",
+  "mask-r-to-inherit/90",
+  "mask-r-to-inherit/95",
+  "mask-r-to-inherit/100",
+  "mask-r-to-transparent",
+  "mask-r-to-transparent/0",
+  "mask-r-to-transparent/5",
+  "mask-r-to-transparent/10",
+  "mask-r-to-transparent/15",
+  "mask-r-to-transparent/20",
+  "mask-r-to-transparent/25",
+  "mask-r-to-transparent/30",
+  "mask-r-to-transparent/35",
+  "mask-r-to-transparent/40",
+  "mask-r-to-transparent/45",
+  "mask-r-to-transparent/50",
+  "mask-r-to-transparent/55",
+  "mask-r-to-transparent/60",
+  "mask-r-to-transparent/65",
+  "mask-r-to-transparent/70",
+  "mask-r-to-transparent/75",
+  "mask-r-to-transparent/80",
+  "mask-r-to-transparent/85",
+  "mask-r-to-transparent/90",
+  "mask-r-to-transparent/95",
+  "mask-r-to-transparent/100",
   "mask-repeat",
   "mask-repeat-round",
   "mask-repeat-space",
@@ -5140,11 +5866,737 @@ exports[`getClassList 1`] = `
   "mask-repeat-y",
   "mask-right",
   "mask-subtract",
+  "mask-t-from-0",
+  "mask-t-from-0%",
+  "mask-t-from-0.5",
+  "mask-t-from-1",
+  "mask-t-from-1.5",
+  "mask-t-from-2",
+  "mask-t-from-2.5",
+  "mask-t-from-3",
+  "mask-t-from-3.5",
+  "mask-t-from-4",
+  "mask-t-from-5",
+  "mask-t-from-5%",
+  "mask-t-from-6",
+  "mask-t-from-7",
+  "mask-t-from-8",
+  "mask-t-from-9",
+  "mask-t-from-10",
+  "mask-t-from-10%",
+  "mask-t-from-11",
+  "mask-t-from-12",
+  "mask-t-from-14",
+  "mask-t-from-15%",
+  "mask-t-from-16",
+  "mask-t-from-20",
+  "mask-t-from-20%",
+  "mask-t-from-24",
+  "mask-t-from-25%",
+  "mask-t-from-28",
+  "mask-t-from-30%",
+  "mask-t-from-32",
+  "mask-t-from-35%",
+  "mask-t-from-36",
+  "mask-t-from-40",
+  "mask-t-from-40%",
+  "mask-t-from-44",
+  "mask-t-from-45%",
+  "mask-t-from-48",
+  "mask-t-from-50%",
+  "mask-t-from-52",
+  "mask-t-from-55%",
+  "mask-t-from-56",
+  "mask-t-from-60",
+  "mask-t-from-60%",
+  "mask-t-from-64",
+  "mask-t-from-65%",
+  "mask-t-from-70%",
+  "mask-t-from-72",
+  "mask-t-from-75%",
+  "mask-t-from-80",
+  "mask-t-from-80%",
+  "mask-t-from-85%",
+  "mask-t-from-90%",
+  "mask-t-from-95%",
+  "mask-t-from-96",
+  "mask-t-from-100%",
+  "mask-t-from-current",
+  "mask-t-from-current/0",
+  "mask-t-from-current/5",
+  "mask-t-from-current/10",
+  "mask-t-from-current/15",
+  "mask-t-from-current/20",
+  "mask-t-from-current/25",
+  "mask-t-from-current/30",
+  "mask-t-from-current/35",
+  "mask-t-from-current/40",
+  "mask-t-from-current/45",
+  "mask-t-from-current/50",
+  "mask-t-from-current/55",
+  "mask-t-from-current/60",
+  "mask-t-from-current/65",
+  "mask-t-from-current/70",
+  "mask-t-from-current/75",
+  "mask-t-from-current/80",
+  "mask-t-from-current/85",
+  "mask-t-from-current/90",
+  "mask-t-from-current/95",
+  "mask-t-from-current/100",
+  "mask-t-from-inherit",
+  "mask-t-from-inherit/0",
+  "mask-t-from-inherit/5",
+  "mask-t-from-inherit/10",
+  "mask-t-from-inherit/15",
+  "mask-t-from-inherit/20",
+  "mask-t-from-inherit/25",
+  "mask-t-from-inherit/30",
+  "mask-t-from-inherit/35",
+  "mask-t-from-inherit/40",
+  "mask-t-from-inherit/45",
+  "mask-t-from-inherit/50",
+  "mask-t-from-inherit/55",
+  "mask-t-from-inherit/60",
+  "mask-t-from-inherit/65",
+  "mask-t-from-inherit/70",
+  "mask-t-from-inherit/75",
+  "mask-t-from-inherit/80",
+  "mask-t-from-inherit/85",
+  "mask-t-from-inherit/90",
+  "mask-t-from-inherit/95",
+  "mask-t-from-inherit/100",
+  "mask-t-from-transparent",
+  "mask-t-from-transparent/0",
+  "mask-t-from-transparent/5",
+  "mask-t-from-transparent/10",
+  "mask-t-from-transparent/15",
+  "mask-t-from-transparent/20",
+  "mask-t-from-transparent/25",
+  "mask-t-from-transparent/30",
+  "mask-t-from-transparent/35",
+  "mask-t-from-transparent/40",
+  "mask-t-from-transparent/45",
+  "mask-t-from-transparent/50",
+  "mask-t-from-transparent/55",
+  "mask-t-from-transparent/60",
+  "mask-t-from-transparent/65",
+  "mask-t-from-transparent/70",
+  "mask-t-from-transparent/75",
+  "mask-t-from-transparent/80",
+  "mask-t-from-transparent/85",
+  "mask-t-from-transparent/90",
+  "mask-t-from-transparent/95",
+  "mask-t-from-transparent/100",
+  "mask-t-to-0",
+  "mask-t-to-0%",
+  "mask-t-to-0.5",
+  "mask-t-to-1",
+  "mask-t-to-1.5",
+  "mask-t-to-2",
+  "mask-t-to-2.5",
+  "mask-t-to-3",
+  "mask-t-to-3.5",
+  "mask-t-to-4",
+  "mask-t-to-5",
+  "mask-t-to-5%",
+  "mask-t-to-6",
+  "mask-t-to-7",
+  "mask-t-to-8",
+  "mask-t-to-9",
+  "mask-t-to-10",
+  "mask-t-to-10%",
+  "mask-t-to-11",
+  "mask-t-to-12",
+  "mask-t-to-14",
+  "mask-t-to-15%",
+  "mask-t-to-16",
+  "mask-t-to-20",
+  "mask-t-to-20%",
+  "mask-t-to-24",
+  "mask-t-to-25%",
+  "mask-t-to-28",
+  "mask-t-to-30%",
+  "mask-t-to-32",
+  "mask-t-to-35%",
+  "mask-t-to-36",
+  "mask-t-to-40",
+  "mask-t-to-40%",
+  "mask-t-to-44",
+  "mask-t-to-45%",
+  "mask-t-to-48",
+  "mask-t-to-50%",
+  "mask-t-to-52",
+  "mask-t-to-55%",
+  "mask-t-to-56",
+  "mask-t-to-60",
+  "mask-t-to-60%",
+  "mask-t-to-64",
+  "mask-t-to-65%",
+  "mask-t-to-70%",
+  "mask-t-to-72",
+  "mask-t-to-75%",
+  "mask-t-to-80",
+  "mask-t-to-80%",
+  "mask-t-to-85%",
+  "mask-t-to-90%",
+  "mask-t-to-95%",
+  "mask-t-to-96",
+  "mask-t-to-100%",
+  "mask-t-to-current",
+  "mask-t-to-current/0",
+  "mask-t-to-current/5",
+  "mask-t-to-current/10",
+  "mask-t-to-current/15",
+  "mask-t-to-current/20",
+  "mask-t-to-current/25",
+  "mask-t-to-current/30",
+  "mask-t-to-current/35",
+  "mask-t-to-current/40",
+  "mask-t-to-current/45",
+  "mask-t-to-current/50",
+  "mask-t-to-current/55",
+  "mask-t-to-current/60",
+  "mask-t-to-current/65",
+  "mask-t-to-current/70",
+  "mask-t-to-current/75",
+  "mask-t-to-current/80",
+  "mask-t-to-current/85",
+  "mask-t-to-current/90",
+  "mask-t-to-current/95",
+  "mask-t-to-current/100",
+  "mask-t-to-inherit",
+  "mask-t-to-inherit/0",
+  "mask-t-to-inherit/5",
+  "mask-t-to-inherit/10",
+  "mask-t-to-inherit/15",
+  "mask-t-to-inherit/20",
+  "mask-t-to-inherit/25",
+  "mask-t-to-inherit/30",
+  "mask-t-to-inherit/35",
+  "mask-t-to-inherit/40",
+  "mask-t-to-inherit/45",
+  "mask-t-to-inherit/50",
+  "mask-t-to-inherit/55",
+  "mask-t-to-inherit/60",
+  "mask-t-to-inherit/65",
+  "mask-t-to-inherit/70",
+  "mask-t-to-inherit/75",
+  "mask-t-to-inherit/80",
+  "mask-t-to-inherit/85",
+  "mask-t-to-inherit/90",
+  "mask-t-to-inherit/95",
+  "mask-t-to-inherit/100",
+  "mask-t-to-transparent",
+  "mask-t-to-transparent/0",
+  "mask-t-to-transparent/5",
+  "mask-t-to-transparent/10",
+  "mask-t-to-transparent/15",
+  "mask-t-to-transparent/20",
+  "mask-t-to-transparent/25",
+  "mask-t-to-transparent/30",
+  "mask-t-to-transparent/35",
+  "mask-t-to-transparent/40",
+  "mask-t-to-transparent/45",
+  "mask-t-to-transparent/50",
+  "mask-t-to-transparent/55",
+  "mask-t-to-transparent/60",
+  "mask-t-to-transparent/65",
+  "mask-t-to-transparent/70",
+  "mask-t-to-transparent/75",
+  "mask-t-to-transparent/80",
+  "mask-t-to-transparent/85",
+  "mask-t-to-transparent/90",
+  "mask-t-to-transparent/95",
+  "mask-t-to-transparent/100",
   "mask-top",
   "mask-top-left",
   "mask-top-right",
   "mask-type-alpha",
   "mask-type-luminance",
+  "mask-x-from-0",
+  "mask-x-from-0%",
+  "mask-x-from-0.5",
+  "mask-x-from-1",
+  "mask-x-from-1.5",
+  "mask-x-from-2",
+  "mask-x-from-2.5",
+  "mask-x-from-3",
+  "mask-x-from-3.5",
+  "mask-x-from-4",
+  "mask-x-from-5",
+  "mask-x-from-5%",
+  "mask-x-from-6",
+  "mask-x-from-7",
+  "mask-x-from-8",
+  "mask-x-from-9",
+  "mask-x-from-10",
+  "mask-x-from-10%",
+  "mask-x-from-11",
+  "mask-x-from-12",
+  "mask-x-from-14",
+  "mask-x-from-15%",
+  "mask-x-from-16",
+  "mask-x-from-20",
+  "mask-x-from-20%",
+  "mask-x-from-24",
+  "mask-x-from-25%",
+  "mask-x-from-28",
+  "mask-x-from-30%",
+  "mask-x-from-32",
+  "mask-x-from-35%",
+  "mask-x-from-36",
+  "mask-x-from-40",
+  "mask-x-from-40%",
+  "mask-x-from-44",
+  "mask-x-from-45%",
+  "mask-x-from-48",
+  "mask-x-from-50%",
+  "mask-x-from-52",
+  "mask-x-from-55%",
+  "mask-x-from-56",
+  "mask-x-from-60",
+  "mask-x-from-60%",
+  "mask-x-from-64",
+  "mask-x-from-65%",
+  "mask-x-from-70%",
+  "mask-x-from-72",
+  "mask-x-from-75%",
+  "mask-x-from-80",
+  "mask-x-from-80%",
+  "mask-x-from-85%",
+  "mask-x-from-90%",
+  "mask-x-from-95%",
+  "mask-x-from-96",
+  "mask-x-from-100%",
+  "mask-x-from-current",
+  "mask-x-from-current/0",
+  "mask-x-from-current/5",
+  "mask-x-from-current/10",
+  "mask-x-from-current/15",
+  "mask-x-from-current/20",
+  "mask-x-from-current/25",
+  "mask-x-from-current/30",
+  "mask-x-from-current/35",
+  "mask-x-from-current/40",
+  "mask-x-from-current/45",
+  "mask-x-from-current/50",
+  "mask-x-from-current/55",
+  "mask-x-from-current/60",
+  "mask-x-from-current/65",
+  "mask-x-from-current/70",
+  "mask-x-from-current/75",
+  "mask-x-from-current/80",
+  "mask-x-from-current/85",
+  "mask-x-from-current/90",
+  "mask-x-from-current/95",
+  "mask-x-from-current/100",
+  "mask-x-from-inherit",
+  "mask-x-from-inherit/0",
+  "mask-x-from-inherit/5",
+  "mask-x-from-inherit/10",
+  "mask-x-from-inherit/15",
+  "mask-x-from-inherit/20",
+  "mask-x-from-inherit/25",
+  "mask-x-from-inherit/30",
+  "mask-x-from-inherit/35",
+  "mask-x-from-inherit/40",
+  "mask-x-from-inherit/45",
+  "mask-x-from-inherit/50",
+  "mask-x-from-inherit/55",
+  "mask-x-from-inherit/60",
+  "mask-x-from-inherit/65",
+  "mask-x-from-inherit/70",
+  "mask-x-from-inherit/75",
+  "mask-x-from-inherit/80",
+  "mask-x-from-inherit/85",
+  "mask-x-from-inherit/90",
+  "mask-x-from-inherit/95",
+  "mask-x-from-inherit/100",
+  "mask-x-from-transparent",
+  "mask-x-from-transparent/0",
+  "mask-x-from-transparent/5",
+  "mask-x-from-transparent/10",
+  "mask-x-from-transparent/15",
+  "mask-x-from-transparent/20",
+  "mask-x-from-transparent/25",
+  "mask-x-from-transparent/30",
+  "mask-x-from-transparent/35",
+  "mask-x-from-transparent/40",
+  "mask-x-from-transparent/45",
+  "mask-x-from-transparent/50",
+  "mask-x-from-transparent/55",
+  "mask-x-from-transparent/60",
+  "mask-x-from-transparent/65",
+  "mask-x-from-transparent/70",
+  "mask-x-from-transparent/75",
+  "mask-x-from-transparent/80",
+  "mask-x-from-transparent/85",
+  "mask-x-from-transparent/90",
+  "mask-x-from-transparent/95",
+  "mask-x-from-transparent/100",
+  "mask-x-to-0",
+  "mask-x-to-0%",
+  "mask-x-to-0.5",
+  "mask-x-to-1",
+  "mask-x-to-1.5",
+  "mask-x-to-2",
+  "mask-x-to-2.5",
+  "mask-x-to-3",
+  "mask-x-to-3.5",
+  "mask-x-to-4",
+  "mask-x-to-5",
+  "mask-x-to-5%",
+  "mask-x-to-6",
+  "mask-x-to-7",
+  "mask-x-to-8",
+  "mask-x-to-9",
+  "mask-x-to-10",
+  "mask-x-to-10%",
+  "mask-x-to-11",
+  "mask-x-to-12",
+  "mask-x-to-14",
+  "mask-x-to-15%",
+  "mask-x-to-16",
+  "mask-x-to-20",
+  "mask-x-to-20%",
+  "mask-x-to-24",
+  "mask-x-to-25%",
+  "mask-x-to-28",
+  "mask-x-to-30%",
+  "mask-x-to-32",
+  "mask-x-to-35%",
+  "mask-x-to-36",
+  "mask-x-to-40",
+  "mask-x-to-40%",
+  "mask-x-to-44",
+  "mask-x-to-45%",
+  "mask-x-to-48",
+  "mask-x-to-50%",
+  "mask-x-to-52",
+  "mask-x-to-55%",
+  "mask-x-to-56",
+  "mask-x-to-60",
+  "mask-x-to-60%",
+  "mask-x-to-64",
+  "mask-x-to-65%",
+  "mask-x-to-70%",
+  "mask-x-to-72",
+  "mask-x-to-75%",
+  "mask-x-to-80",
+  "mask-x-to-80%",
+  "mask-x-to-85%",
+  "mask-x-to-90%",
+  "mask-x-to-95%",
+  "mask-x-to-96",
+  "mask-x-to-100%",
+  "mask-x-to-current",
+  "mask-x-to-current/0",
+  "mask-x-to-current/5",
+  "mask-x-to-current/10",
+  "mask-x-to-current/15",
+  "mask-x-to-current/20",
+  "mask-x-to-current/25",
+  "mask-x-to-current/30",
+  "mask-x-to-current/35",
+  "mask-x-to-current/40",
+  "mask-x-to-current/45",
+  "mask-x-to-current/50",
+  "mask-x-to-current/55",
+  "mask-x-to-current/60",
+  "mask-x-to-current/65",
+  "mask-x-to-current/70",
+  "mask-x-to-current/75",
+  "mask-x-to-current/80",
+  "mask-x-to-current/85",
+  "mask-x-to-current/90",
+  "mask-x-to-current/95",
+  "mask-x-to-current/100",
+  "mask-x-to-inherit",
+  "mask-x-to-inherit/0",
+  "mask-x-to-inherit/5",
+  "mask-x-to-inherit/10",
+  "mask-x-to-inherit/15",
+  "mask-x-to-inherit/20",
+  "mask-x-to-inherit/25",
+  "mask-x-to-inherit/30",
+  "mask-x-to-inherit/35",
+  "mask-x-to-inherit/40",
+  "mask-x-to-inherit/45",
+  "mask-x-to-inherit/50",
+  "mask-x-to-inherit/55",
+  "mask-x-to-inherit/60",
+  "mask-x-to-inherit/65",
+  "mask-x-to-inherit/70",
+  "mask-x-to-inherit/75",
+  "mask-x-to-inherit/80",
+  "mask-x-to-inherit/85",
+  "mask-x-to-inherit/90",
+  "mask-x-to-inherit/95",
+  "mask-x-to-inherit/100",
+  "mask-x-to-transparent",
+  "mask-x-to-transparent/0",
+  "mask-x-to-transparent/5",
+  "mask-x-to-transparent/10",
+  "mask-x-to-transparent/15",
+  "mask-x-to-transparent/20",
+  "mask-x-to-transparent/25",
+  "mask-x-to-transparent/30",
+  "mask-x-to-transparent/35",
+  "mask-x-to-transparent/40",
+  "mask-x-to-transparent/45",
+  "mask-x-to-transparent/50",
+  "mask-x-to-transparent/55",
+  "mask-x-to-transparent/60",
+  "mask-x-to-transparent/65",
+  "mask-x-to-transparent/70",
+  "mask-x-to-transparent/75",
+  "mask-x-to-transparent/80",
+  "mask-x-to-transparent/85",
+  "mask-x-to-transparent/90",
+  "mask-x-to-transparent/95",
+  "mask-x-to-transparent/100",
+  "mask-y-from-0",
+  "mask-y-from-0%",
+  "mask-y-from-0.5",
+  "mask-y-from-1",
+  "mask-y-from-1.5",
+  "mask-y-from-2",
+  "mask-y-from-2.5",
+  "mask-y-from-3",
+  "mask-y-from-3.5",
+  "mask-y-from-4",
+  "mask-y-from-5",
+  "mask-y-from-5%",
+  "mask-y-from-6",
+  "mask-y-from-7",
+  "mask-y-from-8",
+  "mask-y-from-9",
+  "mask-y-from-10",
+  "mask-y-from-10%",
+  "mask-y-from-11",
+  "mask-y-from-12",
+  "mask-y-from-14",
+  "mask-y-from-15%",
+  "mask-y-from-16",
+  "mask-y-from-20",
+  "mask-y-from-20%",
+  "mask-y-from-24",
+  "mask-y-from-25%",
+  "mask-y-from-28",
+  "mask-y-from-30%",
+  "mask-y-from-32",
+  "mask-y-from-35%",
+  "mask-y-from-36",
+  "mask-y-from-40",
+  "mask-y-from-40%",
+  "mask-y-from-44",
+  "mask-y-from-45%",
+  "mask-y-from-48",
+  "mask-y-from-50%",
+  "mask-y-from-52",
+  "mask-y-from-55%",
+  "mask-y-from-56",
+  "mask-y-from-60",
+  "mask-y-from-60%",
+  "mask-y-from-64",
+  "mask-y-from-65%",
+  "mask-y-from-70%",
+  "mask-y-from-72",
+  "mask-y-from-75%",
+  "mask-y-from-80",
+  "mask-y-from-80%",
+  "mask-y-from-85%",
+  "mask-y-from-90%",
+  "mask-y-from-95%",
+  "mask-y-from-96",
+  "mask-y-from-100%",
+  "mask-y-from-current",
+  "mask-y-from-current/0",
+  "mask-y-from-current/5",
+  "mask-y-from-current/10",
+  "mask-y-from-current/15",
+  "mask-y-from-current/20",
+  "mask-y-from-current/25",
+  "mask-y-from-current/30",
+  "mask-y-from-current/35",
+  "mask-y-from-current/40",
+  "mask-y-from-current/45",
+  "mask-y-from-current/50",
+  "mask-y-from-current/55",
+  "mask-y-from-current/60",
+  "mask-y-from-current/65",
+  "mask-y-from-current/70",
+  "mask-y-from-current/75",
+  "mask-y-from-current/80",
+  "mask-y-from-current/85",
+  "mask-y-from-current/90",
+  "mask-y-from-current/95",
+  "mask-y-from-current/100",
+  "mask-y-from-inherit",
+  "mask-y-from-inherit/0",
+  "mask-y-from-inherit/5",
+  "mask-y-from-inherit/10",
+  "mask-y-from-inherit/15",
+  "mask-y-from-inherit/20",
+  "mask-y-from-inherit/25",
+  "mask-y-from-inherit/30",
+  "mask-y-from-inherit/35",
+  "mask-y-from-inherit/40",
+  "mask-y-from-inherit/45",
+  "mask-y-from-inherit/50",
+  "mask-y-from-inherit/55",
+  "mask-y-from-inherit/60",
+  "mask-y-from-inherit/65",
+  "mask-y-from-inherit/70",
+  "mask-y-from-inherit/75",
+  "mask-y-from-inherit/80",
+  "mask-y-from-inherit/85",
+  "mask-y-from-inherit/90",
+  "mask-y-from-inherit/95",
+  "mask-y-from-inherit/100",
+  "mask-y-from-transparent",
+  "mask-y-from-transparent/0",
+  "mask-y-from-transparent/5",
+  "mask-y-from-transparent/10",
+  "mask-y-from-transparent/15",
+  "mask-y-from-transparent/20",
+  "mask-y-from-transparent/25",
+  "mask-y-from-transparent/30",
+  "mask-y-from-transparent/35",
+  "mask-y-from-transparent/40",
+  "mask-y-from-transparent/45",
+  "mask-y-from-transparent/50",
+  "mask-y-from-transparent/55",
+  "mask-y-from-transparent/60",
+  "mask-y-from-transparent/65",
+  "mask-y-from-transparent/70",
+  "mask-y-from-transparent/75",
+  "mask-y-from-transparent/80",
+  "mask-y-from-transparent/85",
+  "mask-y-from-transparent/90",
+  "mask-y-from-transparent/95",
+  "mask-y-from-transparent/100",
+  "mask-y-to-0",
+  "mask-y-to-0%",
+  "mask-y-to-0.5",
+  "mask-y-to-1",
+  "mask-y-to-1.5",
+  "mask-y-to-2",
+  "mask-y-to-2.5",
+  "mask-y-to-3",
+  "mask-y-to-3.5",
+  "mask-y-to-4",
+  "mask-y-to-5",
+  "mask-y-to-5%",
+  "mask-y-to-6",
+  "mask-y-to-7",
+  "mask-y-to-8",
+  "mask-y-to-9",
+  "mask-y-to-10",
+  "mask-y-to-10%",
+  "mask-y-to-11",
+  "mask-y-to-12",
+  "mask-y-to-14",
+  "mask-y-to-15%",
+  "mask-y-to-16",
+  "mask-y-to-20",
+  "mask-y-to-20%",
+  "mask-y-to-24",
+  "mask-y-to-25%",
+  "mask-y-to-28",
+  "mask-y-to-30%",
+  "mask-y-to-32",
+  "mask-y-to-35%",
+  "mask-y-to-36",
+  "mask-y-to-40",
+  "mask-y-to-40%",
+  "mask-y-to-44",
+  "mask-y-to-45%",
+  "mask-y-to-48",
+  "mask-y-to-50%",
+  "mask-y-to-52",
+  "mask-y-to-55%",
+  "mask-y-to-56",
+  "mask-y-to-60",
+  "mask-y-to-60%",
+  "mask-y-to-64",
+  "mask-y-to-65%",
+  "mask-y-to-70%",
+  "mask-y-to-72",
+  "mask-y-to-75%",
+  "mask-y-to-80",
+  "mask-y-to-80%",
+  "mask-y-to-85%",
+  "mask-y-to-90%",
+  "mask-y-to-95%",
+  "mask-y-to-96",
+  "mask-y-to-100%",
+  "mask-y-to-current",
+  "mask-y-to-current/0",
+  "mask-y-to-current/5",
+  "mask-y-to-current/10",
+  "mask-y-to-current/15",
+  "mask-y-to-current/20",
+  "mask-y-to-current/25",
+  "mask-y-to-current/30",
+  "mask-y-to-current/35",
+  "mask-y-to-current/40",
+  "mask-y-to-current/45",
+  "mask-y-to-current/50",
+  "mask-y-to-current/55",
+  "mask-y-to-current/60",
+  "mask-y-to-current/65",
+  "mask-y-to-current/70",
+  "mask-y-to-current/75",
+  "mask-y-to-current/80",
+  "mask-y-to-current/85",
+  "mask-y-to-current/90",
+  "mask-y-to-current/95",
+  "mask-y-to-current/100",
+  "mask-y-to-inherit",
+  "mask-y-to-inherit/0",
+  "mask-y-to-inherit/5",
+  "mask-y-to-inherit/10",
+  "mask-y-to-inherit/15",
+  "mask-y-to-inherit/20",
+  "mask-y-to-inherit/25",
+  "mask-y-to-inherit/30",
+  "mask-y-to-inherit/35",
+  "mask-y-to-inherit/40",
+  "mask-y-to-inherit/45",
+  "mask-y-to-inherit/50",
+  "mask-y-to-inherit/55",
+  "mask-y-to-inherit/60",
+  "mask-y-to-inherit/65",
+  "mask-y-to-inherit/70",
+  "mask-y-to-inherit/75",
+  "mask-y-to-inherit/80",
+  "mask-y-to-inherit/85",
+  "mask-y-to-inherit/90",
+  "mask-y-to-inherit/95",
+  "mask-y-to-inherit/100",
+  "mask-y-to-transparent",
+  "mask-y-to-transparent/0",
+  "mask-y-to-transparent/5",
+  "mask-y-to-transparent/10",
+  "mask-y-to-transparent/15",
+  "mask-y-to-transparent/20",
+  "mask-y-to-transparent/25",
+  "mask-y-to-transparent/30",
+  "mask-y-to-transparent/35",
+  "mask-y-to-transparent/40",
+  "mask-y-to-transparent/45",
+  "mask-y-to-transparent/50",
+  "mask-y-to-transparent/55",
+  "mask-y-to-transparent/60",
+  "mask-y-to-transparent/65",
+  "mask-y-to-transparent/70",
+  "mask-y-to-transparent/75",
+  "mask-y-to-transparent/80",
+  "mask-y-to-transparent/85",
+  "mask-y-to-transparent/90",
+  "mask-y-to-transparent/95",
+  "mask-y-to-transparent/100",
   "max-h-0",
   "max-h-0.5",
   "max-h-1",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 963b612238e7..eea935baddaa 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11915,6 +11915,2885 @@ test('mask', async () => {
     }"
   `)
 })
+
+test('mask-t-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-from-0',
+        'mask-t-from-1.5',
+        'mask-t-from-2',
+        'mask-t-from-0%',
+        'mask-t-from-2%',
+        'mask-t-from-[0px]',
+        'mask-t-from-[0%]',
+        'mask-t-from-(--my-var)',
+        'mask-t-from-(color:--my-var)',
+        'mask-t-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-t-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\(--my-var\\), .mask-t-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-t-from',
+      'mask-t-from--1.5',
+      'mask-t-from--2',
+      'mask-t-from--5%',
+      'mask-t-from-unknown',
+      'mask-t-from-unknown%',
+
+      '-mask-t-from-0',
+      '-mask-t-from-1.5',
+      '-mask-t-from-2',
+      '-mask-t-from-0%',
+      '-mask-t-from-2%',
+      '-mask-t-from-[0px]',
+      '-mask-t-from-[0%]',
+
+      '-mask-t-from-(--my-var)',
+      '-mask-t-from-(color:--my-var)',
+      '-mask-t-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-t-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-to-0',
+        'mask-t-to-1.5',
+        'mask-t-to-2',
+        'mask-t-to-0%',
+        'mask-t-to-2%',
+        'mask-t-to-[0px]',
+        'mask-t-to-[0%]',
+        'mask-t-to-(--my-var)',
+        'mask-t-to-(color:--my-var)',
+        'mask-t-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-t-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\(--my-var\\), .mask-t-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-t-to',
+      'mask-t-to--1.5',
+      'mask-t-to--2',
+      'mask-t-to--5%',
+      'mask-t-to-unknown',
+      'mask-t-to-unknown%',
+
+      '-mask-t-to-0',
+      '-mask-t-to-1.5',
+      '-mask-t-to-2',
+      '-mask-t-to-0%',
+      '-mask-t-to-2%',
+      '-mask-t-to-[0px]',
+      '-mask-t-to-[0%]',
+
+      '-mask-t-to-(--my-var)',
+      '-mask-t-to-(color:--my-var)',
+      '-mask-t-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-r-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-from-0',
+        'mask-r-from-1.5',
+        'mask-r-from-2',
+        'mask-r-from-0%',
+        'mask-r-from-2%',
+        'mask-r-from-[0px]',
+        'mask-r-from-[0%]',
+
+        'mask-r-from-(--my-var)',
+        'mask-r-from-(color:--my-var)',
+        'mask-r-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-r-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\(--my-var\\), .mask-r-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-r-from',
+      'mask-r-from--1.5',
+      'mask-r-from--2',
+      'mask-r-from--5%',
+      'mask-r-from-unknown',
+      'mask-r-from-unknown%',
+
+      '-mask-r-from-0',
+      '-mask-r-from-1.5',
+      '-mask-r-from-2',
+      '-mask-r-from-0%',
+      '-mask-r-from-2%',
+      '-mask-r-from-[0px]',
+      '-mask-r-from-[0%]',
+
+      '-mask-r-from-(--my-var)',
+      '-mask-r-from-(color:--my-var)',
+      '-mask-r-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-r-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-to-0',
+        'mask-r-to-1.5',
+        'mask-r-to-2',
+        'mask-r-to-0%',
+        'mask-r-to-2%',
+        'mask-r-to-[0px]',
+        'mask-r-to-[0%]',
+
+        'mask-r-to-(--my-var)',
+        'mask-r-to-(color:--my-var)',
+        'mask-r-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-r-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\(--my-var\\), .mask-r-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-r-to',
+      'mask-r-to--1.5',
+      'mask-r-to--2',
+      'mask-r-to--5%',
+      'mask-r-to-unknown',
+      'mask-r-to-unknown%',
+
+      '-mask-r-to-0',
+      '-mask-r-to-1.5',
+      '-mask-r-to-2',
+      '-mask-r-to-0%',
+      '-mask-r-to-2%',
+      '-mask-r-to-[0px]',
+      '-mask-r-to-[0%]',
+
+      '-mask-r-to-(--my-var)',
+      '-mask-r-to-(color:--my-var)',
+      '-mask-r-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-b-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-from-0',
+        'mask-b-from-1.5',
+        'mask-b-from-2',
+        'mask-b-from-0%',
+        'mask-b-from-2%',
+        'mask-b-from-[0px]',
+        'mask-b-from-[0%]',
+
+        'mask-b-from-(--my-var)',
+        'mask-b-from-(color:--my-var)',
+        'mask-b-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-b-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\(--my-var\\), .mask-b-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-b-from',
+      'mask-b-from--1.5',
+      'mask-b-from--2',
+      'mask-b-from--5%',
+      'mask-b-from-unknown',
+      'mask-b-from-unknown%',
+
+      '-mask-b-from-0',
+      '-mask-b-from-1.5',
+      '-mask-b-from-2',
+      '-mask-b-from-0%',
+      '-mask-b-from-2%',
+      '-mask-b-from-[0px]',
+      '-mask-b-from-[0%]',
+
+      '-mask-b-from-(--my-var)',
+      '-mask-b-from-(color:--my-var)',
+      '-mask-b-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-b-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-to-0',
+        'mask-b-to-1.5',
+        'mask-b-to-2',
+        'mask-b-to-0%',
+        'mask-b-to-2%',
+        'mask-b-to-[0px]',
+        'mask-b-to-[0%]',
+
+        'mask-b-to-(--my-var)',
+        'mask-b-to-(color:--my-var)',
+        'mask-b-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-b-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\(--my-var\\), .mask-b-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-b-to',
+      'mask-b-to--1.5',
+      'mask-b-to--2',
+      'mask-b-to--5%',
+      'mask-b-to-unknown',
+      'mask-b-to-unknown%',
+
+      '-mask-b-to-0',
+      '-mask-b-to-1.5',
+      '-mask-b-to-2',
+      '-mask-b-to-0%',
+      '-mask-b-to-2%',
+      '-mask-b-to-[0px]',
+      '-mask-b-to-[0%]',
+
+      '-mask-b-to-(--my-var)',
+      '-mask-b-to-(color:--my-var)',
+      '-mask-b-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-l-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-from-0',
+        'mask-l-from-1.5',
+        'mask-l-from-2',
+        'mask-l-from-0%',
+        'mask-l-from-2%',
+        'mask-l-from-[0px]',
+        'mask-l-from-[0%]',
+
+        'mask-l-from-(--my-var)',
+        'mask-l-from-(color:--my-var)',
+        'mask-l-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-l-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\(--my-var\\), .mask-l-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-l-from',
+      'mask-l-from--1.5',
+      'mask-l-from--2',
+      'mask-l-from--5%',
+      'mask-l-from-unknown',
+      'mask-l-from-unknown%',
+
+      '-mask-l-from-0',
+      '-mask-l-from-1.5',
+      '-mask-l-from-2',
+      '-mask-l-from-0%',
+      '-mask-l-from-2%',
+      '-mask-l-from-[0px]',
+      '-mask-l-from-[0%]',
+
+      '-mask-l-from-(--my-var)',
+      '-mask-l-from-(color:--my-var)',
+      '-mask-l-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-l-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-to-0',
+        'mask-l-to-1.5',
+        'mask-l-to-2',
+        'mask-l-to-0%',
+        'mask-l-to-2%',
+        'mask-l-to-[0px]',
+        'mask-l-to-[0%]',
+
+        'mask-l-to-(--my-var)',
+        'mask-l-to-(color:--my-var)',
+        'mask-l-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-l-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\(--my-var\\), .mask-l-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-l-to',
+      'mask-l-to--1.5',
+      'mask-l-to--2',
+      'mask-l-to--5%',
+      'mask-l-to-unknown',
+      'mask-l-to-unknown%',
+
+      '-mask-l-to-0',
+      '-mask-l-to-1.5',
+      '-mask-l-to-2',
+      '-mask-l-to-0%',
+      '-mask-l-to-2%',
+      '-mask-l-to-[0px]',
+      '-mask-l-to-[0%]',
+
+      '-mask-l-to-(--my-var)',
+      '-mask-l-to-(color:--my-var)',
+      '-mask-l-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-x-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-from-0',
+        'mask-x-from-1.5',
+        'mask-x-from-2',
+        'mask-x-from-0%',
+        'mask-x-from-2%',
+        'mask-x-from-[0px]',
+        'mask-x-from-[0%]',
+
+        'mask-x-from-(--my-var)',
+        'mask-x-from-(color:--my-var)',
+        'mask-x-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-x-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-color: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\(--my-var\\), .mask-x-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 2);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 2%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0px;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-x-from',
+      'mask-x-from--1.5',
+      'mask-x-from--2',
+      'mask-x-from--5%',
+      'mask-x-from-unknown',
+      'mask-x-from-unknown%',
+
+      '-mask-x-from-0',
+      '-mask-x-from-1.5',
+      '-mask-x-from-2',
+      '-mask-x-from-0%',
+      '-mask-x-from-2%',
+      '-mask-x-from-[0px]',
+      '-mask-x-from-[0%]',
+
+      '-mask-x-from-(--my-var)',
+      '-mask-x-from-(color:--my-var)',
+      '-mask-x-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-x-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-to-0',
+        'mask-x-to-1.5',
+        'mask-x-to-2',
+        'mask-x-to-0%',
+        'mask-x-to-2%',
+        'mask-x-to-[0px]',
+        'mask-x-to-[0%]',
+
+        'mask-x-to-(--my-var)',
+        'mask-x-to-(color:--my-var)',
+        'mask-x-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-x-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-color: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\(--my-var\\), .mask-x-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 2);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 2%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0px;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-x-to',
+      'mask-x-to--1.5',
+      'mask-x-to--2',
+      'mask-x-to--5%',
+      'mask-x-to-unknown',
+      'mask-x-to-unknown%',
+
+      '-mask-x-to-0',
+      '-mask-x-to-1.5',
+      '-mask-x-to-2',
+      '-mask-x-to-0%',
+      '-mask-x-to-2%',
+      '-mask-x-to-[0px]',
+      '-mask-x-to-[0%]',
+
+      '-mask-x-to-(--my-var)',
+      '-mask-x-to-(color:--my-var)',
+      '-mask-x-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-y-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-from-0',
+        'mask-y-from-1.5',
+        'mask-y-from-2',
+        'mask-y-from-0%',
+        'mask-y-from-2%',
+        'mask-y-from-[0px]',
+        'mask-y-from-[0%]',
+
+        'mask-y-from-(--my-var)',
+        'mask-y-from-(color:--my-var)',
+        'mask-y-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-y-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-color: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\(--my-var\\), .mask-y-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 2);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 2%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0px;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-y-from',
+      'mask-y-from--1.5',
+      'mask-y-from--2',
+      'mask-y-from--5%',
+      'mask-y-from-unknown',
+      'mask-y-from-unknown%',
+
+      '-mask-y-from-0',
+      '-mask-y-from-1.5',
+      '-mask-y-from-2',
+      '-mask-y-from-0%',
+      '-mask-y-from-2%',
+      '-mask-y-from-[0px]',
+      '-mask-y-from-[0%]',
+
+      '-mask-y-from-(--my-var)',
+      '-mask-y-from-(color:--my-var)',
+      '-mask-y-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-y-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-to-0',
+        'mask-y-to-1.5',
+        'mask-y-to-2',
+        'mask-y-to-0%',
+        'mask-y-to-2%',
+        'mask-y-to-[0px]',
+        'mask-y-to-[0%]',
+
+        'mask-y-to-(--my-var)',
+        'mask-y-to-(color:--my-var)',
+        'mask-y-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-y-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-color: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\(--my-var\\), .mask-y-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 2);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 2%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0px;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-y-to',
+      'mask-y-to--1.5',
+      'mask-y-to--2',
+      'mask-y-to--5%',
+      'mask-y-to-unknown',
+      'mask-y-to-unknown%',
+
+      '-mask-y-to-0',
+      '-mask-y-to-1.5',
+      '-mask-y-to-2',
+      '-mask-y-to-0%',
+      '-mask-y-to-2%',
+      '-mask-y-to-[0px]',
+      '-mask-y-to-[0%]',
+
+      '-mask-y-to-(--my-var)',
+      '-mask-y-to-(color:--my-var)',
+      '-mask-y-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index d9b94d2390c6..b822596db464 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2942,6 +2942,240 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-origin-fill', [['mask-origin', 'fill-box']])
     staticUtility('mask-origin-stroke', [['mask-origin', 'stroke-box']])
     staticUtility('mask-origin-view', [['mask-origin', 'view-box']])
+
+    /**
+     * @css `mask-image`
+     */
+
+    staticUtility('mask-none', [['mask-image', 'none']])
+
+    let maskPropertiesGradient = () =>
+      atRoot([
+        property('--tw-mask-linear', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-radial', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-conic', 'linear-gradient(#000, #000)'),
+      ])
+
+    type MaskStopDescription = {
+      color: (value: string) => AstNode[] | undefined
+      position: (value: string) => AstNode[] | undefined
+    }
+
+    function maskStopUtility(classRoot: string, desc: MaskStopDescription) {
+      utilities.functional(classRoot, (candidate) => {
+        if (!candidate.value) return
+
+        // Arbitrary values
+        if (candidate.value.kind === 'arbitrary') {
+          let value: string | null = candidate.value.value
+          let type =
+            candidate.value.dataType ?? inferDataType(value, ['length', 'percentage', 'color'])
+
+          switch (type) {
+            case 'color': {
+              value = asColor(value, candidate.modifier, theme)
+              if (value === null) return
+
+              return desc.color(value)
+            }
+            case 'percentage': {
+              if (candidate.modifier) return
+              if (!isPositiveInteger(value.slice(0, -1))) return
+
+              return desc.position(value)
+            }
+            default: {
+              if (candidate.modifier) return
+
+              return desc.position(value)
+            }
+          }
+        }
+
+        // Known values: Color Stops
+        {
+          let value = resolveThemeColor(candidate, theme, ['--background-color', '--color'])
+          if (value) {
+            return desc.color(value)
+          }
+        }
+
+        // Known values: Positions
+        {
+          if (candidate.modifier) return
+
+          let type = inferDataType(candidate.value.value, ['number', 'percentage'])
+          if (!type) return
+
+          switch (type) {
+            case 'number': {
+              let multiplier = theme.resolve(null, ['--spacing'])
+              if (!multiplier) return
+              if (!isValidSpacingMultiplier(candidate.value.value)) return
+
+              return desc.position(`--spacing(${candidate.value.value})`)
+            }
+
+            case 'percentage': {
+              if (!isPositiveInteger(candidate.value.value.slice(0, -1))) return
+              return desc.position(candidate.value.value)
+            }
+
+            default: {
+              return
+            }
+          }
+        }
+      })
+
+      suggest(classRoot, () => [
+        {
+          values: ['current', 'inherit', 'transparent'],
+          valueThemeKeys: ['--background-color', '--color'],
+          modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        },
+        {
+          values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
+          valueThemeKeys: ['--gradient-color-stop-positions'],
+        },
+      ])
+
+      suggest(classRoot, () => [
+        // Percentages
+        {
+          values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
+        },
+
+        // Spacing Scale
+        {
+          values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
+        },
+
+        // Colors
+        {
+          values: ['current', 'inherit', 'transparent'],
+          valueThemeKeys: ['--background-color', '--color'],
+          modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        },
+      ])
+    }
+
+    /**
+     * Edge masks
+     */
+
+    let maskPropertiesEdge = () =>
+      atRoot([
+        property('--tw-mask-left', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-right', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-bottom', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-top', 'linear-gradient(#000, #000)'),
+      ])
+
+    type MaskEdge = 'top' | 'right' | 'bottom' | 'left'
+    type MaskStop = 'from' | 'to'
+
+    function maskEdgeUtility(name: string, stop: MaskStop, edges: Record<MaskEdge, boolean>) {
+      maskStopUtility(name, {
+        color(value) {
+          let nodes: AstNode[] = [
+            // Common @property declarations
+            maskPropertiesGradient(),
+            maskPropertiesEdge(),
+
+            // Common properties to all edge utilities
+            decl(
+              'mask-image',
+              'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)',
+            ),
+            decl('mask-composite', 'intersect'),
+            decl(
+              '--tw-mask-linear',
+              'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
+            ),
+          ]
+
+          for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
+            if (!edges[edge]) continue
+
+            nodes.push(
+              decl(
+                `--tw-mask-${edge}`,
+                `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
+              ),
+            )
+
+            nodes.push(
+              atRoot([
+                property(`--tw-mask-${edge}-from-position`, '0%'),
+                property(`--tw-mask-${edge}-to-position`, '100%'),
+                property(`--tw-mask-${edge}-from-color`, 'black'),
+                property(`--tw-mask-${edge}-to-color`, 'transparent'),
+              ]),
+            )
+
+            nodes.push(decl(`--tw-mask-${edge}-${stop}-color`, value))
+          }
+
+          return nodes
+        },
+        position(value) {
+          let nodes: AstNode[] = [
+            // Common @property declarations
+            maskPropertiesGradient(),
+            maskPropertiesEdge(),
+
+            // Common properties to all edge utilities
+            decl(
+              'mask-image',
+              'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)',
+            ),
+            decl('mask-composite', 'intersect'),
+            decl(
+              '--tw-mask-linear',
+              'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
+            ),
+          ]
+
+          for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
+            if (!edges[edge]) continue
+
+            nodes.push(
+              decl(
+                `--tw-mask-${edge}`,
+                `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
+              ),
+            )
+
+            nodes.push(
+              atRoot([
+                property(`--tw-mask-${edge}-from-position`, '0%'),
+                property(`--tw-mask-${edge}-to-position`, '100%'),
+                property(`--tw-mask-${edge}-from-color`, 'black'),
+                property(`--tw-mask-${edge}-to-color`, 'transparent'),
+              ]),
+            )
+
+            nodes.push(decl(`--tw-mask-${edge}-${stop}-position`, value))
+          }
+
+          return nodes
+        },
+      })
+    }
+
+    maskEdgeUtility('mask-x-from', 'from', { top: false, right: true, bottom: false, left: true })
+    maskEdgeUtility('mask-x-to', 'to', { top: false, right: true, bottom: false, left: true })
+    maskEdgeUtility('mask-y-from', 'from', { top: true, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-y-to', 'to', { top: true, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-t-from', 'from', { top: true, right: false, bottom: false, left: false })
+    maskEdgeUtility('mask-t-to', 'to', { top: true, right: false, bottom: false, left: false })
+    maskEdgeUtility('mask-r-from', 'from', { top: false, right: true, bottom: false, left: false })
+    maskEdgeUtility('mask-r-to', 'to', { top: false, right: true, bottom: false, left: false })
+    maskEdgeUtility('mask-b-from', 'from', { top: false, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-b-to', 'to', { top: false, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-l-from', 'from', { top: false, right: false, bottom: false, left: true })
+    maskEdgeUtility('mask-l-to', 'to', { top: false, right: false, bottom: false, left: true })
   }
 
   /**

From 3c63cc60a61dfedb3cffed870a925ddc257297a2 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 26 Mar 2025 11:32:37 -0400
Subject: [PATCH 13/29] Add utilities for `mask-linear-*`

---
 .../__snapshots__/intellisense.test.ts.snap   | 260 +++++++++
 packages/tailwindcss/src/utilities.test.ts    | 520 ++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 109 ++++
 3 files changed, 889 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index a64650f6d07c..e4acdc67f817 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -686,6 +686,15 @@ exports[`getClassList 1`] = `
   "-m-80",
   "-m-96",
   "-m-px",
+  "-mask-linear-0",
+  "-mask-linear-1",
+  "-mask-linear-2",
+  "-mask-linear-3",
+  "-mask-linear-6",
+  "-mask-linear-12",
+  "-mask-linear-45",
+  "-mask-linear-90",
+  "-mask-linear-180",
   "-mb-0",
   "-mb-0.5",
   "-mb-1",
@@ -5606,6 +5615,257 @@ exports[`getClassList 1`] = `
   "mask-l-to-transparent/95",
   "mask-l-to-transparent/100",
   "mask-left",
+  "mask-linear-0",
+  "mask-linear-1",
+  "mask-linear-2",
+  "mask-linear-3",
+  "mask-linear-6",
+  "mask-linear-12",
+  "mask-linear-45",
+  "mask-linear-90",
+  "mask-linear-180",
+  "mask-linear-from-0",
+  "mask-linear-from-0%",
+  "mask-linear-from-0.5",
+  "mask-linear-from-1",
+  "mask-linear-from-1.5",
+  "mask-linear-from-2",
+  "mask-linear-from-2.5",
+  "mask-linear-from-3",
+  "mask-linear-from-3.5",
+  "mask-linear-from-4",
+  "mask-linear-from-5",
+  "mask-linear-from-5%",
+  "mask-linear-from-6",
+  "mask-linear-from-7",
+  "mask-linear-from-8",
+  "mask-linear-from-9",
+  "mask-linear-from-10",
+  "mask-linear-from-10%",
+  "mask-linear-from-11",
+  "mask-linear-from-12",
+  "mask-linear-from-14",
+  "mask-linear-from-15%",
+  "mask-linear-from-16",
+  "mask-linear-from-20",
+  "mask-linear-from-20%",
+  "mask-linear-from-24",
+  "mask-linear-from-25%",
+  "mask-linear-from-28",
+  "mask-linear-from-30%",
+  "mask-linear-from-32",
+  "mask-linear-from-35%",
+  "mask-linear-from-36",
+  "mask-linear-from-40",
+  "mask-linear-from-40%",
+  "mask-linear-from-44",
+  "mask-linear-from-45%",
+  "mask-linear-from-48",
+  "mask-linear-from-50%",
+  "mask-linear-from-52",
+  "mask-linear-from-55%",
+  "mask-linear-from-56",
+  "mask-linear-from-60",
+  "mask-linear-from-60%",
+  "mask-linear-from-64",
+  "mask-linear-from-65%",
+  "mask-linear-from-70%",
+  "mask-linear-from-72",
+  "mask-linear-from-75%",
+  "mask-linear-from-80",
+  "mask-linear-from-80%",
+  "mask-linear-from-85%",
+  "mask-linear-from-90%",
+  "mask-linear-from-95%",
+  "mask-linear-from-96",
+  "mask-linear-from-100%",
+  "mask-linear-from-current",
+  "mask-linear-from-current/0",
+  "mask-linear-from-current/5",
+  "mask-linear-from-current/10",
+  "mask-linear-from-current/15",
+  "mask-linear-from-current/20",
+  "mask-linear-from-current/25",
+  "mask-linear-from-current/30",
+  "mask-linear-from-current/35",
+  "mask-linear-from-current/40",
+  "mask-linear-from-current/45",
+  "mask-linear-from-current/50",
+  "mask-linear-from-current/55",
+  "mask-linear-from-current/60",
+  "mask-linear-from-current/65",
+  "mask-linear-from-current/70",
+  "mask-linear-from-current/75",
+  "mask-linear-from-current/80",
+  "mask-linear-from-current/85",
+  "mask-linear-from-current/90",
+  "mask-linear-from-current/95",
+  "mask-linear-from-current/100",
+  "mask-linear-from-inherit",
+  "mask-linear-from-inherit/0",
+  "mask-linear-from-inherit/5",
+  "mask-linear-from-inherit/10",
+  "mask-linear-from-inherit/15",
+  "mask-linear-from-inherit/20",
+  "mask-linear-from-inherit/25",
+  "mask-linear-from-inherit/30",
+  "mask-linear-from-inherit/35",
+  "mask-linear-from-inherit/40",
+  "mask-linear-from-inherit/45",
+  "mask-linear-from-inherit/50",
+  "mask-linear-from-inherit/55",
+  "mask-linear-from-inherit/60",
+  "mask-linear-from-inherit/65",
+  "mask-linear-from-inherit/70",
+  "mask-linear-from-inherit/75",
+  "mask-linear-from-inherit/80",
+  "mask-linear-from-inherit/85",
+  "mask-linear-from-inherit/90",
+  "mask-linear-from-inherit/95",
+  "mask-linear-from-inherit/100",
+  "mask-linear-from-transparent",
+  "mask-linear-from-transparent/0",
+  "mask-linear-from-transparent/5",
+  "mask-linear-from-transparent/10",
+  "mask-linear-from-transparent/15",
+  "mask-linear-from-transparent/20",
+  "mask-linear-from-transparent/25",
+  "mask-linear-from-transparent/30",
+  "mask-linear-from-transparent/35",
+  "mask-linear-from-transparent/40",
+  "mask-linear-from-transparent/45",
+  "mask-linear-from-transparent/50",
+  "mask-linear-from-transparent/55",
+  "mask-linear-from-transparent/60",
+  "mask-linear-from-transparent/65",
+  "mask-linear-from-transparent/70",
+  "mask-linear-from-transparent/75",
+  "mask-linear-from-transparent/80",
+  "mask-linear-from-transparent/85",
+  "mask-linear-from-transparent/90",
+  "mask-linear-from-transparent/95",
+  "mask-linear-from-transparent/100",
+  "mask-linear-to-0",
+  "mask-linear-to-0%",
+  "mask-linear-to-0.5",
+  "mask-linear-to-1",
+  "mask-linear-to-1.5",
+  "mask-linear-to-2",
+  "mask-linear-to-2.5",
+  "mask-linear-to-3",
+  "mask-linear-to-3.5",
+  "mask-linear-to-4",
+  "mask-linear-to-5",
+  "mask-linear-to-5%",
+  "mask-linear-to-6",
+  "mask-linear-to-7",
+  "mask-linear-to-8",
+  "mask-linear-to-9",
+  "mask-linear-to-10",
+  "mask-linear-to-10%",
+  "mask-linear-to-11",
+  "mask-linear-to-12",
+  "mask-linear-to-14",
+  "mask-linear-to-15%",
+  "mask-linear-to-16",
+  "mask-linear-to-20",
+  "mask-linear-to-20%",
+  "mask-linear-to-24",
+  "mask-linear-to-25%",
+  "mask-linear-to-28",
+  "mask-linear-to-30%",
+  "mask-linear-to-32",
+  "mask-linear-to-35%",
+  "mask-linear-to-36",
+  "mask-linear-to-40",
+  "mask-linear-to-40%",
+  "mask-linear-to-44",
+  "mask-linear-to-45%",
+  "mask-linear-to-48",
+  "mask-linear-to-50%",
+  "mask-linear-to-52",
+  "mask-linear-to-55%",
+  "mask-linear-to-56",
+  "mask-linear-to-60",
+  "mask-linear-to-60%",
+  "mask-linear-to-64",
+  "mask-linear-to-65%",
+  "mask-linear-to-70%",
+  "mask-linear-to-72",
+  "mask-linear-to-75%",
+  "mask-linear-to-80",
+  "mask-linear-to-80%",
+  "mask-linear-to-85%",
+  "mask-linear-to-90%",
+  "mask-linear-to-95%",
+  "mask-linear-to-96",
+  "mask-linear-to-100%",
+  "mask-linear-to-current",
+  "mask-linear-to-current/0",
+  "mask-linear-to-current/5",
+  "mask-linear-to-current/10",
+  "mask-linear-to-current/15",
+  "mask-linear-to-current/20",
+  "mask-linear-to-current/25",
+  "mask-linear-to-current/30",
+  "mask-linear-to-current/35",
+  "mask-linear-to-current/40",
+  "mask-linear-to-current/45",
+  "mask-linear-to-current/50",
+  "mask-linear-to-current/55",
+  "mask-linear-to-current/60",
+  "mask-linear-to-current/65",
+  "mask-linear-to-current/70",
+  "mask-linear-to-current/75",
+  "mask-linear-to-current/80",
+  "mask-linear-to-current/85",
+  "mask-linear-to-current/90",
+  "mask-linear-to-current/95",
+  "mask-linear-to-current/100",
+  "mask-linear-to-inherit",
+  "mask-linear-to-inherit/0",
+  "mask-linear-to-inherit/5",
+  "mask-linear-to-inherit/10",
+  "mask-linear-to-inherit/15",
+  "mask-linear-to-inherit/20",
+  "mask-linear-to-inherit/25",
+  "mask-linear-to-inherit/30",
+  "mask-linear-to-inherit/35",
+  "mask-linear-to-inherit/40",
+  "mask-linear-to-inherit/45",
+  "mask-linear-to-inherit/50",
+  "mask-linear-to-inherit/55",
+  "mask-linear-to-inherit/60",
+  "mask-linear-to-inherit/65",
+  "mask-linear-to-inherit/70",
+  "mask-linear-to-inherit/75",
+  "mask-linear-to-inherit/80",
+  "mask-linear-to-inherit/85",
+  "mask-linear-to-inherit/90",
+  "mask-linear-to-inherit/95",
+  "mask-linear-to-inherit/100",
+  "mask-linear-to-transparent",
+  "mask-linear-to-transparent/0",
+  "mask-linear-to-transparent/5",
+  "mask-linear-to-transparent/10",
+  "mask-linear-to-transparent/15",
+  "mask-linear-to-transparent/20",
+  "mask-linear-to-transparent/25",
+  "mask-linear-to-transparent/30",
+  "mask-linear-to-transparent/35",
+  "mask-linear-to-transparent/40",
+  "mask-linear-to-transparent/45",
+  "mask-linear-to-transparent/50",
+  "mask-linear-to-transparent/55",
+  "mask-linear-to-transparent/60",
+  "mask-linear-to-transparent/65",
+  "mask-linear-to-transparent/70",
+  "mask-linear-to-transparent/75",
+  "mask-linear-to-transparent/80",
+  "mask-linear-to-transparent/85",
+  "mask-linear-to-transparent/90",
+  "mask-linear-to-transparent/95",
+  "mask-linear-to-transparent/100",
   "mask-luminance",
   "mask-match",
   "mask-no-clip",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index eea935baddaa..7a5f02475135 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -14794,6 +14794,526 @@ test('mask-y-to', async () => {
   ).toEqual('')
 })
 
+test('mask-linear', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      ['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".-mask-linear-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: calc(1deg * -45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: calc(1deg * 45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-\\[3rad\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: 171.887deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-linear',
+      '-mask-linear',
+
+      'mask-linear-45/foo',
+      '-mask-linear-45/foo',
+
+      'mask-linear-[3rad]/foo',
+      '-mask-linear-[3rad]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-linear-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-from-0',
+        'mask-linear-from-1.5',
+        'mask-linear-from-2',
+        'mask-linear-from-0%',
+        'mask-linear-from-2%',
+        'mask-linear-from-[0px]',
+        'mask-linear-from-[0%]',
+
+        'mask-linear-from-(--my-var)',
+        'mask-linear-from-(color:--my-var)',
+        'mask-linear-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-linear-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\(--my-var\\), .mask-linear-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-linear-from',
+      'mask-linear-from--1.5',
+      'mask-linear-from--2',
+      'mask-linear-from--5%',
+      'mask-linear-from-unknown',
+      'mask-linear-from-unknown%',
+
+      '-mask-linear-from-0',
+      '-mask-linear-from-1.5',
+      '-mask-linear-from-2',
+      '-mask-linear-from-0%',
+      '-mask-linear-from-2%',
+      '-mask-linear-from-[0px]',
+      '-mask-linear-from-[0%]',
+
+      '-mask-linear-from-(--my-var)',
+      '-mask-linear-from-(color:--my-var)',
+      '-mask-linear-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-linear-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-to-0',
+        'mask-linear-to-1.5',
+        'mask-linear-to-2',
+        'mask-linear-to-0%',
+        'mask-linear-to-2%',
+        'mask-linear-to-[0px]',
+        'mask-linear-to-[0%]',
+
+        'mask-linear-to-(--my-var)',
+        'mask-linear-to-(color:--my-var)',
+        'mask-linear-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-linear-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\(--my-var\\), .mask-linear-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-linear-to',
+      'mask-linear-to--1.5',
+      'mask-linear-to--2',
+      'mask-linear-to--5%',
+      'mask-linear-to-unknown',
+      'mask-linear-to-unknown%',
+
+      '-mask-linear-to-0',
+      '-mask-linear-to-1.5',
+      '-mask-linear-to-2',
+      '-mask-linear-to-0%',
+      '-mask-linear-to-2%',
+      '-mask-linear-to-[0px]',
+      '-mask-linear-to-[0%]',
+
+      '-mask-linear-to-(--my-var)',
+      '-mask-linear-to-(color:--my-var)',
+      '-mask-linear-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index b822596db464..24edff9098df 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3176,6 +3176,115 @@ export function createUtilities(theme: Theme) {
     maskEdgeUtility('mask-b-to', 'to', { top: false, right: false, bottom: true, left: false })
     maskEdgeUtility('mask-l-from', 'from', { top: false, right: false, bottom: false, left: true })
     maskEdgeUtility('mask-l-to', 'to', { top: false, right: false, bottom: false, left: true })
+
+    /**
+     *  Linear Masks
+     */
+
+    let maskPropertiesLinear = () =>
+      atRoot([
+        property('--tw-mask-linear-position', '0deg'),
+        property('--tw-mask-linear-from-position', '0%'),
+        property('--tw-mask-linear-to-position', '100%'),
+        property('--tw-mask-linear-from-color', 'black'),
+        property('--tw-mask-linear-to-color', 'transparent'),
+      ])
+
+    functionalUtility('mask-linear', {
+      defaultValue: null,
+      supportsNegative: true,
+      supportsFractions: false,
+      handleBareValue(value) {
+        let type = inferDataType(value.value, ['integer'])
+        if (!type) return null
+        if (type !== 'integer') return null
+
+        if (!isPositiveInteger(value.value)) return null
+
+        return `calc(1deg * ${value.value})`
+      },
+      handleNegativeBareValue(value) {
+        let type = inferDataType(value.value, ['integer'])
+        if (!type) return null
+        if (type !== 'integer') return null
+
+        if (!isPositiveInteger(value.value)) return null
+
+        return `calc(1deg * -${value.value})`
+      },
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear',
+          `linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)))`,
+        ),
+        decl('--tw-mask-linear-position', value),
+      ],
+    })
+
+    suggest('mask-linear', () => [
+      {
+        supportsNegative: true,
+        values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
+      },
+    ])
+
+    maskStopUtility('mask-linear-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-linear-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-to-position', value),
+      ],
+    })
   }
 
   /**

From 977c86c0f59e80c651968ff5c82925386d88ab07 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 26 Mar 2025 11:33:39 -0400
Subject: [PATCH 14/29] Add utilities for `mask-radial-*`

---
 .../__snapshots__/intellisense.test.ts.snap   | 257 +++++++
 packages/tailwindcss/src/utilities.test.ts    | 658 ++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 119 ++++
 3 files changed, 1034 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index e4acdc67f817..299870b10e0a 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -5362,6 +5362,7 @@ exports[`getClassList 1`] = `
   "mask-bottom-left",
   "mask-bottom-right",
   "mask-center",
+  "mask-circle",
   "mask-clip-border",
   "mask-clip-content",
   "mask-clip-fill",
@@ -5370,6 +5371,7 @@ exports[`getClassList 1`] = `
   "mask-clip-view",
   "mask-contain",
   "mask-cover",
+  "mask-ellipse",
   "mask-exclude",
   "mask-intersect",
   "mask-l-from-0",
@@ -6119,6 +6121,261 @@ exports[`getClassList 1`] = `
   "mask-r-to-transparent/90",
   "mask-r-to-transparent/95",
   "mask-r-to-transparent/100",
+  "mask-radial-at-bottom",
+  "mask-radial-at-bottom-left",
+  "mask-radial-at-bottom-right",
+  "mask-radial-at-center",
+  "mask-radial-at-left",
+  "mask-radial-at-right",
+  "mask-radial-at-top",
+  "mask-radial-at-top-left",
+  "mask-radial-at-top-right",
+  "mask-radial-closest-corner",
+  "mask-radial-closest-side",
+  "mask-radial-farthest-corner",
+  "mask-radial-farthest-side",
+  "mask-radial-from-0",
+  "mask-radial-from-0%",
+  "mask-radial-from-0.5",
+  "mask-radial-from-1",
+  "mask-radial-from-1.5",
+  "mask-radial-from-2",
+  "mask-radial-from-2.5",
+  "mask-radial-from-3",
+  "mask-radial-from-3.5",
+  "mask-radial-from-4",
+  "mask-radial-from-5",
+  "mask-radial-from-5%",
+  "mask-radial-from-6",
+  "mask-radial-from-7",
+  "mask-radial-from-8",
+  "mask-radial-from-9",
+  "mask-radial-from-10",
+  "mask-radial-from-10%",
+  "mask-radial-from-11",
+  "mask-radial-from-12",
+  "mask-radial-from-14",
+  "mask-radial-from-15%",
+  "mask-radial-from-16",
+  "mask-radial-from-20",
+  "mask-radial-from-20%",
+  "mask-radial-from-24",
+  "mask-radial-from-25%",
+  "mask-radial-from-28",
+  "mask-radial-from-30%",
+  "mask-radial-from-32",
+  "mask-radial-from-35%",
+  "mask-radial-from-36",
+  "mask-radial-from-40",
+  "mask-radial-from-40%",
+  "mask-radial-from-44",
+  "mask-radial-from-45%",
+  "mask-radial-from-48",
+  "mask-radial-from-50%",
+  "mask-radial-from-52",
+  "mask-radial-from-55%",
+  "mask-radial-from-56",
+  "mask-radial-from-60",
+  "mask-radial-from-60%",
+  "mask-radial-from-64",
+  "mask-radial-from-65%",
+  "mask-radial-from-70%",
+  "mask-radial-from-72",
+  "mask-radial-from-75%",
+  "mask-radial-from-80",
+  "mask-radial-from-80%",
+  "mask-radial-from-85%",
+  "mask-radial-from-90%",
+  "mask-radial-from-95%",
+  "mask-radial-from-96",
+  "mask-radial-from-100%",
+  "mask-radial-from-current",
+  "mask-radial-from-current/0",
+  "mask-radial-from-current/5",
+  "mask-radial-from-current/10",
+  "mask-radial-from-current/15",
+  "mask-radial-from-current/20",
+  "mask-radial-from-current/25",
+  "mask-radial-from-current/30",
+  "mask-radial-from-current/35",
+  "mask-radial-from-current/40",
+  "mask-radial-from-current/45",
+  "mask-radial-from-current/50",
+  "mask-radial-from-current/55",
+  "mask-radial-from-current/60",
+  "mask-radial-from-current/65",
+  "mask-radial-from-current/70",
+  "mask-radial-from-current/75",
+  "mask-radial-from-current/80",
+  "mask-radial-from-current/85",
+  "mask-radial-from-current/90",
+  "mask-radial-from-current/95",
+  "mask-radial-from-current/100",
+  "mask-radial-from-inherit",
+  "mask-radial-from-inherit/0",
+  "mask-radial-from-inherit/5",
+  "mask-radial-from-inherit/10",
+  "mask-radial-from-inherit/15",
+  "mask-radial-from-inherit/20",
+  "mask-radial-from-inherit/25",
+  "mask-radial-from-inherit/30",
+  "mask-radial-from-inherit/35",
+  "mask-radial-from-inherit/40",
+  "mask-radial-from-inherit/45",
+  "mask-radial-from-inherit/50",
+  "mask-radial-from-inherit/55",
+  "mask-radial-from-inherit/60",
+  "mask-radial-from-inherit/65",
+  "mask-radial-from-inherit/70",
+  "mask-radial-from-inherit/75",
+  "mask-radial-from-inherit/80",
+  "mask-radial-from-inherit/85",
+  "mask-radial-from-inherit/90",
+  "mask-radial-from-inherit/95",
+  "mask-radial-from-inherit/100",
+  "mask-radial-from-transparent",
+  "mask-radial-from-transparent/0",
+  "mask-radial-from-transparent/5",
+  "mask-radial-from-transparent/10",
+  "mask-radial-from-transparent/15",
+  "mask-radial-from-transparent/20",
+  "mask-radial-from-transparent/25",
+  "mask-radial-from-transparent/30",
+  "mask-radial-from-transparent/35",
+  "mask-radial-from-transparent/40",
+  "mask-radial-from-transparent/45",
+  "mask-radial-from-transparent/50",
+  "mask-radial-from-transparent/55",
+  "mask-radial-from-transparent/60",
+  "mask-radial-from-transparent/65",
+  "mask-radial-from-transparent/70",
+  "mask-radial-from-transparent/75",
+  "mask-radial-from-transparent/80",
+  "mask-radial-from-transparent/85",
+  "mask-radial-from-transparent/90",
+  "mask-radial-from-transparent/95",
+  "mask-radial-from-transparent/100",
+  "mask-radial-to-0",
+  "mask-radial-to-0%",
+  "mask-radial-to-0.5",
+  "mask-radial-to-1",
+  "mask-radial-to-1.5",
+  "mask-radial-to-2",
+  "mask-radial-to-2.5",
+  "mask-radial-to-3",
+  "mask-radial-to-3.5",
+  "mask-radial-to-4",
+  "mask-radial-to-5",
+  "mask-radial-to-5%",
+  "mask-radial-to-6",
+  "mask-radial-to-7",
+  "mask-radial-to-8",
+  "mask-radial-to-9",
+  "mask-radial-to-10",
+  "mask-radial-to-10%",
+  "mask-radial-to-11",
+  "mask-radial-to-12",
+  "mask-radial-to-14",
+  "mask-radial-to-15%",
+  "mask-radial-to-16",
+  "mask-radial-to-20",
+  "mask-radial-to-20%",
+  "mask-radial-to-24",
+  "mask-radial-to-25%",
+  "mask-radial-to-28",
+  "mask-radial-to-30%",
+  "mask-radial-to-32",
+  "mask-radial-to-35%",
+  "mask-radial-to-36",
+  "mask-radial-to-40",
+  "mask-radial-to-40%",
+  "mask-radial-to-44",
+  "mask-radial-to-45%",
+  "mask-radial-to-48",
+  "mask-radial-to-50%",
+  "mask-radial-to-52",
+  "mask-radial-to-55%",
+  "mask-radial-to-56",
+  "mask-radial-to-60",
+  "mask-radial-to-60%",
+  "mask-radial-to-64",
+  "mask-radial-to-65%",
+  "mask-radial-to-70%",
+  "mask-radial-to-72",
+  "mask-radial-to-75%",
+  "mask-radial-to-80",
+  "mask-radial-to-80%",
+  "mask-radial-to-85%",
+  "mask-radial-to-90%",
+  "mask-radial-to-95%",
+  "mask-radial-to-96",
+  "mask-radial-to-100%",
+  "mask-radial-to-current",
+  "mask-radial-to-current/0",
+  "mask-radial-to-current/5",
+  "mask-radial-to-current/10",
+  "mask-radial-to-current/15",
+  "mask-radial-to-current/20",
+  "mask-radial-to-current/25",
+  "mask-radial-to-current/30",
+  "mask-radial-to-current/35",
+  "mask-radial-to-current/40",
+  "mask-radial-to-current/45",
+  "mask-radial-to-current/50",
+  "mask-radial-to-current/55",
+  "mask-radial-to-current/60",
+  "mask-radial-to-current/65",
+  "mask-radial-to-current/70",
+  "mask-radial-to-current/75",
+  "mask-radial-to-current/80",
+  "mask-radial-to-current/85",
+  "mask-radial-to-current/90",
+  "mask-radial-to-current/95",
+  "mask-radial-to-current/100",
+  "mask-radial-to-inherit",
+  "mask-radial-to-inherit/0",
+  "mask-radial-to-inherit/5",
+  "mask-radial-to-inherit/10",
+  "mask-radial-to-inherit/15",
+  "mask-radial-to-inherit/20",
+  "mask-radial-to-inherit/25",
+  "mask-radial-to-inherit/30",
+  "mask-radial-to-inherit/35",
+  "mask-radial-to-inherit/40",
+  "mask-radial-to-inherit/45",
+  "mask-radial-to-inherit/50",
+  "mask-radial-to-inherit/55",
+  "mask-radial-to-inherit/60",
+  "mask-radial-to-inherit/65",
+  "mask-radial-to-inherit/70",
+  "mask-radial-to-inherit/75",
+  "mask-radial-to-inherit/80",
+  "mask-radial-to-inherit/85",
+  "mask-radial-to-inherit/90",
+  "mask-radial-to-inherit/95",
+  "mask-radial-to-inherit/100",
+  "mask-radial-to-transparent",
+  "mask-radial-to-transparent/0",
+  "mask-radial-to-transparent/5",
+  "mask-radial-to-transparent/10",
+  "mask-radial-to-transparent/15",
+  "mask-radial-to-transparent/20",
+  "mask-radial-to-transparent/25",
+  "mask-radial-to-transparent/30",
+  "mask-radial-to-transparent/35",
+  "mask-radial-to-transparent/40",
+  "mask-radial-to-transparent/45",
+  "mask-radial-to-transparent/50",
+  "mask-radial-to-transparent/55",
+  "mask-radial-to-transparent/60",
+  "mask-radial-to-transparent/65",
+  "mask-radial-to-transparent/70",
+  "mask-radial-to-transparent/75",
+  "mask-radial-to-transparent/80",
+  "mask-radial-to-transparent/85",
+  "mask-radial-to-transparent/90",
+  "mask-radial-to-transparent/95",
+  "mask-radial-to-transparent/100",
   "mask-repeat",
   "mask-repeat-round",
   "mask-repeat-space",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 7a5f02475135..9f20dbb60e1d 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -15314,6 +15314,664 @@ test('mask-linear-to', async () => {
   ).toEqual('')
 })
 
+test('mask-radial', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      [
+        'mask-circle',
+        'mask-ellipse',
+        'mask-radial-closest-side',
+        'mask-radial-farthest-side',
+        'mask-radial-closest-corner',
+        'mask-radial-farthest-corner',
+        'mask-radial-[25%_25%]',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-radial-\\[25\\%_25\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)));
+      --tw-mask-radial-size: 25% 25%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-circle {
+      --tw-mask-radial-shape: circle;
+    }
+
+    .mask-ellipse {
+      --tw-mask-radial-shape: ellipse;
+    }
+
+    .mask-radial-closest-corner {
+      --tw-mask-radial-size: closest-corner;
+    }
+
+    .mask-radial-closest-side {
+      --tw-mask-radial-size: closest-side;
+    }
+
+    .mask-radial-farthest-corner {
+      --tw-mask-radial-size: farthest-corner;
+    }
+
+    .mask-radial-farthest-side {
+      --tw-mask-radial-size: farthest-side;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial',
+      'mask-radial-[25%_25%]/foo',
+      'mask-radial/foo',
+      '-mask-radial',
+      '-mask-radial-[25%_25%]',
+      '-mask-radial/foo',
+      '-mask-radial-[25%_25%]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-radial-at', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-at-top',
+        'mask-radial-at-top-left',
+        'mask-radial-at-top-right',
+        'mask-radial-at-bottom',
+        'mask-radial-at-bottom-left',
+        'mask-radial-at-bottom-right',
+        'mask-radial-at-left',
+        'mask-radial-at-right',
+        'mask-radial-at-[25%]',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-radial-at-\\[25\\%\\] {
+      --tw-mask-radial-position: 25%;
+    }
+
+    .mask-radial-at-bottom {
+      --tw-mask-radial-position: bottom;
+    }
+
+    .mask-radial-at-bottom-left {
+      --tw-mask-radial-position: bottom left;
+    }
+
+    .mask-radial-at-bottom-right {
+      --tw-mask-radial-position: bottom right;
+    }
+
+    .mask-radial-at-left {
+      --tw-mask-radial-position: left;
+    }
+
+    .mask-radial-at-right {
+      --tw-mask-radial-position: right;
+    }
+
+    .mask-radial-at-top {
+      --tw-mask-radial-position: top;
+    }
+
+    .mask-radial-at-top-left {
+      --tw-mask-radial-position: top left;
+    }
+
+    .mask-radial-at-top-right {
+      --tw-mask-radial-position: top right;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial-at',
+      'mask-radial-at/foo',
+      'mask-radial-at-25',
+      'mask-radial-at-unknown',
+      'mask-radial-at-[25%]/foo',
+      'mask-radial-at-top/foo',
+      'mask-radial-at-top-left/foo',
+      'mask-radial-at-top-right/foo',
+      'mask-radial-at-bottom/foo',
+      'mask-radial-at-bottom-left/foo',
+      'mask-radial-at-bottom-right/foo',
+      'mask-radial-at-left/foo',
+      'mask-radial-at-right/foo',
+
+      '-mask-radial-at',
+      '-mask-radial-at/foo',
+      '-mask-radial-at-25',
+      '-mask-radial-at-unknown',
+      '-mask-radial-at-[25%]',
+      '-mask-radial-at-[25%]/foo',
+
+      '-mask-radial-at-top',
+      '-mask-radial-at-top-left',
+      '-mask-radial-at-top-right',
+      '-mask-radial-at-bottom',
+      '-mask-radial-at-bottom-left',
+      '-mask-radial-at-bottom-right',
+      '-mask-radial-at-left',
+      '-mask-radial-at-right',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-radial-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-from-0',
+        'mask-radial-from-1.5',
+        'mask-radial-from-2',
+        'mask-radial-from-0%',
+        'mask-radial-from-2%',
+        'mask-radial-from-[0px]',
+        'mask-radial-from-[0%]',
+
+        'mask-radial-from-(--my-var)',
+        'mask-radial-from-(color:--my-var)',
+        'mask-radial-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-radial-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\(--my-var\\), .mask-radial-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial-from',
+      'mask-radial-from--1.5',
+      'mask-radial-from--2',
+      'mask-radial-from--5%',
+      'mask-radial-from-unknown',
+      'mask-radial-from-unknown%',
+
+      '-mask-radial-from-0',
+      '-mask-radial-from-1.5',
+      '-mask-radial-from-2',
+      '-mask-radial-from-0%',
+      '-mask-radial-from-2%',
+      '-mask-radial-from-[0px]',
+      '-mask-radial-from-[0%]',
+
+      '-mask-radial-from-(--my-var)',
+      '-mask-radial-from-(color:--my-var)',
+      '-mask-radial-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-radial-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-to-0',
+        'mask-radial-to-1.5',
+        'mask-radial-to-2',
+        'mask-radial-to-0%',
+        'mask-radial-to-2%',
+        'mask-radial-to-[0px]',
+        'mask-radial-to-[0%]',
+
+        'mask-radial-to-(--my-var)',
+        'mask-radial-to-(color:--my-var)',
+        'mask-radial-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-radial-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\(--my-var\\), .mask-radial-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial-to',
+      'mask-radial-to--1.5',
+      'mask-radial-to--2',
+      'mask-radial-to--5%',
+      'mask-radial-to-unknown',
+      'mask-radial-to-unknown%',
+
+      '-mask-radial-to-0',
+      '-mask-radial-to-1.5',
+      '-mask-radial-to-2',
+      '-mask-radial-to-0%',
+      '-mask-radial-to-2%',
+      '-mask-radial-to-[0px]',
+      '-mask-radial-to-[0%]',
+
+      '-mask-radial-to-(--my-var)',
+      '-mask-radial-to-(color:--my-var)',
+      '-mask-radial-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 24edff9098df..01f2ace994c4 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3285,6 +3285,125 @@ export function createUtilities(theme: Theme) {
         decl('--tw-mask-linear-to-position', value),
       ],
     })
+
+    /**
+     * Radial masks
+     */
+
+    let maskPropertiesRadial = () =>
+      atRoot([
+        property('--tw-mask-radial-from-position', '0%'),
+        property('--tw-mask-radial-to-position', '100%'),
+        property('--tw-mask-radial-from-color', 'black'),
+        property('--tw-mask-radial-to-color', 'transparent'),
+        property('--tw-mask-radial-shape', 'ellipse'),
+        property('--tw-mask-radial-size', 'farthest-corner'),
+        property('--tw-mask-radial-position', 'center'),
+      ])
+
+    staticUtility('mask-circle', [['--tw-mask-radial-shape', 'circle']])
+    staticUtility('mask-ellipse', [['--tw-mask-radial-shape', 'ellipse']])
+    staticUtility('mask-radial-closest-side', [['--tw-mask-radial-size', 'closest-side']])
+    staticUtility('mask-radial-farthest-side', [['--tw-mask-radial-size', 'farthest-side']])
+    staticUtility('mask-radial-closest-corner', [['--tw-mask-radial-size', 'closest-corner']])
+    staticUtility('mask-radial-farthest-corner', [['--tw-mask-radial-size', 'farthest-corner']])
+    staticUtility('mask-radial-at-top', [['--tw-mask-radial-position', 'top']])
+    staticUtility('mask-radial-at-top-left', [['--tw-mask-radial-position', 'top left']])
+    staticUtility('mask-radial-at-top-right', [['--tw-mask-radial-position', 'top right']])
+    staticUtility('mask-radial-at-bottom', [['--tw-mask-radial-position', 'bottom']])
+    staticUtility('mask-radial-at-bottom-left', [['--tw-mask-radial-position', 'bottom left']])
+    staticUtility('mask-radial-at-bottom-right', [['--tw-mask-radial-position', 'bottom right']])
+    staticUtility('mask-radial-at-left', [['--tw-mask-radial-position', 'left']])
+    staticUtility('mask-radial-at-right', [['--tw-mask-radial-position', 'right']])
+    staticUtility('mask-radial-at-center', [['--tw-mask-radial-position', 'center']])
+    functionalUtility('mask-radial-at', {
+      defaultValue: null,
+      supportsNegative: false,
+      supportsFractions: false,
+      handle: (value) => [decl('--tw-mask-radial-position', value)],
+    })
+
+    /*
+      This can be used to set just the size in conjunction with `mask-radial-from-*` et al,
+      or can set the whole gradient if it's the only utility you use.
+
+      For example:
+      `mask-radial-[40px_80px] mask-radial-from-50%`
+      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]`
+
+      This will produce nonsense though and break, which is fine:
+      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]  mask-radial-from-50%`
+    */
+    functionalUtility('mask-radial', {
+      defaultValue: null,
+      supportsNegative: false,
+      supportsFractions: false,
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial',
+          'radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)))',
+        ),
+        decl('--tw-mask-radial-size', value),
+      ],
+    })
+
+    maskStopUtility('mask-radial-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-radial-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-to-position', value),
+      ],
+    })
   }
 
   /**

From e603333a345be11ba37d99a9f6841b6da8847deb Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 26 Mar 2025 11:34:33 -0400
Subject: [PATCH 15/29] Add utilities for `mask-conic-*`

---
 .../__snapshots__/intellisense.test.ts.snap   | 260 +++++++++
 packages/tailwindcss/src/utilities.test.ts    | 509 ++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 109 ++++
 3 files changed, 878 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 299870b10e0a..b44c9144dc9c 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -686,6 +686,15 @@ exports[`getClassList 1`] = `
   "-m-80",
   "-m-96",
   "-m-px",
+  "-mask-conic-0",
+  "-mask-conic-1",
+  "-mask-conic-2",
+  "-mask-conic-3",
+  "-mask-conic-6",
+  "-mask-conic-12",
+  "-mask-conic-45",
+  "-mask-conic-90",
+  "-mask-conic-180",
   "-mask-linear-0",
   "-mask-linear-1",
   "-mask-linear-2",
@@ -5369,6 +5378,257 @@ exports[`getClassList 1`] = `
   "mask-clip-padding",
   "mask-clip-stroke",
   "mask-clip-view",
+  "mask-conic-0",
+  "mask-conic-1",
+  "mask-conic-2",
+  "mask-conic-3",
+  "mask-conic-6",
+  "mask-conic-12",
+  "mask-conic-45",
+  "mask-conic-90",
+  "mask-conic-180",
+  "mask-conic-from-0",
+  "mask-conic-from-0%",
+  "mask-conic-from-0.5",
+  "mask-conic-from-1",
+  "mask-conic-from-1.5",
+  "mask-conic-from-2",
+  "mask-conic-from-2.5",
+  "mask-conic-from-3",
+  "mask-conic-from-3.5",
+  "mask-conic-from-4",
+  "mask-conic-from-5",
+  "mask-conic-from-5%",
+  "mask-conic-from-6",
+  "mask-conic-from-7",
+  "mask-conic-from-8",
+  "mask-conic-from-9",
+  "mask-conic-from-10",
+  "mask-conic-from-10%",
+  "mask-conic-from-11",
+  "mask-conic-from-12",
+  "mask-conic-from-14",
+  "mask-conic-from-15%",
+  "mask-conic-from-16",
+  "mask-conic-from-20",
+  "mask-conic-from-20%",
+  "mask-conic-from-24",
+  "mask-conic-from-25%",
+  "mask-conic-from-28",
+  "mask-conic-from-30%",
+  "mask-conic-from-32",
+  "mask-conic-from-35%",
+  "mask-conic-from-36",
+  "mask-conic-from-40",
+  "mask-conic-from-40%",
+  "mask-conic-from-44",
+  "mask-conic-from-45%",
+  "mask-conic-from-48",
+  "mask-conic-from-50%",
+  "mask-conic-from-52",
+  "mask-conic-from-55%",
+  "mask-conic-from-56",
+  "mask-conic-from-60",
+  "mask-conic-from-60%",
+  "mask-conic-from-64",
+  "mask-conic-from-65%",
+  "mask-conic-from-70%",
+  "mask-conic-from-72",
+  "mask-conic-from-75%",
+  "mask-conic-from-80",
+  "mask-conic-from-80%",
+  "mask-conic-from-85%",
+  "mask-conic-from-90%",
+  "mask-conic-from-95%",
+  "mask-conic-from-96",
+  "mask-conic-from-100%",
+  "mask-conic-from-current",
+  "mask-conic-from-current/0",
+  "mask-conic-from-current/5",
+  "mask-conic-from-current/10",
+  "mask-conic-from-current/15",
+  "mask-conic-from-current/20",
+  "mask-conic-from-current/25",
+  "mask-conic-from-current/30",
+  "mask-conic-from-current/35",
+  "mask-conic-from-current/40",
+  "mask-conic-from-current/45",
+  "mask-conic-from-current/50",
+  "mask-conic-from-current/55",
+  "mask-conic-from-current/60",
+  "mask-conic-from-current/65",
+  "mask-conic-from-current/70",
+  "mask-conic-from-current/75",
+  "mask-conic-from-current/80",
+  "mask-conic-from-current/85",
+  "mask-conic-from-current/90",
+  "mask-conic-from-current/95",
+  "mask-conic-from-current/100",
+  "mask-conic-from-inherit",
+  "mask-conic-from-inherit/0",
+  "mask-conic-from-inherit/5",
+  "mask-conic-from-inherit/10",
+  "mask-conic-from-inherit/15",
+  "mask-conic-from-inherit/20",
+  "mask-conic-from-inherit/25",
+  "mask-conic-from-inherit/30",
+  "mask-conic-from-inherit/35",
+  "mask-conic-from-inherit/40",
+  "mask-conic-from-inherit/45",
+  "mask-conic-from-inherit/50",
+  "mask-conic-from-inherit/55",
+  "mask-conic-from-inherit/60",
+  "mask-conic-from-inherit/65",
+  "mask-conic-from-inherit/70",
+  "mask-conic-from-inherit/75",
+  "mask-conic-from-inherit/80",
+  "mask-conic-from-inherit/85",
+  "mask-conic-from-inherit/90",
+  "mask-conic-from-inherit/95",
+  "mask-conic-from-inherit/100",
+  "mask-conic-from-transparent",
+  "mask-conic-from-transparent/0",
+  "mask-conic-from-transparent/5",
+  "mask-conic-from-transparent/10",
+  "mask-conic-from-transparent/15",
+  "mask-conic-from-transparent/20",
+  "mask-conic-from-transparent/25",
+  "mask-conic-from-transparent/30",
+  "mask-conic-from-transparent/35",
+  "mask-conic-from-transparent/40",
+  "mask-conic-from-transparent/45",
+  "mask-conic-from-transparent/50",
+  "mask-conic-from-transparent/55",
+  "mask-conic-from-transparent/60",
+  "mask-conic-from-transparent/65",
+  "mask-conic-from-transparent/70",
+  "mask-conic-from-transparent/75",
+  "mask-conic-from-transparent/80",
+  "mask-conic-from-transparent/85",
+  "mask-conic-from-transparent/90",
+  "mask-conic-from-transparent/95",
+  "mask-conic-from-transparent/100",
+  "mask-conic-to-0",
+  "mask-conic-to-0%",
+  "mask-conic-to-0.5",
+  "mask-conic-to-1",
+  "mask-conic-to-1.5",
+  "mask-conic-to-2",
+  "mask-conic-to-2.5",
+  "mask-conic-to-3",
+  "mask-conic-to-3.5",
+  "mask-conic-to-4",
+  "mask-conic-to-5",
+  "mask-conic-to-5%",
+  "mask-conic-to-6",
+  "mask-conic-to-7",
+  "mask-conic-to-8",
+  "mask-conic-to-9",
+  "mask-conic-to-10",
+  "mask-conic-to-10%",
+  "mask-conic-to-11",
+  "mask-conic-to-12",
+  "mask-conic-to-14",
+  "mask-conic-to-15%",
+  "mask-conic-to-16",
+  "mask-conic-to-20",
+  "mask-conic-to-20%",
+  "mask-conic-to-24",
+  "mask-conic-to-25%",
+  "mask-conic-to-28",
+  "mask-conic-to-30%",
+  "mask-conic-to-32",
+  "mask-conic-to-35%",
+  "mask-conic-to-36",
+  "mask-conic-to-40",
+  "mask-conic-to-40%",
+  "mask-conic-to-44",
+  "mask-conic-to-45%",
+  "mask-conic-to-48",
+  "mask-conic-to-50%",
+  "mask-conic-to-52",
+  "mask-conic-to-55%",
+  "mask-conic-to-56",
+  "mask-conic-to-60",
+  "mask-conic-to-60%",
+  "mask-conic-to-64",
+  "mask-conic-to-65%",
+  "mask-conic-to-70%",
+  "mask-conic-to-72",
+  "mask-conic-to-75%",
+  "mask-conic-to-80",
+  "mask-conic-to-80%",
+  "mask-conic-to-85%",
+  "mask-conic-to-90%",
+  "mask-conic-to-95%",
+  "mask-conic-to-96",
+  "mask-conic-to-100%",
+  "mask-conic-to-current",
+  "mask-conic-to-current/0",
+  "mask-conic-to-current/5",
+  "mask-conic-to-current/10",
+  "mask-conic-to-current/15",
+  "mask-conic-to-current/20",
+  "mask-conic-to-current/25",
+  "mask-conic-to-current/30",
+  "mask-conic-to-current/35",
+  "mask-conic-to-current/40",
+  "mask-conic-to-current/45",
+  "mask-conic-to-current/50",
+  "mask-conic-to-current/55",
+  "mask-conic-to-current/60",
+  "mask-conic-to-current/65",
+  "mask-conic-to-current/70",
+  "mask-conic-to-current/75",
+  "mask-conic-to-current/80",
+  "mask-conic-to-current/85",
+  "mask-conic-to-current/90",
+  "mask-conic-to-current/95",
+  "mask-conic-to-current/100",
+  "mask-conic-to-inherit",
+  "mask-conic-to-inherit/0",
+  "mask-conic-to-inherit/5",
+  "mask-conic-to-inherit/10",
+  "mask-conic-to-inherit/15",
+  "mask-conic-to-inherit/20",
+  "mask-conic-to-inherit/25",
+  "mask-conic-to-inherit/30",
+  "mask-conic-to-inherit/35",
+  "mask-conic-to-inherit/40",
+  "mask-conic-to-inherit/45",
+  "mask-conic-to-inherit/50",
+  "mask-conic-to-inherit/55",
+  "mask-conic-to-inherit/60",
+  "mask-conic-to-inherit/65",
+  "mask-conic-to-inherit/70",
+  "mask-conic-to-inherit/75",
+  "mask-conic-to-inherit/80",
+  "mask-conic-to-inherit/85",
+  "mask-conic-to-inherit/90",
+  "mask-conic-to-inherit/95",
+  "mask-conic-to-inherit/100",
+  "mask-conic-to-transparent",
+  "mask-conic-to-transparent/0",
+  "mask-conic-to-transparent/5",
+  "mask-conic-to-transparent/10",
+  "mask-conic-to-transparent/15",
+  "mask-conic-to-transparent/20",
+  "mask-conic-to-transparent/25",
+  "mask-conic-to-transparent/30",
+  "mask-conic-to-transparent/35",
+  "mask-conic-to-transparent/40",
+  "mask-conic-to-transparent/45",
+  "mask-conic-to-transparent/50",
+  "mask-conic-to-transparent/55",
+  "mask-conic-to-transparent/60",
+  "mask-conic-to-transparent/65",
+  "mask-conic-to-transparent/70",
+  "mask-conic-to-transparent/75",
+  "mask-conic-to-transparent/80",
+  "mask-conic-to-transparent/85",
+  "mask-conic-to-transparent/90",
+  "mask-conic-to-transparent/95",
+  "mask-conic-to-transparent/100",
   "mask-contain",
   "mask-cover",
   "mask-ellipse",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 9f20dbb60e1d..7d0c26a6f16e 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -15972,6 +15972,515 @@ test('mask-radial-to', async () => {
   ).toEqual('')
 })
 
+test('mask-conic', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-conic-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: calc(1deg * 45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-\\[3rad\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: 171.887deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-conic',
+      '-mask-conic',
+
+      'mask-conic-45/foo',
+      '-mask-conic-45/foo',
+
+      'mask-conic-[3rad]/foo',
+      '-mask-conic-[3rad]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-conic-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-from-0',
+        'mask-conic-from-1.5',
+        'mask-conic-from-2',
+        'mask-conic-from-0%',
+        'mask-conic-from-2%',
+        'mask-conic-from-[0px]',
+        'mask-conic-from-[0%]',
+
+        'mask-conic-from-(--my-var)',
+        'mask-conic-from-(color:--my-var)',
+        'mask-conic-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-conic-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\(--my-var\\), .mask-conic-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-conic-from',
+      'mask-conic-from--1.5',
+      'mask-conic-from--2',
+      'mask-conic-from--5%',
+      'mask-conic-from-unknown',
+      'mask-conic-from-unknown%',
+
+      '-mask-conic-from-0',
+      '-mask-conic-from-1.5',
+      '-mask-conic-from-2',
+      '-mask-conic-from-0%',
+      '-mask-conic-from-2%',
+      '-mask-conic-from-[0px]',
+      '-mask-conic-from-[0%]',
+
+      '-mask-conic-from-(--my-var)',
+      '-mask-conic-from-(color:--my-var)',
+      '-mask-conic-from-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-conic-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-to-0',
+        'mask-conic-to-1.5',
+        'mask-conic-to-2',
+        'mask-conic-to-0%',
+        'mask-conic-to-2%',
+        'mask-conic-to-[0px]',
+        'mask-conic-to-[0%]',
+
+        'mask-conic-to-(--my-var)',
+        'mask-conic-to-(color:--my-var)',
+        'mask-conic-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-conic-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\(--my-var\\), .mask-conic-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#000, #000);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-conic-to',
+      'mask-conic-to--1.5',
+      'mask-conic-to--2',
+      'mask-conic-to--5%',
+      'mask-conic-to-unknown',
+      'mask-conic-to-unknown%',
+
+      '-mask-conic-to-0',
+      '-mask-conic-to-1.5',
+      '-mask-conic-to-2',
+      '-mask-conic-to-0%',
+      '-mask-conic-to-2%',
+      '-mask-conic-to-[0px]',
+      '-mask-conic-to-[0%]',
+
+      '-mask-conic-to-(--my-var)',
+      '-mask-conic-to-(color:--my-var)',
+      '-mask-conic-to-(length:--my-var)',
+    ]),
+  ).toEqual('')
+})
+
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 01f2ace994c4..a826cb060ac8 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3404,6 +3404,115 @@ export function createUtilities(theme: Theme) {
         decl('--tw-mask-radial-to-position', value),
       ],
     })
+
+    /**
+     * Conic masks
+     */
+
+    let maskPropertiesConic = () =>
+      atRoot([
+        property('--tw-mask-conic-position', '0deg'),
+        property('--tw-mask-conic-from-position', '0%'),
+        property('--tw-mask-conic-to-position', '100%'),
+        property('--tw-mask-conic-from-color', 'black'),
+        property('--tw-mask-conic-to-color', 'transparent'),
+      ])
+
+    functionalUtility('mask-conic', {
+      defaultValue: null,
+      supportsNegative: false,
+      supportsFractions: false,
+      handleBareValue(value) {
+        let type = inferDataType(value.value, ['integer'])
+        if (!type) return null
+        if (type !== 'integer') return null
+
+        if (!isPositiveInteger(value.value)) return null
+
+        return `calc(1deg * ${value.value})`
+      },
+      handleNegativeBareValue(value) {
+        let type = inferDataType(value.value, ['integer'])
+        if (!type) return null
+        if (type !== 'integer') return null
+
+        if (!isPositiveInteger(value.value)) return null
+
+        return `calc(1deg * -${value.value})`
+      },
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic',
+          'conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)))',
+        ),
+        decl('--tw-mask-conic-position', value),
+      ],
+    })
+
+    suggest('mask-conic', () => [
+      {
+        supportsNegative: true,
+        values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
+      },
+    ])
+
+    maskStopUtility('mask-conic-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-conic-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-to-position', value),
+      ],
+    })
   }
 
   /**

From 091cc74728d784e95225d201c078c353a1960a92 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Mar 2025 11:30:22 -0400
Subject: [PATCH 16/29] Add UI tests

---
 packages/tailwindcss/tests/ui.spec.ts | 1301 +++++++++++++++++++++++++
 1 file changed, 1301 insertions(+)

diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 7fbe0e58cc86..734f2a85540a 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -173,6 +173,1305 @@ for (let [classes, expected] of [
   })
 }
 
+/**
+ * Edge mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from)
+  //
+  [
+    'mask-x-from-20%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-from-20%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Single values (to)
+  //
+  [
+    'mask-x-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple values (from + to)
+  //
+  [
+    'mask-x-from-20% mask-x-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20% mask-y-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-from-20% mask-t-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-from-20% mask-r-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-from-20% mask-b-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-from-20% mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple edges
+  //
+  [
+    'mask-t-from-10% mask-t-to-20% mask-r-from-30% mask-r-to-40% mask-b-from-50% mask-b-to-60% mask-l-from-70% mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      'linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 60%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-x-from-10% mask-x-to-20% mask-y-from-30% mask-y-to-40%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      'linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple edges
+  // TRBL takes precedence over XY
+  //
+  [
+    'mask-x-from-20% mask-x-to-80% mask-l-from-30% mask-r-to-70%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20% mask-y-to-80% mask-t-from-30% mask-b-to-70%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+]) {
+  test(`mask edges, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Linear mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-linear-45 mask-linear-from-20%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-linear-45 mask-linear-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Multiple values
+  //
+  [
+    'mask-linear-45 mask-linear-from-20% mask-linear-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask linear, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Radial mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-radial-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple values (from, to)
+  //
+  [
+    'mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Shapes
+  //
+  [
+    'mask-circle mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(circle, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+  [
+    'mask-ellipse mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Positions
+  //
+  [
+    'mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-circle mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(circle at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(circle at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Sizes
+  //
+  [
+    'mask-radial-[100%_100%] mask-radial-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(100% 100%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ],
+
+  //
+  // Complicated radial gradient
+  //
+  [
+    'mask-radial-[25%_150%] mask-radial-at-top mask-ellipse mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(25% 150% at 50% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'radial-gradient(25% 150% at center top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask radial, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Conic mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-conic-45 mask-conic-from-20%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-conic-45 mask-conic-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Multiple values
+  //
+  [
+    'mask-conic-45 mask-conic-from-20% mask-conic-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Radial
+        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask conic, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Multiple masks
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-conic-45 mask-conic-from-20% mask-linear-30 mask-linear-to-70% mask-circle mask-radial-from-40% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(30deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        // Radial
+        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(30deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        // Radial
+        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask multiple, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+test('mask edges can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html` <div id="x" class="mask-x-from-25% hover:mask-x-to-75%">Hello world</div> `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+})
+
+test('mask edge colors can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-x-from-25% hover:mask-x-from-transparent hover:mask-x-to-black">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      'linear-gradient(to right, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+})
+
+test('linear mask direction can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-45">Hello world</div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('linear mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('linear mask colors can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-linear-15 mask-linear-from-25% hover:mask-linear-from-transparent hover:mask-linear-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('radial mask size can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-[125%_25%]">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(125% 25%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+})
+
+test('radial mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+})
+
+test('radial mask color can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-from-transparent hover:mask-radial-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'radial-gradient(50% 50%, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    ].join(', '),
+  )
+})
+
+test('conic mask direction can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-45">Hello world</div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('conic mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('conic mask color can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-conic-15 mask-conic-from-25% hover:mask-conic-from-transparent hover:mask-conic-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from 15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Radial
+      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
 test("::backdrop can receive a border with just the 'border' utility", async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
@@ -814,6 +2113,8 @@ async function render(page: Page, content: string, extraCss: string = '') {
         --color-red: rgb(255, 0, 0);
         --color-green: rgb(0, 255, 0);
         --color-blue: rgb(0, 0, 255);
+        --color-black: black;
+        --color-transparent: transparent;
       }
     }
     @layer base {

From 29b5d52bd1fa06a613f825dc5debe26fff0b3976 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 13 Mar 2025 10:17:43 -0400
Subject: [PATCH 17/29] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c7a500401da..62c3c79bffb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
 - _Experimental_: Add `@source not` ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
 - _Experimental_: Add `text-shadow-*` utilities ([#17389](https://github.com/tailwindlabs/tailwindcss/pull/17389))
+- _Experimental_: Add `mask-*` utilities ([#17134](https://github.com/tailwindlabs/tailwindcss/pull/17134))
 - Added new `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378))
 - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
 - Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))

From ba025bdf27a4495c64852327e1c2b9f34fdc85ff Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 26 Mar 2025 13:37:33 -0400
Subject: [PATCH 18/29] Use opaque white as the default mask color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This means that the default makes sense for `mask-composite: intersect` whether you’re using an alpha or luminance mask
---
 packages/tailwindcss/src/utilities.test.ts | 222 ++++++++++-----------
 packages/tailwindcss/src/utilities.ts      |  14 +-
 2 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 7d0c26a6f16e..f616f0104637 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12054,43 +12054,43 @@ test('mask-t-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top-from-position {
@@ -12279,43 +12279,43 @@ test('mask-t-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top-from-position {
@@ -12505,43 +12505,43 @@ test('mask-r-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right-from-position {
@@ -12731,43 +12731,43 @@ test('mask-r-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right-from-position {
@@ -12957,43 +12957,43 @@ test('mask-b-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom-from-position {
@@ -13183,43 +13183,43 @@ test('mask-b-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom-from-position {
@@ -13409,43 +13409,43 @@ test('mask-l-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left-from-position {
@@ -13635,43 +13635,43 @@ test('mask-l-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left-from-position {
@@ -13879,43 +13879,43 @@ test('mask-x-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right-from-position {
@@ -14147,43 +14147,43 @@ test('mask-x-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right-from-position {
@@ -14415,43 +14415,43 @@ test('mask-y-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top-from-position {
@@ -14683,43 +14683,43 @@ test('mask-y-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-left {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-right {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-bottom {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-top-from-position {
@@ -14839,19 +14839,19 @@ test('mask-linear', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-linear-position {
@@ -15037,19 +15037,19 @@ test('mask-linear-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-linear-position {
@@ -15245,19 +15245,19 @@ test('mask-linear-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-linear-position {
@@ -15369,19 +15369,19 @@ test('mask-radial', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial-from-position {
@@ -15671,19 +15671,19 @@ test('mask-radial-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial-from-position {
@@ -15891,19 +15891,19 @@ test('mask-radial-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial-from-position {
@@ -16006,19 +16006,19 @@ test('mask-conic', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic-position {
@@ -16204,19 +16204,19 @@ test('mask-conic-from', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic-position {
@@ -16412,19 +16412,19 @@ test('mask-conic-to', async () => {
     @property --tw-mask-linear {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-radial {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic {
       syntax: "*";
       inherits: false;
-      initial-value: linear-gradient(#000, #000);
+      initial-value: linear-gradient(#fff, #fff);
     }
 
     @property --tw-mask-conic-position {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index a826cb060ac8..3c8e754b8a06 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2951,9 +2951,9 @@ export function createUtilities(theme: Theme) {
 
     let maskPropertiesGradient = () =>
       atRoot([
-        property('--tw-mask-linear', 'linear-gradient(#000, #000)'),
-        property('--tw-mask-radial', 'linear-gradient(#000, #000)'),
-        property('--tw-mask-conic', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-linear', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-radial', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-conic', 'linear-gradient(#fff, #fff)'),
       ])
 
     type MaskStopDescription = {
@@ -3066,10 +3066,10 @@ export function createUtilities(theme: Theme) {
 
     let maskPropertiesEdge = () =>
       atRoot([
-        property('--tw-mask-left', 'linear-gradient(#000, #000)'),
-        property('--tw-mask-right', 'linear-gradient(#000, #000)'),
-        property('--tw-mask-bottom', 'linear-gradient(#000, #000)'),
-        property('--tw-mask-top', 'linear-gradient(#000, #000)'),
+        property('--tw-mask-left', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-right', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-bottom', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-top', 'linear-gradient(#fff, #fff)'),
       ])
 
     type MaskEdge = 'top' | 'right' | 'bottom' | 'left'

From 6719dce52ce84b2a2e6532c0eb2995dc692b6ef8 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 27 Mar 2025 10:55:30 -0400
Subject: [PATCH 19/29] Update UI tests

---
 packages/tailwindcss/tests/ui.spec.ts | 440 +++++++++++++-------------
 1 file changed, 220 insertions(+), 220 deletions(-)

diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 734f2a85540a..ed1a3e9b82cc 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -186,68 +186,68 @@ for (let [classes, expected] of [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-y-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-t-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-r-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-b-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
@@ -255,13 +255,13 @@ for (let [classes, expected] of [
     [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -274,68 +274,68 @@ for (let [classes, expected] of [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-y-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-t-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-r-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-b-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
@@ -343,13 +343,13 @@ for (let [classes, expected] of [
     [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -362,68 +362,68 @@ for (let [classes, expected] of [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-y-from-20% mask-y-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-t-from-20% mask-t-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-r-from-20% mask-r-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-b-from-20% mask-b-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
@@ -431,13 +431,13 @@ for (let [classes, expected] of [
     [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -453,9 +453,9 @@ for (let [classes, expected] of [
       'linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 60%)',
       'linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
@@ -467,9 +467,9 @@ for (let [classes, expected] of [
       'linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
       'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -483,26 +483,26 @@ for (let [classes, expected] of [
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
       'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-y-from-20% mask-y-to-80% mask-t-from-30% mask-b-to-70%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
       'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 ]) {
@@ -535,9 +535,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
@@ -545,9 +545,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -559,9 +559,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
@@ -569,9 +569,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -587,9 +587,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
@@ -597,9 +597,9 @@ for (let [classes, expected] of [
         // Linear
         'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -629,22 +629,22 @@ for (let [classes, expected] of [
     'mask-radial-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-radial-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -655,11 +655,11 @@ for (let [classes, expected] of [
     'mask-radial-from-20% mask-radial-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -670,22 +670,22 @@ for (let [classes, expected] of [
     'mask-circle mask-radial-from-20% mask-radial-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(circle, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
   [
     'mask-ellipse mask-radial-from-20% mask-radial-to-80%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -698,21 +698,21 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -722,21 +722,21 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(circle at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(circle at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -748,11 +748,11 @@ for (let [classes, expected] of [
     'mask-radial-[100%_100%] mask-radial-from-20%',
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(100% 100%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ],
 
@@ -765,21 +765,21 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(25% 150% at 50% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
 
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
         'radial-gradient(25% 150% at center top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
         // Conic
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       ].join(', '),
     ],
   ],
@@ -811,9 +811,9 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       ].join(', '),
@@ -821,9 +821,9 @@ for (let [classes, expected] of [
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
       ].join(', '),
@@ -835,9 +835,9 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from 45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       ].join(', '),
@@ -845,9 +845,9 @@ for (let [classes, expected] of [
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
       ].join(', '),
@@ -863,9 +863,9 @@ for (let [classes, expected] of [
       // WebKit / Firefox
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       ].join(', '),
@@ -873,9 +873,9 @@ for (let [classes, expected] of [
       // Chromium
       [
         // Linear
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Radial
-        'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
         // Conic
         'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
       ].join(', '),
@@ -953,12 +953,12 @@ test('mask edges can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 
@@ -969,12 +969,12 @@ test('mask edges can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
       'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 })
@@ -994,12 +994,12 @@ test('mask edge colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 
@@ -1010,12 +1010,12 @@ test('mask edge colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(to left, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
       'linear-gradient(to right, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 })
@@ -1034,9 +1034,9 @@ test('linear mask direction can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1044,9 +1044,9 @@ test('linear mask direction can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 
@@ -1058,9 +1058,9 @@ test('linear mask direction can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1068,9 +1068,9 @@ test('linear mask direction can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 })
@@ -1091,9 +1091,9 @@ test('linear mask position can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1101,9 +1101,9 @@ test('linear mask position can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 
@@ -1115,9 +1115,9 @@ test('linear mask position can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1125,9 +1125,9 @@ test('linear mask position can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 })
@@ -1151,9 +1151,9 @@ test('linear mask colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1161,9 +1161,9 @@ test('linear mask colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 
@@ -1175,9 +1175,9 @@ test('linear mask colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
 
     // Chromium
@@ -1185,9 +1185,9 @@ test('linear mask colors can be changed on hover', async ({ page }) => {
       // Linear
       'linear-gradient(calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   ]).toContain(await getPropertyValue('#x', 'mask-image'))
 })
@@ -1205,11 +1205,11 @@ test('radial mask size can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 
@@ -1218,11 +1218,11 @@ test('radial mask size can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(125% 25%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 })
@@ -1240,11 +1240,11 @@ test('radial mask position can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 
@@ -1253,11 +1253,11 @@ test('radial mask position can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 })
@@ -1278,11 +1278,11 @@ test('radial mask color can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 
@@ -1291,11 +1291,11 @@ test('radial mask color can be changed on hover', async ({ page }) => {
   expect(await getPropertyValue('#x', 'mask-image')).toEqual(
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
       'radial-gradient(50% 50%, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
       // Conic
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
     ].join(', '),
   )
 })
@@ -1312,9 +1312,9 @@ test('conic mask direction can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1322,9 +1322,9 @@ test('conic mask direction can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1336,9 +1336,9 @@ test('conic mask direction can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1346,9 +1346,9 @@ test('conic mask direction can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1369,9 +1369,9 @@ test('conic mask position can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1379,9 +1379,9 @@ test('conic mask position can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1393,9 +1393,9 @@ test('conic mask position can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
     ].join(', '),
@@ -1403,9 +1403,9 @@ test('conic mask position can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
     ].join(', '),
@@ -1429,9 +1429,9 @@ test('conic mask color can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1439,9 +1439,9 @@ test('conic mask color can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
     ].join(', '),
@@ -1453,9 +1453,9 @@ test('conic mask color can be changed on hover', async ({ page }) => {
     // WebKit / Firefox
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from 15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
     ].join(', '),
@@ -1463,9 +1463,9 @@ test('conic mask color can be changed on hover', async ({ page }) => {
     // Chromium
     [
       // Linear
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Radial
-      'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
       // Conic
       'conic-gradient(from calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
     ].join(', '),

From 3c2f2410af70aa725c888c3df80276cd9a0a9317 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 27 Mar 2025 08:47:29 -0400
Subject: [PATCH 20/29] Support negative conic gradient mask angles

---
 packages/tailwindcss/src/utilities.test.ts | 13 ++++++++++++-
 packages/tailwindcss/src/utilities.ts      |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index f616f0104637..59f0d49fec48 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -15981,7 +15981,18 @@ test('mask-conic', async () => {
       ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-conic-45 {
+    ".-mask-conic-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: calc(1deg * -45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-45 {
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
       mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 3c8e754b8a06..f507a73889ed 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3420,7 +3420,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('mask-conic', {
       defaultValue: null,
-      supportsNegative: false,
+      supportsNegative: true,
       supportsFractions: false,
       handleBareValue(value) {
         let type = inferDataType(value.value, ['integer'])

From 255528fa04191a61db8c534ddbe3d29b0405ba90 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 07:14:09 -0400
Subject: [PATCH 21/29] Remove duplicate utility definition

---
 packages/tailwindcss/src/utilities.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index f507a73889ed..533d86f8032f 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2944,11 +2944,9 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-origin-view', [['mask-origin', 'view-box']])
 
     /**
-     * @css `mask-image`
+     * @css `mask-image` gradients
      */
 
-    staticUtility('mask-none', [['mask-image', 'none']])
-
     let maskPropertiesGradient = () =>
       atRoot([
         property('--tw-mask-linear', 'linear-gradient(#fff, #fff)'),

From 2a18e0121a4f5567090ec6932bdd9a48d9022a97 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:03:26 -0400
Subject: [PATCH 22/29] Add tests

---
 packages/tailwindcss/src/utilities.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 59f0d49fec48..c2d7513415f0 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11576,6 +11576,8 @@ test('mask', async () => {
       [
         // mask-image
         'mask-none',
+        'mask-[linear-gradient(#ffff,#0000)]',
+        'mask-[url(http://example.com)]',
         'mask-[var(--some-var)]',
         'mask-[image:var(--some-var)]',
         'mask-[url:var(--some-var)]',

From bd19dc5a303cfdf30919240142f70862a340d714 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:04:50 -0400
Subject: [PATCH 23/29] =?UTF-8?q?Inline=20`=E2=80=94spacing(=E2=80=A6)`=20?=
 =?UTF-8?q?function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/tailwindcss/src/utilities.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 533d86f8032f..d7ebaed5195c 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3011,7 +3011,7 @@ export function createUtilities(theme: Theme) {
               if (!multiplier) return
               if (!isValidSpacingMultiplier(candidate.value.value)) return
 
-              return desc.position(`--spacing(${candidate.value.value})`)
+              return desc.position(`calc(${multiplier} * ${candidate.value.value})`)
             }
 
             case 'percentage': {

From adfdfc3b0262ccace6d498eed0eca402a85b1e7a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:16:36 -0400
Subject: [PATCH 24/29] Update tests

---
 packages/tailwindcss/src/utilities.test.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index c2d7513415f0..22eadfbb8f8e 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11632,7 +11632,23 @@ test('mask', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-\\[image\\:var\\(--some-var\\)\\], .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] {
+    ".mask-\\[image\\:var\\(--some-var\\)\\] {
+      -webkit-mask-image: var(--some-var);
+      -webkit-mask-image: var(--some-var);
+      mask-image: var(--some-var);
+    }
+
+    .mask-\\[linear-gradient\\(\\#ffff\\,\\#0000\\)\\] {
+      -webkit-mask-image: linear-gradient(#fff, #0000);
+      mask-image: linear-gradient(#fff, #0000);
+    }
+
+    .mask-\\[url\\(http\\:\\/\\/example\\.com\\)\\] {
+      -webkit-mask-image: url("http://example.com");
+      mask-image: url("http://example.com");
+    }
+
+    .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] {
       -webkit-mask-image: var(--some-var);
       -webkit-mask-image: var(--some-var);
       mask-image: var(--some-var);

From 7ba6c44f379f06a25d2331cc6ff32409085dc90a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:19:25 -0400
Subject: [PATCH 25/29] Add more tests

---
 packages/tailwindcss/src/utilities.test.ts | 139 +++++++++++++++++++++
 1 file changed, 139 insertions(+)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 22eadfbb8f8e..8e686f5769d8 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12155,6 +12155,13 @@ test('mask-t-from', async () => {
       '-mask-t-from-(--my-var)',
       '-mask-t-from-(color:--my-var)',
       '-mask-t-from-(length:--my-var)',
+
+      'mask-l-from-[-25%]',
+      'mask-l-from-[25%]/foo',
+      'mask-l-from-[-25%]/foo',
+      '-mask-l-from-[-25%]',
+      '-mask-l-from-[25%]/foo',
+      '-mask-l-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -12380,6 +12387,13 @@ test('mask-t-to', async () => {
       '-mask-t-to-(--my-var)',
       '-mask-t-to-(color:--my-var)',
       '-mask-t-to-(length:--my-var)',
+
+      'mask-l-from-[-25%]',
+      'mask-l-from-[25%]/foo',
+      'mask-l-from-[-25%]/foo',
+      '-mask-l-from-[-25%]',
+      '-mask-l-from-[25%]/foo',
+      '-mask-l-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -12606,6 +12620,13 @@ test('mask-r-from', async () => {
       '-mask-r-from-(--my-var)',
       '-mask-r-from-(color:--my-var)',
       '-mask-r-from-(length:--my-var)',
+
+      'mask-r-from-[-25%]',
+      'mask-r-from-[25%]/foo',
+      'mask-r-from-[-25%]/foo',
+      '-mask-r-from-[-25%]',
+      '-mask-r-from-[25%]/foo',
+      '-mask-r-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -12832,6 +12853,13 @@ test('mask-r-to', async () => {
       '-mask-r-to-(--my-var)',
       '-mask-r-to-(color:--my-var)',
       '-mask-r-to-(length:--my-var)',
+
+      'mask-r-to-[-25%]',
+      'mask-r-to-[25%]/foo',
+      'mask-r-to-[-25%]/foo',
+      '-mask-r-to-[-25%]',
+      '-mask-r-to-[25%]/foo',
+      '-mask-r-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -13058,6 +13086,13 @@ test('mask-b-from', async () => {
       '-mask-b-from-(--my-var)',
       '-mask-b-from-(color:--my-var)',
       '-mask-b-from-(length:--my-var)',
+
+      'mask-b-from-[-25%]',
+      'mask-b-from-[25%]/foo',
+      'mask-b-from-[-25%]/foo',
+      '-mask-b-from-[-25%]',
+      '-mask-b-from-[25%]/foo',
+      '-mask-b-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -13284,6 +13319,13 @@ test('mask-b-to', async () => {
       '-mask-b-to-(--my-var)',
       '-mask-b-to-(color:--my-var)',
       '-mask-b-to-(length:--my-var)',
+
+      'mask-b-to-[-25%]',
+      'mask-b-to-[25%]/foo',
+      'mask-b-to-[-25%]/foo',
+      '-mask-b-to-[-25%]',
+      '-mask-b-to-[25%]/foo',
+      '-mask-b-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -13510,6 +13552,13 @@ test('mask-l-from', async () => {
       '-mask-l-from-(--my-var)',
       '-mask-l-from-(color:--my-var)',
       '-mask-l-from-(length:--my-var)',
+
+      'mask-l-from-[-25%]',
+      'mask-l-from-[25%]/foo',
+      'mask-l-from-[-25%]/foo',
+      '-mask-l-from-[-25%]',
+      '-mask-l-from-[25%]/foo',
+      '-mask-l-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -13736,6 +13785,13 @@ test('mask-l-to', async () => {
       '-mask-l-to-(--my-var)',
       '-mask-l-to-(color:--my-var)',
       '-mask-l-to-(length:--my-var)',
+
+      'mask-l-to-[-25%]',
+      'mask-l-to-[25%]/foo',
+      'mask-l-to-[-25%]/foo',
+      '-mask-l-to-[-25%]',
+      '-mask-l-to-[25%]/foo',
+      '-mask-l-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -14004,6 +14060,13 @@ test('mask-x-from', async () => {
       '-mask-x-from-(--my-var)',
       '-mask-x-from-(color:--my-var)',
       '-mask-x-from-(length:--my-var)',
+
+      'mask-x-from-[-25%]',
+      'mask-x-from-[25%]/foo',
+      'mask-x-from-[-25%]/foo',
+      '-mask-x-from-[-25%]',
+      '-mask-x-from-[25%]/foo',
+      '-mask-x-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -14272,6 +14335,13 @@ test('mask-x-to', async () => {
       '-mask-x-to-(--my-var)',
       '-mask-x-to-(color:--my-var)',
       '-mask-x-to-(length:--my-var)',
+
+      'mask-x-to-[-25%]',
+      'mask-x-to-[25%]/foo',
+      'mask-x-to-[-25%]/foo',
+      '-mask-x-to-[-25%]',
+      '-mask-x-to-[25%]/foo',
+      '-mask-x-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -14540,6 +14610,13 @@ test('mask-y-from', async () => {
       '-mask-y-from-(--my-var)',
       '-mask-y-from-(color:--my-var)',
       '-mask-y-from-(length:--my-var)',
+
+      'mask-y-from-[-25%]',
+      'mask-y-from-[25%]/foo',
+      'mask-y-from-[-25%]/foo',
+      '-mask-y-from-[-25%]',
+      '-mask-y-from-[25%]/foo',
+      '-mask-y-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -14808,6 +14885,13 @@ test('mask-y-to', async () => {
       '-mask-y-to-(--my-var)',
       '-mask-y-to-(color:--my-var)',
       '-mask-y-to-(length:--my-var)',
+
+      'mask-y-to-[-25%]',
+      'mask-y-to-[25%]/foo',
+      'mask-y-to-[-25%]/foo',
+      '-mask-y-to-[-25%]',
+      '-mask-y-to-[25%]/foo',
+      '-mask-y-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15120,6 +15204,13 @@ test('mask-linear-from', async () => {
       '-mask-linear-from-(--my-var)',
       '-mask-linear-from-(color:--my-var)',
       '-mask-linear-from-(length:--my-var)',
+
+      'mask-linear-from-[-25%]',
+      'mask-linear-from-[25%]/foo',
+      'mask-linear-from-[-25%]/foo',
+      '-mask-linear-from-[-25%]',
+      '-mask-linear-from-[25%]/foo',
+      '-mask-linear-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15328,6 +15419,13 @@ test('mask-linear-to', async () => {
       '-mask-linear-to-(--my-var)',
       '-mask-linear-to-(color:--my-var)',
       '-mask-linear-to-(length:--my-var)',
+
+      'mask-linear-to-[-25%]',
+      'mask-linear-to-[25%]/foo',
+      'mask-linear-to-[-25%]/foo',
+      '-mask-linear-to-[-25%]',
+      '-mask-linear-to-[25%]/foo',
+      '-mask-linear-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15453,6 +15551,13 @@ test('mask-radial', async () => {
       '-mask-radial-[25%_25%]',
       '-mask-radial/foo',
       '-mask-radial-[25%_25%]/foo',
+
+      'mask-radial-from-[-25%]',
+      'mask-radial-from-[25%]/foo',
+      'mask-radial-from-[-25%]/foo',
+      '-mask-radial-from-[-25%]',
+      '-mask-radial-from-[25%]/foo',
+      '-mask-radial-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15546,6 +15651,12 @@ test('mask-radial-at', async () => {
       '-mask-radial-at-bottom-right',
       '-mask-radial-at-left',
       '-mask-radial-at-right',
+
+      'mask-radial-at-[25%]/foo',
+      'mask-radial-at-[-25%]/foo',
+      '-mask-radial-at-[-25%]',
+      '-mask-radial-at-[25%]/foo',
+      '-mask-radial-at-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15766,6 +15877,13 @@ test('mask-radial-from', async () => {
       '-mask-radial-from-(--my-var)',
       '-mask-radial-from-(color:--my-var)',
       '-mask-radial-from-(length:--my-var)',
+
+      'mask-radial-from-[-25%]',
+      'mask-radial-from-[25%]/foo',
+      'mask-radial-from-[-25%]/foo',
+      '-mask-radial-from-[-25%]',
+      '-mask-radial-from-[25%]/foo',
+      '-mask-radial-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -15986,6 +16104,13 @@ test('mask-radial-to', async () => {
       '-mask-radial-to-(--my-var)',
       '-mask-radial-to-(color:--my-var)',
       '-mask-radial-to-(length:--my-var)',
+
+      'mask-radial-to-[-25%]',
+      'mask-radial-to-[25%]/foo',
+      'mask-radial-to-[-25%]/foo',
+      '-mask-radial-to-[-25%]',
+      '-mask-radial-to-[25%]/foo',
+      '-mask-radial-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -16298,6 +16423,13 @@ test('mask-conic-from', async () => {
       '-mask-conic-from-(--my-var)',
       '-mask-conic-from-(color:--my-var)',
       '-mask-conic-from-(length:--my-var)',
+
+      'mask-conic-from-[-25%]',
+      'mask-conic-from-[25%]/foo',
+      'mask-conic-from-[-25%]/foo',
+      '-mask-conic-from-[-25%]',
+      '-mask-conic-from-[25%]/foo',
+      '-mask-conic-from-[-25%]/foo',
     ]),
   ).toEqual('')
 })
@@ -16506,6 +16638,13 @@ test('mask-conic-to', async () => {
       '-mask-conic-to-(--my-var)',
       '-mask-conic-to-(color:--my-var)',
       '-mask-conic-to-(length:--my-var)',
+
+      'mask-conic-to-[-25%]',
+      'mask-conic-to-[25%]/foo',
+      'mask-conic-to-[-25%]/foo',
+      '-mask-conic-to-[-25%]',
+      '-mask-conic-to-[25%]/foo',
+      '-mask-conic-to-[-25%]/foo',
     ]),
   ).toEqual('')
 })

From c0dc656cdda1188a9a9074d0b55a9550a4a08e15 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:26:59 -0400
Subject: [PATCH 26/29] Add tests

---
 packages/tailwindcss/src/utilities.test.ts | 64 ++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 8e686f5769d8..05a4cbcc0801 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12138,8 +12138,11 @@ test('mask-t-from', async () => {
   expect(
     await run([
       'mask-t-from',
+      'mask-t-from-2.8175',
       'mask-t-from--1.5',
       'mask-t-from--2',
+
+      'mask-t-from-2.5%',
       'mask-t-from--5%',
       'mask-t-from-unknown',
       'mask-t-from-unknown%',
@@ -12370,8 +12373,11 @@ test('mask-t-to', async () => {
   expect(
     await run([
       'mask-t-to',
+      'mask-t-to-2.8175',
       'mask-t-to--1.5',
       'mask-t-to--2',
+
+      'mask-t-to-2.5%',
       'mask-t-to--5%',
       'mask-t-to-unknown',
       'mask-t-to-unknown%',
@@ -12603,8 +12609,11 @@ test('mask-r-from', async () => {
   expect(
     await run([
       'mask-r-from',
+      'mask-r-from-2.8175',
       'mask-r-from--1.5',
       'mask-r-from--2',
+
+      'mask-r-from-2.5%',
       'mask-r-from--5%',
       'mask-r-from-unknown',
       'mask-r-from-unknown%',
@@ -12836,8 +12845,11 @@ test('mask-r-to', async () => {
   expect(
     await run([
       'mask-r-to',
+      'mask-r-to-2.8175',
       'mask-r-to--1.5',
       'mask-r-to--2',
+
+      'mask-r-to-2.5%',
       'mask-r-to--5%',
       'mask-r-to-unknown',
       'mask-r-to-unknown%',
@@ -13069,8 +13081,11 @@ test('mask-b-from', async () => {
   expect(
     await run([
       'mask-b-from',
+      'mask-b-from-2.8175',
       'mask-b-from--1.5',
       'mask-b-from--2',
+
+      'mask-b-from-2.5%',
       'mask-b-from--5%',
       'mask-b-from-unknown',
       'mask-b-from-unknown%',
@@ -13302,8 +13317,11 @@ test('mask-b-to', async () => {
   expect(
     await run([
       'mask-b-to',
+      'mask-b-to-2.8175',
       'mask-b-to--1.5',
       'mask-b-to--2',
+
+      'mask-b-to-2.5%',
       'mask-b-to--5%',
       'mask-b-to-unknown',
       'mask-b-to-unknown%',
@@ -13535,8 +13553,11 @@ test('mask-l-from', async () => {
   expect(
     await run([
       'mask-l-from',
+      'mask-l-from-2.8175',
       'mask-l-from--1.5',
       'mask-l-from--2',
+
+      'mask-l-from-2.5%',
       'mask-l-from--5%',
       'mask-l-from-unknown',
       'mask-l-from-unknown%',
@@ -13768,8 +13789,11 @@ test('mask-l-to', async () => {
   expect(
     await run([
       'mask-l-to',
+      'mask-l-to-2.8175',
       'mask-l-to--1.5',
       'mask-l-to--2',
+
+      'mask-l-to-2.5%',
       'mask-l-to--5%',
       'mask-l-to-unknown',
       'mask-l-to-unknown%',
@@ -14043,8 +14067,11 @@ test('mask-x-from', async () => {
   expect(
     await run([
       'mask-x-from',
+      'mask-x-from-2.8175',
       'mask-x-from--1.5',
       'mask-x-from--2',
+
+      'mask-x-from-2.5%',
       'mask-x-from--5%',
       'mask-x-from-unknown',
       'mask-x-from-unknown%',
@@ -14318,8 +14345,11 @@ test('mask-x-to', async () => {
   expect(
     await run([
       'mask-x-to',
+      'mask-x-to-2.8175',
       'mask-x-to--1.5',
       'mask-x-to--2',
+
+      'mask-x-to-2.5%',
       'mask-x-to--5%',
       'mask-x-to-unknown',
       'mask-x-to-unknown%',
@@ -14593,8 +14623,11 @@ test('mask-y-from', async () => {
   expect(
     await run([
       'mask-y-from',
+      'mask-y-from-2.8175',
       'mask-y-from--1.5',
       'mask-y-from--2',
+
+      'mask-y-from-2.5%',
       'mask-y-from--5%',
       'mask-y-from-unknown',
       'mask-y-from-unknown%',
@@ -14868,8 +14901,11 @@ test('mask-y-to', async () => {
   expect(
     await run([
       'mask-y-to',
+      'mask-y-to-2.8175',
       'mask-y-to--1.5',
       'mask-y-to--2',
+
+      'mask-y-to-2.5%',
       'mask-y-to--5%',
       'mask-y-to-unknown',
       'mask-y-to-unknown%',
@@ -14991,6 +15027,11 @@ test('mask-linear', async () => {
       'mask-linear',
       '-mask-linear',
 
+      'mask-linear--75',
+      'mask-linear-unknown',
+      'mask-linear--75/foo',
+      'mask-linear-unknown/foo',
+
       'mask-linear-45/foo',
       '-mask-linear-45/foo',
 
@@ -15187,8 +15228,11 @@ test('mask-linear-from', async () => {
   expect(
     await run([
       'mask-linear-from',
+      'mask-linear-from-2.8175',
       'mask-linear-from--1.5',
       'mask-linear-from--2',
+
+      'mask-linear-from-2.5%',
       'mask-linear-from--5%',
       'mask-linear-from-unknown',
       'mask-linear-from-unknown%',
@@ -15402,8 +15446,11 @@ test('mask-linear-to', async () => {
   expect(
     await run([
       'mask-linear-to',
+      'mask-linear-to-2.8175',
       'mask-linear-to--1.5',
       'mask-linear-to--2',
+
+      'mask-linear-to-2.5%',
       'mask-linear-to--5%',
       'mask-linear-to-unknown',
       'mask-linear-to-unknown%',
@@ -15860,8 +15907,11 @@ test('mask-radial-from', async () => {
   expect(
     await run([
       'mask-radial-from',
+      'mask-radial-from-2.8175',
       'mask-radial-from--1.5',
       'mask-radial-from--2',
+
+      'mask-radial-from-2.5%',
       'mask-radial-from--5%',
       'mask-radial-from-unknown',
       'mask-radial-from-unknown%',
@@ -16087,8 +16137,11 @@ test('mask-radial-to', async () => {
   expect(
     await run([
       'mask-radial-to',
+      'mask-radial-to-2.8175',
       'mask-radial-to--1.5',
       'mask-radial-to--2',
+
+      'mask-radial-to-2.5%',
       'mask-radial-to--5%',
       'mask-radial-to-unknown',
       'mask-radial-to-unknown%',
@@ -16210,6 +16263,11 @@ test('mask-conic', async () => {
       'mask-conic',
       '-mask-conic',
 
+      'mask-conic--75',
+      'mask-conic-unknown',
+      'mask-conic--75/foo',
+      'mask-conic-unknown/foo',
+
       'mask-conic-45/foo',
       '-mask-conic-45/foo',
 
@@ -16406,8 +16464,11 @@ test('mask-conic-from', async () => {
   expect(
     await run([
       'mask-conic-from',
+      'mask-conic-from-2.8175',
       'mask-conic-from--1.5',
       'mask-conic-from--2',
+
+      'mask-conic-from-2.5%',
       'mask-conic-from--5%',
       'mask-conic-from-unknown',
       'mask-conic-from-unknown%',
@@ -16621,8 +16682,11 @@ test('mask-conic-to', async () => {
   expect(
     await run([
       'mask-conic-to',
+      'mask-conic-to-2.8175',
       'mask-conic-to--1.5',
       'mask-conic-to--2',
+
+      'mask-conic-to-2.5%',
       'mask-conic-to--5%',
       'mask-conic-to-unknown',
       'mask-conic-to-unknown%',

From 5cda42e7da873ee5b0f2e873a23f760d89aa6e5a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:27:09 -0400
Subject: [PATCH 27/29] Remove unncessary type inference

---
 packages/tailwindcss/src/utilities.ts | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index d7ebaed5195c..fbc776e2239b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3193,21 +3193,11 @@ export function createUtilities(theme: Theme) {
       supportsNegative: true,
       supportsFractions: false,
       handleBareValue(value) {
-        let type = inferDataType(value.value, ['integer'])
-        if (!type) return null
-        if (type !== 'integer') return null
-
         if (!isPositiveInteger(value.value)) return null
-
         return `calc(1deg * ${value.value})`
       },
       handleNegativeBareValue(value) {
-        let type = inferDataType(value.value, ['integer'])
-        if (!type) return null
-        if (type !== 'integer') return null
-
         if (!isPositiveInteger(value.value)) return null
-
         return `calc(1deg * -${value.value})`
       },
       handle: (value) => [
@@ -3421,21 +3411,11 @@ export function createUtilities(theme: Theme) {
       supportsNegative: true,
       supportsFractions: false,
       handleBareValue(value) {
-        let type = inferDataType(value.value, ['integer'])
-        if (!type) return null
-        if (type !== 'integer') return null
-
         if (!isPositiveInteger(value.value)) return null
-
         return `calc(1deg * ${value.value})`
       },
       handleNegativeBareValue(value) {
-        let type = inferDataType(value.value, ['integer'])
-        if (!type) return null
-        if (type !== 'integer') return null
-
         if (!isPositiveInteger(value.value)) return null
-
         return `calc(1deg * -${value.value})`
       },
       handle: (value) => [

From 25535733587628138393fdbaf84c00be686fddde Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 09:31:33 -0400
Subject: [PATCH 28/29] Add more tests

---
 packages/tailwindcss/src/utilities.test.ts | 1224 +++++++++++---------
 1 file changed, 684 insertions(+), 540 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 05a4cbcc0801..16969260d883 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -12136,36 +12136,44 @@ test('mask-t-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-t-from',
-      'mask-t-from-2.8175',
-      'mask-t-from--1.5',
-      'mask-t-from--2',
-
-      'mask-t-from-2.5%',
-      'mask-t-from--5%',
-      'mask-t-from-unknown',
-      'mask-t-from-unknown%',
-
-      '-mask-t-from-0',
-      '-mask-t-from-1.5',
-      '-mask-t-from-2',
-      '-mask-t-from-0%',
-      '-mask-t-from-2%',
-      '-mask-t-from-[0px]',
-      '-mask-t-from-[0%]',
-
-      '-mask-t-from-(--my-var)',
-      '-mask-t-from-(color:--my-var)',
-      '-mask-t-from-(length:--my-var)',
-
-      'mask-l-from-[-25%]',
-      'mask-l-from-[25%]/foo',
-      'mask-l-from-[-25%]/foo',
-      '-mask-l-from-[-25%]',
-      '-mask-l-from-[25%]/foo',
-      '-mask-l-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-from',
+        'mask-t-from-2.8175',
+        'mask-t-from--1.5',
+        'mask-t-from--2',
+
+        'mask-t-from-2.5%',
+        'mask-t-from--5%',
+        'mask-t-from-unknown',
+        'mask-t-from-unknown%',
+
+        '-mask-t-from-0',
+        '-mask-t-from-1.5',
+        '-mask-t-from-2',
+        '-mask-t-from-0%',
+        '-mask-t-from-2%',
+        '-mask-t-from-[0px]',
+        '-mask-t-from-[0%]',
+
+        '-mask-t-from-(--my-var)',
+        '-mask-t-from-(color:--my-var)',
+        '-mask-t-from-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -12371,36 +12379,44 @@ test('mask-t-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-t-to',
-      'mask-t-to-2.8175',
-      'mask-t-to--1.5',
-      'mask-t-to--2',
-
-      'mask-t-to-2.5%',
-      'mask-t-to--5%',
-      'mask-t-to-unknown',
-      'mask-t-to-unknown%',
-
-      '-mask-t-to-0',
-      '-mask-t-to-1.5',
-      '-mask-t-to-2',
-      '-mask-t-to-0%',
-      '-mask-t-to-2%',
-      '-mask-t-to-[0px]',
-      '-mask-t-to-[0%]',
-
-      '-mask-t-to-(--my-var)',
-      '-mask-t-to-(color:--my-var)',
-      '-mask-t-to-(length:--my-var)',
-
-      'mask-l-from-[-25%]',
-      'mask-l-from-[25%]/foo',
-      'mask-l-from-[-25%]/foo',
-      '-mask-l-from-[-25%]',
-      '-mask-l-from-[25%]/foo',
-      '-mask-l-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-to',
+        'mask-t-to-2.8175',
+        'mask-t-to--1.5',
+        'mask-t-to--2',
+
+        'mask-t-to-2.5%',
+        'mask-t-to--5%',
+        'mask-t-to-unknown',
+        'mask-t-to-unknown%',
+
+        '-mask-t-to-0',
+        '-mask-t-to-1.5',
+        '-mask-t-to-2',
+        '-mask-t-to-0%',
+        '-mask-t-to-2%',
+        '-mask-t-to-[0px]',
+        '-mask-t-to-[0%]',
+
+        '-mask-t-to-(--my-var)',
+        '-mask-t-to-(color:--my-var)',
+        '-mask-t-to-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -12607,36 +12623,44 @@ test('mask-r-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-r-from',
-      'mask-r-from-2.8175',
-      'mask-r-from--1.5',
-      'mask-r-from--2',
-
-      'mask-r-from-2.5%',
-      'mask-r-from--5%',
-      'mask-r-from-unknown',
-      'mask-r-from-unknown%',
-
-      '-mask-r-from-0',
-      '-mask-r-from-1.5',
-      '-mask-r-from-2',
-      '-mask-r-from-0%',
-      '-mask-r-from-2%',
-      '-mask-r-from-[0px]',
-      '-mask-r-from-[0%]',
-
-      '-mask-r-from-(--my-var)',
-      '-mask-r-from-(color:--my-var)',
-      '-mask-r-from-(length:--my-var)',
-
-      'mask-r-from-[-25%]',
-      'mask-r-from-[25%]/foo',
-      'mask-r-from-[-25%]/foo',
-      '-mask-r-from-[-25%]',
-      '-mask-r-from-[25%]/foo',
-      '-mask-r-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-from',
+        'mask-r-from-2.8175',
+        'mask-r-from--1.5',
+        'mask-r-from--2',
+
+        'mask-r-from-2.5%',
+        'mask-r-from--5%',
+        'mask-r-from-unknown',
+        'mask-r-from-unknown%',
+
+        '-mask-r-from-0',
+        '-mask-r-from-1.5',
+        '-mask-r-from-2',
+        '-mask-r-from-0%',
+        '-mask-r-from-2%',
+        '-mask-r-from-[0px]',
+        '-mask-r-from-[0%]',
+
+        '-mask-r-from-(--my-var)',
+        '-mask-r-from-(color:--my-var)',
+        '-mask-r-from-(length:--my-var)',
+
+        'mask-r-from-[-25%]',
+        'mask-r-from-[25%]/foo',
+        'mask-r-from-[-25%]/foo',
+        '-mask-r-from-[-25%]',
+        '-mask-r-from-[25%]/foo',
+        '-mask-r-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -12843,36 +12867,44 @@ test('mask-r-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-r-to',
-      'mask-r-to-2.8175',
-      'mask-r-to--1.5',
-      'mask-r-to--2',
-
-      'mask-r-to-2.5%',
-      'mask-r-to--5%',
-      'mask-r-to-unknown',
-      'mask-r-to-unknown%',
-
-      '-mask-r-to-0',
-      '-mask-r-to-1.5',
-      '-mask-r-to-2',
-      '-mask-r-to-0%',
-      '-mask-r-to-2%',
-      '-mask-r-to-[0px]',
-      '-mask-r-to-[0%]',
-
-      '-mask-r-to-(--my-var)',
-      '-mask-r-to-(color:--my-var)',
-      '-mask-r-to-(length:--my-var)',
-
-      'mask-r-to-[-25%]',
-      'mask-r-to-[25%]/foo',
-      'mask-r-to-[-25%]/foo',
-      '-mask-r-to-[-25%]',
-      '-mask-r-to-[25%]/foo',
-      '-mask-r-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-to',
+        'mask-r-to-2.8175',
+        'mask-r-to--1.5',
+        'mask-r-to--2',
+
+        'mask-r-to-2.5%',
+        'mask-r-to--5%',
+        'mask-r-to-unknown',
+        'mask-r-to-unknown%',
+
+        '-mask-r-to-0',
+        '-mask-r-to-1.5',
+        '-mask-r-to-2',
+        '-mask-r-to-0%',
+        '-mask-r-to-2%',
+        '-mask-r-to-[0px]',
+        '-mask-r-to-[0%]',
+
+        '-mask-r-to-(--my-var)',
+        '-mask-r-to-(color:--my-var)',
+        '-mask-r-to-(length:--my-var)',
+
+        'mask-r-to-[-25%]',
+        'mask-r-to-[25%]/foo',
+        'mask-r-to-[-25%]/foo',
+        '-mask-r-to-[-25%]',
+        '-mask-r-to-[25%]/foo',
+        '-mask-r-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -13079,36 +13111,44 @@ test('mask-b-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-b-from',
-      'mask-b-from-2.8175',
-      'mask-b-from--1.5',
-      'mask-b-from--2',
-
-      'mask-b-from-2.5%',
-      'mask-b-from--5%',
-      'mask-b-from-unknown',
-      'mask-b-from-unknown%',
-
-      '-mask-b-from-0',
-      '-mask-b-from-1.5',
-      '-mask-b-from-2',
-      '-mask-b-from-0%',
-      '-mask-b-from-2%',
-      '-mask-b-from-[0px]',
-      '-mask-b-from-[0%]',
-
-      '-mask-b-from-(--my-var)',
-      '-mask-b-from-(color:--my-var)',
-      '-mask-b-from-(length:--my-var)',
-
-      'mask-b-from-[-25%]',
-      'mask-b-from-[25%]/foo',
-      'mask-b-from-[-25%]/foo',
-      '-mask-b-from-[-25%]',
-      '-mask-b-from-[25%]/foo',
-      '-mask-b-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-from',
+        'mask-b-from-2.8175',
+        'mask-b-from--1.5',
+        'mask-b-from--2',
+
+        'mask-b-from-2.5%',
+        'mask-b-from--5%',
+        'mask-b-from-unknown',
+        'mask-b-from-unknown%',
+
+        '-mask-b-from-0',
+        '-mask-b-from-1.5',
+        '-mask-b-from-2',
+        '-mask-b-from-0%',
+        '-mask-b-from-2%',
+        '-mask-b-from-[0px]',
+        '-mask-b-from-[0%]',
+
+        '-mask-b-from-(--my-var)',
+        '-mask-b-from-(color:--my-var)',
+        '-mask-b-from-(length:--my-var)',
+
+        'mask-b-from-[-25%]',
+        'mask-b-from-[25%]/foo',
+        'mask-b-from-[-25%]/foo',
+        '-mask-b-from-[-25%]',
+        '-mask-b-from-[25%]/foo',
+        '-mask-b-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -13315,36 +13355,44 @@ test('mask-b-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-b-to',
-      'mask-b-to-2.8175',
-      'mask-b-to--1.5',
-      'mask-b-to--2',
-
-      'mask-b-to-2.5%',
-      'mask-b-to--5%',
-      'mask-b-to-unknown',
-      'mask-b-to-unknown%',
-
-      '-mask-b-to-0',
-      '-mask-b-to-1.5',
-      '-mask-b-to-2',
-      '-mask-b-to-0%',
-      '-mask-b-to-2%',
-      '-mask-b-to-[0px]',
-      '-mask-b-to-[0%]',
-
-      '-mask-b-to-(--my-var)',
-      '-mask-b-to-(color:--my-var)',
-      '-mask-b-to-(length:--my-var)',
-
-      'mask-b-to-[-25%]',
-      'mask-b-to-[25%]/foo',
-      'mask-b-to-[-25%]/foo',
-      '-mask-b-to-[-25%]',
-      '-mask-b-to-[25%]/foo',
-      '-mask-b-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-to',
+        'mask-b-to-2.8175',
+        'mask-b-to--1.5',
+        'mask-b-to--2',
+
+        'mask-b-to-2.5%',
+        'mask-b-to--5%',
+        'mask-b-to-unknown',
+        'mask-b-to-unknown%',
+
+        '-mask-b-to-0',
+        '-mask-b-to-1.5',
+        '-mask-b-to-2',
+        '-mask-b-to-0%',
+        '-mask-b-to-2%',
+        '-mask-b-to-[0px]',
+        '-mask-b-to-[0%]',
+
+        '-mask-b-to-(--my-var)',
+        '-mask-b-to-(color:--my-var)',
+        '-mask-b-to-(length:--my-var)',
+
+        'mask-b-to-[-25%]',
+        'mask-b-to-[25%]/foo',
+        'mask-b-to-[-25%]/foo',
+        '-mask-b-to-[-25%]',
+        '-mask-b-to-[25%]/foo',
+        '-mask-b-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -13551,36 +13599,44 @@ test('mask-l-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-l-from',
-      'mask-l-from-2.8175',
-      'mask-l-from--1.5',
-      'mask-l-from--2',
-
-      'mask-l-from-2.5%',
-      'mask-l-from--5%',
-      'mask-l-from-unknown',
-      'mask-l-from-unknown%',
-
-      '-mask-l-from-0',
-      '-mask-l-from-1.5',
-      '-mask-l-from-2',
-      '-mask-l-from-0%',
-      '-mask-l-from-2%',
-      '-mask-l-from-[0px]',
-      '-mask-l-from-[0%]',
-
-      '-mask-l-from-(--my-var)',
-      '-mask-l-from-(color:--my-var)',
-      '-mask-l-from-(length:--my-var)',
-
-      'mask-l-from-[-25%]',
-      'mask-l-from-[25%]/foo',
-      'mask-l-from-[-25%]/foo',
-      '-mask-l-from-[-25%]',
-      '-mask-l-from-[25%]/foo',
-      '-mask-l-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-from',
+        'mask-l-from-2.8175',
+        'mask-l-from--1.5',
+        'mask-l-from--2',
+
+        'mask-l-from-2.5%',
+        'mask-l-from--5%',
+        'mask-l-from-unknown',
+        'mask-l-from-unknown%',
+
+        '-mask-l-from-0',
+        '-mask-l-from-1.5',
+        '-mask-l-from-2',
+        '-mask-l-from-0%',
+        '-mask-l-from-2%',
+        '-mask-l-from-[0px]',
+        '-mask-l-from-[0%]',
+
+        '-mask-l-from-(--my-var)',
+        '-mask-l-from-(color:--my-var)',
+        '-mask-l-from-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -13787,36 +13843,44 @@ test('mask-l-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-l-to',
-      'mask-l-to-2.8175',
-      'mask-l-to--1.5',
-      'mask-l-to--2',
-
-      'mask-l-to-2.5%',
-      'mask-l-to--5%',
-      'mask-l-to-unknown',
-      'mask-l-to-unknown%',
-
-      '-mask-l-to-0',
-      '-mask-l-to-1.5',
-      '-mask-l-to-2',
-      '-mask-l-to-0%',
-      '-mask-l-to-2%',
-      '-mask-l-to-[0px]',
-      '-mask-l-to-[0%]',
-
-      '-mask-l-to-(--my-var)',
-      '-mask-l-to-(color:--my-var)',
-      '-mask-l-to-(length:--my-var)',
-
-      'mask-l-to-[-25%]',
-      'mask-l-to-[25%]/foo',
-      'mask-l-to-[-25%]/foo',
-      '-mask-l-to-[-25%]',
-      '-mask-l-to-[25%]/foo',
-      '-mask-l-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-to',
+        'mask-l-to-2.8175',
+        'mask-l-to--1.5',
+        'mask-l-to--2',
+
+        'mask-l-to-2.5%',
+        'mask-l-to--5%',
+        'mask-l-to-unknown',
+        'mask-l-to-unknown%',
+
+        '-mask-l-to-0',
+        '-mask-l-to-1.5',
+        '-mask-l-to-2',
+        '-mask-l-to-0%',
+        '-mask-l-to-2%',
+        '-mask-l-to-[0px]',
+        '-mask-l-to-[0%]',
+
+        '-mask-l-to-(--my-var)',
+        '-mask-l-to-(color:--my-var)',
+        '-mask-l-to-(length:--my-var)',
+
+        'mask-l-to-[-25%]',
+        'mask-l-to-[25%]/foo',
+        'mask-l-to-[-25%]/foo',
+        '-mask-l-to-[-25%]',
+        '-mask-l-to-[25%]/foo',
+        '-mask-l-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -14065,36 +14129,44 @@ test('mask-x-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-x-from',
-      'mask-x-from-2.8175',
-      'mask-x-from--1.5',
-      'mask-x-from--2',
-
-      'mask-x-from-2.5%',
-      'mask-x-from--5%',
-      'mask-x-from-unknown',
-      'mask-x-from-unknown%',
-
-      '-mask-x-from-0',
-      '-mask-x-from-1.5',
-      '-mask-x-from-2',
-      '-mask-x-from-0%',
-      '-mask-x-from-2%',
-      '-mask-x-from-[0px]',
-      '-mask-x-from-[0%]',
-
-      '-mask-x-from-(--my-var)',
-      '-mask-x-from-(color:--my-var)',
-      '-mask-x-from-(length:--my-var)',
-
-      'mask-x-from-[-25%]',
-      'mask-x-from-[25%]/foo',
-      'mask-x-from-[-25%]/foo',
-      '-mask-x-from-[-25%]',
-      '-mask-x-from-[25%]/foo',
-      '-mask-x-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-from',
+        'mask-x-from-2.8175',
+        'mask-x-from--1.5',
+        'mask-x-from--2',
+
+        'mask-x-from-2.5%',
+        'mask-x-from--5%',
+        'mask-x-from-unknown',
+        'mask-x-from-unknown%',
+
+        '-mask-x-from-0',
+        '-mask-x-from-1.5',
+        '-mask-x-from-2',
+        '-mask-x-from-0%',
+        '-mask-x-from-2%',
+        '-mask-x-from-[0px]',
+        '-mask-x-from-[0%]',
+
+        '-mask-x-from-(--my-var)',
+        '-mask-x-from-(color:--my-var)',
+        '-mask-x-from-(length:--my-var)',
+
+        'mask-x-from-[-25%]',
+        'mask-x-from-[25%]/foo',
+        'mask-x-from-[-25%]/foo',
+        '-mask-x-from-[-25%]',
+        '-mask-x-from-[25%]/foo',
+        '-mask-x-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -14343,36 +14415,44 @@ test('mask-x-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-x-to',
-      'mask-x-to-2.8175',
-      'mask-x-to--1.5',
-      'mask-x-to--2',
-
-      'mask-x-to-2.5%',
-      'mask-x-to--5%',
-      'mask-x-to-unknown',
-      'mask-x-to-unknown%',
-
-      '-mask-x-to-0',
-      '-mask-x-to-1.5',
-      '-mask-x-to-2',
-      '-mask-x-to-0%',
-      '-mask-x-to-2%',
-      '-mask-x-to-[0px]',
-      '-mask-x-to-[0%]',
-
-      '-mask-x-to-(--my-var)',
-      '-mask-x-to-(color:--my-var)',
-      '-mask-x-to-(length:--my-var)',
-
-      'mask-x-to-[-25%]',
-      'mask-x-to-[25%]/foo',
-      'mask-x-to-[-25%]/foo',
-      '-mask-x-to-[-25%]',
-      '-mask-x-to-[25%]/foo',
-      '-mask-x-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-to',
+        'mask-x-to-2.8175',
+        'mask-x-to--1.5',
+        'mask-x-to--2',
+
+        'mask-x-to-2.5%',
+        'mask-x-to--5%',
+        'mask-x-to-unknown',
+        'mask-x-to-unknown%',
+
+        '-mask-x-to-0',
+        '-mask-x-to-1.5',
+        '-mask-x-to-2',
+        '-mask-x-to-0%',
+        '-mask-x-to-2%',
+        '-mask-x-to-[0px]',
+        '-mask-x-to-[0%]',
+
+        '-mask-x-to-(--my-var)',
+        '-mask-x-to-(color:--my-var)',
+        '-mask-x-to-(length:--my-var)',
+
+        'mask-x-to-[-25%]',
+        'mask-x-to-[25%]/foo',
+        'mask-x-to-[-25%]/foo',
+        '-mask-x-to-[-25%]',
+        '-mask-x-to-[25%]/foo',
+        '-mask-x-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -14621,36 +14701,44 @@ test('mask-y-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-y-from',
-      'mask-y-from-2.8175',
-      'mask-y-from--1.5',
-      'mask-y-from--2',
-
-      'mask-y-from-2.5%',
-      'mask-y-from--5%',
-      'mask-y-from-unknown',
-      'mask-y-from-unknown%',
-
-      '-mask-y-from-0',
-      '-mask-y-from-1.5',
-      '-mask-y-from-2',
-      '-mask-y-from-0%',
-      '-mask-y-from-2%',
-      '-mask-y-from-[0px]',
-      '-mask-y-from-[0%]',
-
-      '-mask-y-from-(--my-var)',
-      '-mask-y-from-(color:--my-var)',
-      '-mask-y-from-(length:--my-var)',
-
-      'mask-y-from-[-25%]',
-      'mask-y-from-[25%]/foo',
-      'mask-y-from-[-25%]/foo',
-      '-mask-y-from-[-25%]',
-      '-mask-y-from-[25%]/foo',
-      '-mask-y-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-from',
+        'mask-y-from-2.8175',
+        'mask-y-from--1.5',
+        'mask-y-from--2',
+
+        'mask-y-from-2.5%',
+        'mask-y-from--5%',
+        'mask-y-from-unknown',
+        'mask-y-from-unknown%',
+
+        '-mask-y-from-0',
+        '-mask-y-from-1.5',
+        '-mask-y-from-2',
+        '-mask-y-from-0%',
+        '-mask-y-from-2%',
+        '-mask-y-from-[0px]',
+        '-mask-y-from-[0%]',
+
+        '-mask-y-from-(--my-var)',
+        '-mask-y-from-(color:--my-var)',
+        '-mask-y-from-(length:--my-var)',
+
+        'mask-y-from-[-25%]',
+        'mask-y-from-[25%]/foo',
+        'mask-y-from-[-25%]/foo',
+        '-mask-y-from-[-25%]',
+        '-mask-y-from-[25%]/foo',
+        '-mask-y-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -14899,36 +14987,44 @@ test('mask-y-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-y-to',
-      'mask-y-to-2.8175',
-      'mask-y-to--1.5',
-      'mask-y-to--2',
-
-      'mask-y-to-2.5%',
-      'mask-y-to--5%',
-      'mask-y-to-unknown',
-      'mask-y-to-unknown%',
-
-      '-mask-y-to-0',
-      '-mask-y-to-1.5',
-      '-mask-y-to-2',
-      '-mask-y-to-0%',
-      '-mask-y-to-2%',
-      '-mask-y-to-[0px]',
-      '-mask-y-to-[0%]',
-
-      '-mask-y-to-(--my-var)',
-      '-mask-y-to-(color:--my-var)',
-      '-mask-y-to-(length:--my-var)',
-
-      'mask-y-to-[-25%]',
-      'mask-y-to-[25%]/foo',
-      'mask-y-to-[-25%]/foo',
-      '-mask-y-to-[-25%]',
-      '-mask-y-to-[25%]/foo',
-      '-mask-y-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-to',
+        'mask-y-to-2.8175',
+        'mask-y-to--1.5',
+        'mask-y-to--2',
+
+        'mask-y-to-2.5%',
+        'mask-y-to--5%',
+        'mask-y-to-unknown',
+        'mask-y-to-unknown%',
+
+        '-mask-y-to-0',
+        '-mask-y-to-1.5',
+        '-mask-y-to-2',
+        '-mask-y-to-0%',
+        '-mask-y-to-2%',
+        '-mask-y-to-[0px]',
+        '-mask-y-to-[0%]',
+
+        '-mask-y-to-(--my-var)',
+        '-mask-y-to-(color:--my-var)',
+        '-mask-y-to-(length:--my-var)',
+
+        'mask-y-to-[-25%]',
+        'mask-y-to-[25%]/foo',
+        'mask-y-to-[-25%]/foo',
+        '-mask-y-to-[-25%]',
+        '-mask-y-to-[25%]/foo',
+        '-mask-y-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -15226,36 +15322,44 @@ test('mask-linear-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-linear-from',
-      'mask-linear-from-2.8175',
-      'mask-linear-from--1.5',
-      'mask-linear-from--2',
-
-      'mask-linear-from-2.5%',
-      'mask-linear-from--5%',
-      'mask-linear-from-unknown',
-      'mask-linear-from-unknown%',
-
-      '-mask-linear-from-0',
-      '-mask-linear-from-1.5',
-      '-mask-linear-from-2',
-      '-mask-linear-from-0%',
-      '-mask-linear-from-2%',
-      '-mask-linear-from-[0px]',
-      '-mask-linear-from-[0%]',
-
-      '-mask-linear-from-(--my-var)',
-      '-mask-linear-from-(color:--my-var)',
-      '-mask-linear-from-(length:--my-var)',
-
-      'mask-linear-from-[-25%]',
-      'mask-linear-from-[25%]/foo',
-      'mask-linear-from-[-25%]/foo',
-      '-mask-linear-from-[-25%]',
-      '-mask-linear-from-[25%]/foo',
-      '-mask-linear-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-from',
+        'mask-linear-from-2.8175',
+        'mask-linear-from--1.5',
+        'mask-linear-from--2',
+
+        'mask-linear-from-2.5%',
+        'mask-linear-from--5%',
+        'mask-linear-from-unknown',
+        'mask-linear-from-unknown%',
+
+        '-mask-linear-from-0',
+        '-mask-linear-from-1.5',
+        '-mask-linear-from-2',
+        '-mask-linear-from-0%',
+        '-mask-linear-from-2%',
+        '-mask-linear-from-[0px]',
+        '-mask-linear-from-[0%]',
+
+        '-mask-linear-from-(--my-var)',
+        '-mask-linear-from-(color:--my-var)',
+        '-mask-linear-from-(length:--my-var)',
+
+        'mask-linear-from-[-25%]',
+        'mask-linear-from-[25%]/foo',
+        'mask-linear-from-[-25%]/foo',
+        '-mask-linear-from-[-25%]',
+        '-mask-linear-from-[25%]/foo',
+        '-mask-linear-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -15444,36 +15548,44 @@ test('mask-linear-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-linear-to',
-      'mask-linear-to-2.8175',
-      'mask-linear-to--1.5',
-      'mask-linear-to--2',
-
-      'mask-linear-to-2.5%',
-      'mask-linear-to--5%',
-      'mask-linear-to-unknown',
-      'mask-linear-to-unknown%',
-
-      '-mask-linear-to-0',
-      '-mask-linear-to-1.5',
-      '-mask-linear-to-2',
-      '-mask-linear-to-0%',
-      '-mask-linear-to-2%',
-      '-mask-linear-to-[0px]',
-      '-mask-linear-to-[0%]',
-
-      '-mask-linear-to-(--my-var)',
-      '-mask-linear-to-(color:--my-var)',
-      '-mask-linear-to-(length:--my-var)',
-
-      'mask-linear-to-[-25%]',
-      'mask-linear-to-[25%]/foo',
-      'mask-linear-to-[-25%]/foo',
-      '-mask-linear-to-[-25%]',
-      '-mask-linear-to-[25%]/foo',
-      '-mask-linear-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-to',
+        'mask-linear-to-2.8175',
+        'mask-linear-to--1.5',
+        'mask-linear-to--2',
+
+        'mask-linear-to-2.5%',
+        'mask-linear-to--5%',
+        'mask-linear-to-unknown',
+        'mask-linear-to-unknown%',
+
+        '-mask-linear-to-0',
+        '-mask-linear-to-1.5',
+        '-mask-linear-to-2',
+        '-mask-linear-to-0%',
+        '-mask-linear-to-2%',
+        '-mask-linear-to-[0px]',
+        '-mask-linear-to-[0%]',
+
+        '-mask-linear-to-(--my-var)',
+        '-mask-linear-to-(color:--my-var)',
+        '-mask-linear-to-(length:--my-var)',
+
+        'mask-linear-to-[-25%]',
+        'mask-linear-to-[25%]/foo',
+        'mask-linear-to-[-25%]/foo',
+        '-mask-linear-to-[-25%]',
+        '-mask-linear-to-[25%]/foo',
+        '-mask-linear-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -15905,36 +16017,44 @@ test('mask-radial-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-radial-from',
-      'mask-radial-from-2.8175',
-      'mask-radial-from--1.5',
-      'mask-radial-from--2',
-
-      'mask-radial-from-2.5%',
-      'mask-radial-from--5%',
-      'mask-radial-from-unknown',
-      'mask-radial-from-unknown%',
-
-      '-mask-radial-from-0',
-      '-mask-radial-from-1.5',
-      '-mask-radial-from-2',
-      '-mask-radial-from-0%',
-      '-mask-radial-from-2%',
-      '-mask-radial-from-[0px]',
-      '-mask-radial-from-[0%]',
-
-      '-mask-radial-from-(--my-var)',
-      '-mask-radial-from-(color:--my-var)',
-      '-mask-radial-from-(length:--my-var)',
-
-      'mask-radial-from-[-25%]',
-      'mask-radial-from-[25%]/foo',
-      'mask-radial-from-[-25%]/foo',
-      '-mask-radial-from-[-25%]',
-      '-mask-radial-from-[25%]/foo',
-      '-mask-radial-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-from',
+        'mask-radial-from-2.8175',
+        'mask-radial-from--1.5',
+        'mask-radial-from--2',
+
+        'mask-radial-from-2.5%',
+        'mask-radial-from--5%',
+        'mask-radial-from-unknown',
+        'mask-radial-from-unknown%',
+
+        '-mask-radial-from-0',
+        '-mask-radial-from-1.5',
+        '-mask-radial-from-2',
+        '-mask-radial-from-0%',
+        '-mask-radial-from-2%',
+        '-mask-radial-from-[0px]',
+        '-mask-radial-from-[0%]',
+
+        '-mask-radial-from-(--my-var)',
+        '-mask-radial-from-(color:--my-var)',
+        '-mask-radial-from-(length:--my-var)',
+
+        'mask-radial-from-[-25%]',
+        'mask-radial-from-[25%]/foo',
+        'mask-radial-from-[-25%]/foo',
+        '-mask-radial-from-[-25%]',
+        '-mask-radial-from-[25%]/foo',
+        '-mask-radial-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -16135,36 +16255,44 @@ test('mask-radial-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-radial-to',
-      'mask-radial-to-2.8175',
-      'mask-radial-to--1.5',
-      'mask-radial-to--2',
-
-      'mask-radial-to-2.5%',
-      'mask-radial-to--5%',
-      'mask-radial-to-unknown',
-      'mask-radial-to-unknown%',
-
-      '-mask-radial-to-0',
-      '-mask-radial-to-1.5',
-      '-mask-radial-to-2',
-      '-mask-radial-to-0%',
-      '-mask-radial-to-2%',
-      '-mask-radial-to-[0px]',
-      '-mask-radial-to-[0%]',
-
-      '-mask-radial-to-(--my-var)',
-      '-mask-radial-to-(color:--my-var)',
-      '-mask-radial-to-(length:--my-var)',
-
-      'mask-radial-to-[-25%]',
-      'mask-radial-to-[25%]/foo',
-      'mask-radial-to-[-25%]/foo',
-      '-mask-radial-to-[-25%]',
-      '-mask-radial-to-[25%]/foo',
-      '-mask-radial-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-to',
+        'mask-radial-to-2.8175',
+        'mask-radial-to--1.5',
+        'mask-radial-to--2',
+
+        'mask-radial-to-2.5%',
+        'mask-radial-to--5%',
+        'mask-radial-to-unknown',
+        'mask-radial-to-unknown%',
+
+        '-mask-radial-to-0',
+        '-mask-radial-to-1.5',
+        '-mask-radial-to-2',
+        '-mask-radial-to-0%',
+        '-mask-radial-to-2%',
+        '-mask-radial-to-[0px]',
+        '-mask-radial-to-[0%]',
+
+        '-mask-radial-to-(--my-var)',
+        '-mask-radial-to-(color:--my-var)',
+        '-mask-radial-to-(length:--my-var)',
+
+        'mask-radial-to-[-25%]',
+        'mask-radial-to-[25%]/foo',
+        'mask-radial-to-[-25%]/foo',
+        '-mask-radial-to-[-25%]',
+        '-mask-radial-to-[25%]/foo',
+        '-mask-radial-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -16462,36 +16590,44 @@ test('mask-conic-from', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-conic-from',
-      'mask-conic-from-2.8175',
-      'mask-conic-from--1.5',
-      'mask-conic-from--2',
-
-      'mask-conic-from-2.5%',
-      'mask-conic-from--5%',
-      'mask-conic-from-unknown',
-      'mask-conic-from-unknown%',
-
-      '-mask-conic-from-0',
-      '-mask-conic-from-1.5',
-      '-mask-conic-from-2',
-      '-mask-conic-from-0%',
-      '-mask-conic-from-2%',
-      '-mask-conic-from-[0px]',
-      '-mask-conic-from-[0%]',
-
-      '-mask-conic-from-(--my-var)',
-      '-mask-conic-from-(color:--my-var)',
-      '-mask-conic-from-(length:--my-var)',
-
-      'mask-conic-from-[-25%]',
-      'mask-conic-from-[25%]/foo',
-      'mask-conic-from-[-25%]/foo',
-      '-mask-conic-from-[-25%]',
-      '-mask-conic-from-[25%]/foo',
-      '-mask-conic-from-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-from',
+        'mask-conic-from-2.8175',
+        'mask-conic-from--1.5',
+        'mask-conic-from--2',
+
+        'mask-conic-from-2.5%',
+        'mask-conic-from--5%',
+        'mask-conic-from-unknown',
+        'mask-conic-from-unknown%',
+
+        '-mask-conic-from-0',
+        '-mask-conic-from-1.5',
+        '-mask-conic-from-2',
+        '-mask-conic-from-0%',
+        '-mask-conic-from-2%',
+        '-mask-conic-from-[0px]',
+        '-mask-conic-from-[0%]',
+
+        '-mask-conic-from-(--my-var)',
+        '-mask-conic-from-(color:--my-var)',
+        '-mask-conic-from-(length:--my-var)',
+
+        'mask-conic-from-[-25%]',
+        'mask-conic-from-[25%]/foo',
+        'mask-conic-from-[-25%]/foo',
+        '-mask-conic-from-[-25%]',
+        '-mask-conic-from-[25%]/foo',
+        '-mask-conic-from-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 
@@ -16680,36 +16816,44 @@ test('mask-conic-to', async () => {
     }"
   `)
   expect(
-    await run([
-      'mask-conic-to',
-      'mask-conic-to-2.8175',
-      'mask-conic-to--1.5',
-      'mask-conic-to--2',
-
-      'mask-conic-to-2.5%',
-      'mask-conic-to--5%',
-      'mask-conic-to-unknown',
-      'mask-conic-to-unknown%',
-
-      '-mask-conic-to-0',
-      '-mask-conic-to-1.5',
-      '-mask-conic-to-2',
-      '-mask-conic-to-0%',
-      '-mask-conic-to-2%',
-      '-mask-conic-to-[0px]',
-      '-mask-conic-to-[0%]',
-
-      '-mask-conic-to-(--my-var)',
-      '-mask-conic-to-(color:--my-var)',
-      '-mask-conic-to-(length:--my-var)',
-
-      'mask-conic-to-[-25%]',
-      'mask-conic-to-[25%]/foo',
-      'mask-conic-to-[-25%]/foo',
-      '-mask-conic-to-[-25%]',
-      '-mask-conic-to-[25%]/foo',
-      '-mask-conic-to-[-25%]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-to',
+        'mask-conic-to-2.8175',
+        'mask-conic-to--1.5',
+        'mask-conic-to--2',
+
+        'mask-conic-to-2.5%',
+        'mask-conic-to--5%',
+        'mask-conic-to-unknown',
+        'mask-conic-to-unknown%',
+
+        '-mask-conic-to-0',
+        '-mask-conic-to-1.5',
+        '-mask-conic-to-2',
+        '-mask-conic-to-0%',
+        '-mask-conic-to-2%',
+        '-mask-conic-to-[0px]',
+        '-mask-conic-to-[0%]',
+
+        '-mask-conic-to-(--my-var)',
+        '-mask-conic-to-(color:--my-var)',
+        '-mask-conic-to-(length:--my-var)',
+
+        'mask-conic-to-[-25%]',
+        'mask-conic-to-[25%]/foo',
+        'mask-conic-to-[-25%]/foo',
+        '-mask-conic-to-[-25%]',
+        '-mask-conic-to-[25%]/foo',
+        '-mask-conic-to-[-25%]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 

From 04352a3be13ac98fb65ee7592398874ebe802b3f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 11:57:29 -0400
Subject: [PATCH 29/29] Add `mask-{position,size}-*` utilities

---
 packages/tailwindcss/src/utilities.test.ts | 86 ++++++++++++++++++++++
 packages/tailwindcss/src/utilities.ts      | 12 +++
 2 files changed, 98 insertions(+)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 16969260d883..ba4c29ee86e3 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11934,6 +11934,92 @@ test('mask', async () => {
   `)
 })
 
+test('mask-position', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      ['mask-position-[120px]', 'mask-position-[120px_120px]', 'mask-position-[var(--some-var)]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-position-\\[120px\\] {
+      -webkit-mask-position: 120px;
+      mask-position: 120px;
+    }
+
+    .mask-position-\\[120px_120px\\] {
+      -webkit-mask-position: 120px 120px;
+      mask-position: 120px 120px;
+    }
+
+    .mask-position-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-position: var(--some-var);
+      -webkit-mask-position: var(--some-var);
+      mask-position: var(--some-var);
+    }"
+  `)
+  expect(
+    await run([
+      'mask-position',
+      'mask-position/foo',
+      '-mask-position',
+      '-mask-position/foo',
+
+      'mask-position-[120px_120px]/foo',
+
+      '-mask-position-[120px_120px]',
+      '-mask-position-[120px_120px]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-size', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      ['mask-size-[120px]', 'mask-size-[120px_120px]', 'mask-size-[var(--some-var)]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-size-\\[120px\\] {
+      -webkit-mask-size: 120px;
+      mask-size: 120px;
+    }
+
+    .mask-size-\\[120px_120px\\] {
+      -webkit-mask-size: 120px 120px;
+      mask-size: 120px 120px;
+    }
+
+    .mask-size-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-size: var(--some-var);
+      -webkit-mask-size: var(--some-var);
+      mask-size: var(--some-var);
+    }"
+  `)
+  expect(
+    await run([
+      'mask-size',
+      'mask-size/foo',
+      '-mask-size',
+      '-mask-size/foo',
+
+      'mask-size-[120px_120px]/foo',
+
+      '-mask-size-[120px_120px]',
+      '-mask-size-[120px_120px]/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('mask-t-from', async () => {
   expect(
     await compileCss(
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index fbc776e2239b..2178f5d80cc3 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2894,6 +2894,12 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-auto', [['mask-size', 'auto']])
     staticUtility('mask-cover', [['mask-size', 'cover']])
     staticUtility('mask-contain', [['mask-size', 'contain']])
+    functionalUtility('mask-size', {
+      handle(value) {
+        if (!value) return
+        return [decl('mask-size', value)]
+      },
+    })
 
     /**
      * @css `mask-position`
@@ -2908,6 +2914,12 @@ export function createUtilities(theme: Theme) {
     staticUtility('mask-left', [['mask-position', 'left']])
     staticUtility('mask-right', [['mask-position', 'right']])
     staticUtility('mask-center', [['mask-position', 'center']])
+    functionalUtility('mask-position', {
+      handle(value) {
+        if (!value) return
+        return [decl('mask-position', value)]
+      },
+    })
 
     /**
      * @css `mask-repeat`