diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index 5cb689ff83de..8a6924583667 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -713,6 +713,13 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
         --tw-content: "components/my-component.tsx";
         content: var(--tw-content);
@@ -944,6 +951,13 @@ test(
     expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./project-a/dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\'project-a\\/node_modules\\/my-lib-1\\/src\\/index\\.html\\'\\] {
         --tw-content: 'project-a/node modules/my-lib-1/src/index.html';
         content: var(--tw-content);
@@ -1181,6 +1195,13 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\"pages\\/foo\\.html\\"\\] {
         --tw-content: "pages/foo.html";
         content: var(--tw-content);
@@ -1508,7 +1529,7 @@ test(
       "
       --- ./dist/out.css ---
       :root, :host {
-        --color-blue-500: oklch(0.623 0.214 259.815);
+        --color-blue-500: oklch(62.3% 0.214 259.815);
       }
       .flex {
         display: flex;
@@ -1531,8 +1552,8 @@ test(
       "
       --- ./dist/out.css ---
       :root, :host {
-        --color-red-500: oklch(0.637 0.237 25.331);
-        --color-blue-500: oklch(0.623 0.214 259.815);
+        --color-red-500: oklch(63.7% 0.237 25.331);
+        --color-blue-500: oklch(62.3% 0.214 259.815);
       }
       .flex {
         display: flex;
diff --git a/integrations/postcss/next.test.ts b/integrations/postcss/next.test.ts
index acfa7513033e..dbc31ffe19a1 100644
--- a/integrations/postcss/next.test.ts
+++ b/integrations/postcss/next.test.ts
@@ -48,7 +48,7 @@ test(
       'app/page.module.css': css`
         @reference './globals.css';
         .heading {
-          @apply text-red-500 animate-ping;
+          @apply text-red-500 animate-ping skew-7;
         }
       `,
       'app/globals.css': css`
@@ -77,9 +77,10 @@ test(
     ])
 
     await fs.expectFileToContain(moduleCss!, [
-      'color:var(--color-red-500,oklch(.637 .237 25.331)',
+      'color:var(--color-red-500,oklch(63.7% .237 25.331)',
       'animation:var(--animate-ping,ping 1s cubic-bezier(0,0,.2,1) infinite)',
       /@keyframes page_ping.*{75%,to{transform:scale\(2\);opacity:0}/,
+      '--tw-skew-x:skewX(7deg);',
     ])
   },
 )
@@ -130,7 +131,7 @@ describe.each(['turbo', 'webpack'])('%s', (bundler) => {
         'app/page.module.css': css`
           @reference './globals.css';
           .heading {
-            @apply text-red-500 animate-ping content-['module'];
+            @apply text-red-500 animate-ping skew-7 content-['module'];
           }
         `,
         'app/globals.css': css`
@@ -173,6 +174,7 @@ describe.each(['turbo', 'webpack'])('%s', (bundler) => {
         let css = await fetchStyles(url)
         expect(css).toContain(candidate`underline`)
         expect(css).toContain(candidate`bg-red-500`)
+        expect(css).toContain('--tw-skew-x: skewX(7deg);')
         expect(css).toContain('content: var(--tw-content)')
         expect(css).toContain('@keyframes')
       })
diff --git a/integrations/postcss/source.test.ts b/integrations/postcss/source.test.ts
index 111a8156238c..5d430a3c47bd 100644
--- a/integrations/postcss/source.test.ts
+++ b/integrations/postcss/source.test.ts
@@ -94,6 +94,13 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\"components\\/my-component\\.tsx\\"\\] {
         --tw-content: "components/my-component.tsx";
         content: var(--tw-content);
@@ -324,6 +331,13 @@ test(
     expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./project-a/dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\'project-a\\/node_modules\\/my-lib-1\\/src\\/index\\.html\\'\\] {
         --tw-content: 'project-a/node modules/my-lib-1/src/index.html';
         content: var(--tw-content);
@@ -579,6 +593,13 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\"pages\\/foo\\.html\\"\\] {
         --tw-content: "pages/foo.html";
         content: var(--tw-content);
@@ -683,6 +704,13 @@ test(
     expect(await fs.dumpFiles('./project-a/dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./project-a/dist/out.css ---
+      @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+        @layer base {
+          *, ::before, ::after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
       .content-\\[\\'keep-me\\.html\\'\\] {
         --tw-content: 'keep-me.html';
         content: var(--tw-content);
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index b667a3f0940b..6df4d2088da2 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -472,17 +472,17 @@ test(
       @import 'tailwindcss';
 
       @theme {
-        --color-gray-50: oklch(0.985 0 0);
-        --color-gray-100: oklch(0.97 0 0);
-        --color-gray-200: oklch(0.922 0 0);
-        --color-gray-300: oklch(0.87 0 0);
-        --color-gray-400: oklch(0.708 0 0);
-        --color-gray-500: oklch(0.556 0 0);
-        --color-gray-600: oklch(0.439 0 0);
-        --color-gray-700: oklch(0.371 0 0);
-        --color-gray-800: oklch(0.269 0 0);
-        --color-gray-900: oklch(0.205 0 0);
-        --color-gray-950: oklch(0.145 0 0);
+        --color-gray-50: oklch(98.5% 0 0);
+        --color-gray-100: oklch(97% 0 0);
+        --color-gray-200: oklch(92.2% 0 0);
+        --color-gray-300: oklch(87% 0 0);
+        --color-gray-400: oklch(70.8% 0 0);
+        --color-gray-500: oklch(55.6% 0 0);
+        --color-gray-600: oklch(43.9% 0 0);
+        --color-gray-700: oklch(37.1% 0 0);
+        --color-gray-800: oklch(26.9% 0 0);
+        --color-gray-900: oklch(20.5% 0 0);
+        --color-gray-950: oklch(14.5% 0 0);
       }
 
       /*
@@ -1061,7 +1061,7 @@ describe('border compatibility', () => {
           ::before,
           ::backdrop,
           ::file-selector-button {
-            border-color: oklch(0.623 0.214 259.815);
+            border-color: oklch(62.3% 0.214 259.815);
           }
         }
         "
diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts
index 053819c73e20..1efb38987528 100644
--- a/integrations/vite/svelte.test.ts
+++ b/integrations/vite/svelte.test.ts
@@ -100,8 +100,8 @@ test(
 
     await fs.expectFileToContain(files[0][0], [
       candidate`underline`,
-      '.global{color:var(--color-green-500,oklch(.723 .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
-      /\.local.svelte-.*\{color:var\(--color-red-500\,oklch\(\.637 \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
+      '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
+      /\.local.svelte-.*\{color:var\(--color-red-500\,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
       /@keyframes globalKeyframes\{/,
       /@keyframes svelte-.*-localKeyframes\{/,
     ])
@@ -213,10 +213,10 @@ test(
       let [, css] = files[0]
       expect(css).toContain(candidate`underline`)
       expect(css).toContain(
-        '.global{color:var(--color-green-500,oklch(.723 .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
+        '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
       )
       expect(css).toMatch(
-        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(\.637 \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
+        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
       )
       expect(css).toMatch(/@keyframes globalKeyframes\{/)
       expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
@@ -238,15 +238,15 @@ test(
       let [, css] = files[0]
       expect(css).toContain(candidate`font-bold`)
       expect(css).toContain(
-        '.global{color:var(--color-green-500,oklch(.723 .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
+        '.global{color:var(--color-green-500,oklch(72.3% .219 149.579));animation:2s ease-in-out infinite globalKeyframes}',
       )
       expect(css).toMatch(
-        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(\.637 \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
+        /\.local.svelte-.*\{color:var\(--color-red-500,oklch\(63\.7% \.237 25\.331\)\);animation:2s ease-in-out infinite svelte-.*-localKeyframes\}/,
       )
       expect(css).toMatch(/@keyframes globalKeyframes\{/)
       expect(css).toMatch(/@keyframes svelte-.*-localKeyframes\{/)
       expect(css).toMatch(
-        /\.bar.svelte-.*\{color:var\(--color-pink-500,oklch\(\.656 \.241 354\.308\)\)\}/,
+        /\.bar.svelte-.*\{color:var\(--color-pink-500,oklch\(65\.6% \.241 354\.308\)\)\}/,
       )
     })
   },
diff --git a/integrations/webpack/index.test.ts b/integrations/webpack/index.test.ts
index b4447905ccd9..8a4c871a78e1 100644
--- a/integrations/webpack/index.test.ts
+++ b/integrations/webpack/index.test.ts
@@ -75,7 +75,7 @@ test(
       "
       --- ./dist/main.css ---
       :root, :host {
-        --color-blue-500: oklch(0.623 0.214 259.815);
+        --color-blue-500: oklch(62.3% 0.214 259.815);
       }
       .flex {
         display: flex;
@@ -98,8 +98,8 @@ test(
       "
       --- ./dist/main.css ---
       :root, :host {
-        --color-red-500: oklch(0.637 0.237 25.331);
-        --color-blue-500: oklch(0.623 0.214 259.815);
+        --color-red-500: oklch(63.7% 0.237 25.331);
+        --color-blue-500: oklch(62.3% 0.214 259.815);
       }
       .flex {
         display: flex;
diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json
index e0c3de741bf4..3268fb39a6e7 100644
--- a/packages/@tailwindcss-cli/package.json
+++ b/packages/@tailwindcss-cli/package.json
@@ -33,7 +33,6 @@
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
     "enhanced-resolve": "^5.18.1",
-    "lightningcss": "catalog:",
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
     "tailwindcss": "workspace:*"
diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts
index 8eb60d90286b..0b3bc2190ec0 100644
--- a/packages/@tailwindcss-cli/src/commands/build/index.ts
+++ b/packages/@tailwindcss-cli/src/commands/build/index.ts
@@ -2,10 +2,10 @@ import watcher from '@parcel/watcher'
 import { compile, env, Instrumentation } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner, type ChangedContent } from '@tailwindcss/oxide'
-import { Features, transform } from 'lightningcss'
 import { existsSync, type Stats } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import { optimize } from '../../../../@tailwindcss-node/src'
 import type { Arg, Result } from '../../utils/args'
 import { Disposables } from '../../utils/disposables'
 import {
@@ -128,7 +128,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
     if (args['--minify'] || args['--optimize']) {
       if (css !== previous.css) {
         DEBUG && I.start('Optimize CSS')
-        let optimizedCss = optimizeCss(css, {
+        let optimizedCss = optimize(css, {
           file: args['--input'] ?? 'input.css',
           minify: args['--minify'] ?? false,
         })
@@ -430,39 +430,6 @@ async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
   }
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: Features.Nesting,
-      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
-
 function watchDirectories(scanner: Scanner) {
   return [...new Set(scanner.normalizedSources.flatMap((globEntry) => globEntry.base))]
 }
diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json
index cece03c34cfd..81f4aa1b30f5 100644
--- a/packages/@tailwindcss-node/package.json
+++ b/packages/@tailwindcss-node/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "enhanced-resolve": "^5.18.1",
     "jiti": "^2.4.2",
-    "tailwindcss": "workspace:*"
+    "tailwindcss": "workspace:*",
+    "lightningcss": "catalog:"
   }
 }
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
index 54e0256b96e4..ef9dfbcba57d 100644
--- a/packages/@tailwindcss-node/src/compile.ts
+++ b/packages/@tailwindcss-node/src/compile.ts
@@ -9,12 +9,13 @@ import {
   compile as _compile,
   compileAst as _compileAst,
   Features,
+  Polyfills,
 } from 'tailwindcss'
 import type { AstNode } from '../../tailwindcss/src/ast'
 import { getModuleDependencies } from './get-module-dependencies'
 import { rewriteUrls } from './urls'
 
-export { Features }
+export { Features, Polyfills }
 
 export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
 
@@ -22,6 +23,7 @@ export interface CompileOptions {
   base: string
   onDependency: (path: string) => void
   shouldRewriteUrls?: boolean
+  polyfills?: Polyfills
 
   customCssResolver?: Resolver
   customJsResolver?: Resolver
@@ -29,6 +31,7 @@ export interface CompileOptions {
 
 function createCompileOptions({
   base,
+  polyfills,
   onDependency,
   shouldRewriteUrls,
 
@@ -37,6 +40,7 @@ function createCompileOptions({
 }: CompileOptions) {
   return {
     base,
+    polyfills,
     async loadModule(id: string, base: string) {
       return loadModule(id, base, onDependency, customJsResolver)
     },
diff --git a/packages/@tailwindcss-node/src/index.cts b/packages/@tailwindcss-node/src/index.cts
index 2e79e25c7566..b9284a0c8628 100644
--- a/packages/@tailwindcss-node/src/index.cts
+++ b/packages/@tailwindcss-node/src/index.cts
@@ -4,6 +4,7 @@ import * as env from './env'
 export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
+export * from './optimize'
 export { env }
 
 // In Bun, ESM modules will also populate `require.cache`, so the module hook is
diff --git a/packages/@tailwindcss-node/src/index.ts b/packages/@tailwindcss-node/src/index.ts
index 4ee2fe80587d..83d603429388 100644
--- a/packages/@tailwindcss-node/src/index.ts
+++ b/packages/@tailwindcss-node/src/index.ts
@@ -1,9 +1,10 @@
 import * as Module from 'node:module'
 import { pathToFileURL } from 'node:url'
 import * as env from './env'
-export { __unstable__loadDesignSystem, compile, compileAst, Features } from './compile'
+export * from './compile'
 export * from './instrumentation'
 export * from './normalize-path'
+export * from './optimize'
 export { env }
 
 // In Bun, ESM modules will also populate `require.cache`, so the module hook is
diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts
new file mode 100644
index 000000000000..bf7ab674a4f8
--- /dev/null
+++ b/packages/@tailwindcss-node/src/optimize.ts
@@ -0,0 +1,40 @@
+import { Features, transform } from 'lightningcss'
+
+export function optimize(
+  input: string,
+  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
+): string {
+  function optimize(code: Buffer | Uint8Array) {
+    return transform({
+      filename: file,
+      code: code as any,
+      minify,
+      sourceMap: false,
+      drafts: {
+        customMedia: true,
+      },
+      nonStandard: {
+        deepSelectorCombinator: true,
+      },
+      include: Features.Nesting | Features.MediaQueries,
+      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 111 << 16,
+      },
+      errorRecovery: true,
+    }).code
+  }
+
+  // Running Lightning CSS twice to ensure that adjacent rules are merged after
+  // nesting is applied. This creates a more optimized output.
+  let out = optimize(optimize(Buffer.from(input))).toString()
+
+  // Work around an issue where the media query range syntax transpilation
+  // generates code that is invalid with `@media` queries level 3.
+  out = out.replaceAll('@media not (', '@media not all and (')
+
+  return out
+}
diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json
index b7ba3203c06b..7625f85b99c6 100644
--- a/packages/@tailwindcss-postcss/package.json
+++ b/packages/@tailwindcss-postcss/package.json
@@ -33,7 +33,6 @@
     "@alloc/quick-lru": "^5.2.0",
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "lightningcss": "catalog:",
     "postcss": "^8.4.41",
     "tailwindcss": "workspace:*"
   },
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 12b578d4423f..a4d9a400c243 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -1,7 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@layer theme {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-font-weight: initial;
+    }
+  }
+}
+
+@layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -260,14 +268,20 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   .text-black\\/50 {
-    color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-black\\/50 {
+      color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
   }
 
   .underline {
     text-decoration-line: underline;
   }
 
-  @media (width >= 96rem) {
+  @media (min-width: 96rem) {
     .\\32 xl\\:font-bold {
       --tw-font-weight: var(--font-weight-bold);
       font-weight: var(--font-weight-bold);
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
index 9415fcc4d317..11d8e34967b4 100644
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -102,7 +102,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
     ".foo {
-      color: var(--color-red-500, oklch(.637 .237 25.331));
+      color: var(--color-red-500, oklch(63.7% .237 25.331));
     }"
   `)
 })
@@ -276,7 +276,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@media (width >= 48rem) {
+    "@media (min-width: 48rem) {
       .foo {
         bar: baz;
       }
diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts
index b15e124b7c4e..5a76aba13acb 100644
--- a/packages/@tailwindcss-postcss/src/index.ts
+++ b/packages/@tailwindcss-postcss/src/index.ts
@@ -1,8 +1,14 @@
 import QuickLRU from '@alloc/quick-lru'
-import { compileAst, env, Features, Instrumentation } from '@tailwindcss/node'
+import {
+  compileAst,
+  env,
+  Features,
+  Instrumentation,
+  optimize as optimizeCss,
+  Polyfills,
+} from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs'
 import path, { relative } from 'node:path'
 import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss'
@@ -67,6 +73,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
           using I = new Instrumentation()
 
           let inputFile = result.opts.from ?? ''
+          let isCSSModuleFile = inputFile.endsWith('.module.css')
 
           DEBUG && I.start(`[@tailwindcss/postcss] ${relative(base, inputFile)}`)
 
@@ -114,6 +121,10 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
               onDependency: (path) => {
                 context.fullRebuildPaths.push(path)
               },
+              // In CSS Module files, we have to disable the `@property` polyfill since these will
+              // emit global `*` rules which are considered to be non-pure and will cause builds
+              // to fail.
+              polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
             })
             DEBUG && I.end('Create compiler')
 
@@ -308,40 +319,4 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
   }
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: LightningCssFeatures.Nesting,
-      exclude:
-        LightningCssFeatures.LogicalProperties |
-        LightningCssFeatures.DirSelector |
-        LightningCssFeatures.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
-
 export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>
diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json
index 7790be2719f0..8e3f620819f0 100644
--- a/packages/@tailwindcss-vite/package.json
+++ b/packages/@tailwindcss-vite/package.json
@@ -30,7 +30,6 @@
   "dependencies": {
     "@tailwindcss/node": "workspace:*",
     "@tailwindcss/oxide": "workspace:*",
-    "lightningcss": "catalog:",
     "tailwindcss": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index de6b2cde33cd..b47201b247a6 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -1,7 +1,6 @@
-import { compile, env, Features, Instrumentation, normalizePath } from '@tailwindcss/node'
+import { compile, env, Features, Instrumentation, normalizePath, optimize } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
-import { Features as LightningCssFeatures, transform } from 'lightningcss'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
@@ -102,7 +101,7 @@ export default function tailwindcss(): Plugin[] {
         DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)')
 
         DEBUG && I.start('[@tailwindcss/vite] Optimize CSS')
-        generated = optimizeCss(generated, { minify })
+        generated = optimize(generated, { minify })
         DEBUG && I.end('[@tailwindcss/vite] Optimize CSS')
 
         return { code: generated }
@@ -127,42 +126,6 @@ function isPotentialCssRootFile(id: string) {
   return isCssFile
 }
 
-function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array | any) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: LightningCssFeatures.Nesting,
-      exclude:
-        LightningCssFeatures.LogicalProperties |
-        LightningCssFeatures.DirSelector |
-        LightningCssFeatures.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
-
 function idToPath(id: string) {
   return path.resolve(id.replace(/\?.*$/, ''))
 }
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 7a7cf1a2aba6..48a2e9a5dad8 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -1,8 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-":root, :host {
-  --color-red-500: oklch(.637 .237 25.331);
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
+
+:root, :host {
+  --color-red-500: oklch(63.7% .237 25.331);
   --spacing: .25rem;
 }
 
@@ -19,7 +40,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-@media (width >= 40rem) {
+@media (min-width: 40rem) {
   .sm\\:flex {
     display: flex;
   }
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 5f1c2fea3f54..6318b7aad0c9 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -1,7 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`border-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -80,7 +88,7 @@ exports[`border-* 1`] = `
 }
 
 .border-\\[\\#0088cc\\]\\/50 {
-  border-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-\\[color\\:var\\(--my-color\\)\\] {
@@ -116,19 +124,43 @@ exports[`border-* 1`] = `
 }
 
 .border-red-500\\/2\\.5 {
-  border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-red-500\\/2\\.5 {
+    border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-red-500\\/2\\.25 {
-  border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-red-500\\/2\\.25 {
+    border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-red-500\\/2\\.75 {
-  border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-red-500\\/2\\.75 {
+    border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-red-500\\/50 {
-  border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-red-500\\/50 {
+    border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-transparent {
@@ -143,7 +175,15 @@ exports[`border-* 1`] = `
 `;
 
 exports[`border-b-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -222,7 +262,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[\\#0088cc\\]\\/50 {
-  border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-bottom-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-b-\\[color\\:var\\(--my-color\\)\\] {
@@ -258,19 +298,43 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-red-500\\/2\\.5 {
-  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-bottom-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-red-500\\/2\\.5 {
+    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-b-red-500\\/2\\.25 {
-  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-bottom-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-red-500\\/2\\.25 {
+    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-b-red-500\\/2\\.75 {
-  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-bottom-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-red-500\\/2\\.75 {
+    border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-b-red-500\\/50 {
-  border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-bottom-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-red-500\\/50 {
+    border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-b-transparent {
@@ -285,7 +349,15 @@ exports[`border-b-* 1`] = `
 `;
 
 exports[`border-e-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -364,7 +436,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[\\#0088cc\\]\\/50 {
-  border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-inline-end-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-e-\\[color\\:var\\(--my-color\\)\\] {
@@ -400,19 +472,43 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-red-500\\/2\\.5 {
-  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-inline-end-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-red-500\\/2\\.5 {
+    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-e-red-500\\/2\\.25 {
-  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-inline-end-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-red-500\\/2\\.25 {
+    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-e-red-500\\/2\\.75 {
-  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-inline-end-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-red-500\\/2\\.75 {
+    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-e-red-500\\/50 {
-  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-inline-end-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-red-500\\/50 {
+    border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-e-transparent {
@@ -427,7 +523,15 @@ exports[`border-e-* 1`] = `
 `;
 
 exports[`border-l-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -506,7 +610,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[\\#0088cc\\]\\/50 {
-  border-left-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-left-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-l-\\[color\\:var\\(--my-color\\)\\] {
@@ -542,19 +646,43 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-red-500\\/2\\.5 {
-  border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-left-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-red-500\\/2\\.5 {
+    border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-l-red-500\\/2\\.25 {
-  border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-left-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-red-500\\/2\\.25 {
+    border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-l-red-500\\/2\\.75 {
-  border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-left-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-red-500\\/2\\.75 {
+    border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-l-red-500\\/50 {
-  border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-left-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-red-500\\/50 {
+    border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-l-transparent {
@@ -569,7 +697,15 @@ exports[`border-l-* 1`] = `
 `;
 
 exports[`border-r-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -648,7 +784,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[\\#0088cc\\]\\/50 {
-  border-right-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-right-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-r-\\[color\\:var\\(--my-color\\)\\] {
@@ -684,19 +820,43 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-red-500\\/2\\.5 {
-  border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-right-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-red-500\\/2\\.5 {
+    border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-r-red-500\\/2\\.25 {
-  border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-right-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-red-500\\/2\\.25 {
+    border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-r-red-500\\/2\\.75 {
-  border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-right-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-red-500\\/2\\.75 {
+    border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-r-red-500\\/50 {
-  border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-right-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-red-500\\/50 {
+    border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-r-transparent {
@@ -711,7 +871,15 @@ exports[`border-r-* 1`] = `
 `;
 
 exports[`border-s-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -790,7 +958,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[\\#0088cc\\]\\/50 {
-  border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-inline-start-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-s-\\[color\\:var\\(--my-color\\)\\] {
@@ -826,19 +994,43 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-red-500\\/2\\.5 {
-  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-inline-start-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-red-500\\/2\\.5 {
+    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-s-red-500\\/2\\.25 {
-  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-inline-start-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-red-500\\/2\\.25 {
+    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-s-red-500\\/2\\.75 {
-  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-inline-start-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-red-500\\/2\\.75 {
+    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-s-red-500\\/50 {
-  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-inline-start-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-red-500\\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-s-transparent {
@@ -853,7 +1045,15 @@ exports[`border-s-* 1`] = `
 `;
 
 exports[`border-t-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -932,7 +1132,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[\\#0088cc\\]\\/50 {
-  border-top-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-top-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-t-\\[color\\:var\\(--my-color\\)\\] {
@@ -968,19 +1168,43 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-red-500\\/2\\.5 {
-  border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-top-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-red-500\\/2\\.5 {
+    border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-t-red-500\\/2\\.25 {
-  border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-top-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-red-500\\/2\\.25 {
+    border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-t-red-500\\/2\\.75 {
-  border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-top-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-red-500\\/2\\.75 {
+    border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-t-red-500\\/50 {
-  border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-top-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-red-500\\/50 {
+    border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-t-transparent {
@@ -995,7 +1219,15 @@ exports[`border-t-* 1`] = `
 `;
 
 exports[`border-x-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -1074,7 +1306,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[\\#0088cc\\]\\/50 {
-  border-inline-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-inline-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-x-\\[color\\:var\\(--my-color\\)\\] {
@@ -1110,19 +1342,43 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-red-500\\/2\\.5 {
-  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-inline-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-red-500\\/2\\.5 {
+    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-x-red-500\\/2\\.25 {
-  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-inline-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-red-500\\/2\\.25 {
+    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-x-red-500\\/2\\.75 {
-  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-inline-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-red-500\\/2\\.75 {
+    border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-x-red-500\\/50 {
-  border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-inline-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-red-500\\/50 {
+    border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-x-transparent {
@@ -1137,7 +1393,15 @@ exports[`border-x-* 1`] = `
 `;
 
 exports[`border-y-* 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+:root, :host {
   --color-red-500: #ef4444;
 }
 
@@ -1216,7 +1480,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[\\#0088cc\\]\\/50 {
-  border-block-color: oklab(59.9824% -.06725 -.12414 / .5);
+  border-block-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
 .border-y-\\[color\\:var\\(--my-color\\)\\] {
@@ -1252,19 +1516,43 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-red-500\\/2\\.5 {
-  border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  border-block-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-red-500\\/2\\.5 {
+    border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+  }
 }
 
 .border-y-red-500\\/2\\.25 {
-  border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  border-block-color: #ef444406;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-red-500\\/2\\.25 {
+    border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+  }
 }
 
 .border-y-red-500\\/2\\.75 {
-  border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  border-block-color: #ef444407;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-red-500\\/2\\.75 {
+    border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+  }
 }
 
 .border-y-red-500\\/50 {
-  border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  border-block-color: #ef444480;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-red-500\\/50 {
+    border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+  }
 }
 
 .border-y-transparent {
diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts
index 8bd2004ace73..9f879d64b10a 100644
--- a/packages/tailwindcss/src/ast.test.ts
+++ b/packages/tailwindcss/src/ast.test.ts
@@ -11,11 +11,14 @@ import {
   type AstNode,
 } from './ast'
 import * as CSS from './css-parser'
+import { buildDesignSystem } from './design-system'
+import { Theme } from './theme'
 
 const css = String.raw
+const defaultDesignSystem = buildDesignSystem(new Theme())
 
 it('should pretty print an AST', () => {
-  expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'))))
+  expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}'), defaultDesignSystem)))
     .toMatchInlineSnapshot(`
     ".foo {
       color: red;
@@ -64,7 +67,7 @@ it('allows the placement of context nodes', () => {
   expect(blueContext).toEqual({ context: 'a' })
   expect(greenContext).toEqual({ context: 'b' })
 
-  expect(toCss(optimizeAst(ast))).toMatchInlineSnapshot(`
+  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
     ".foo {
       color: red;
     }
@@ -189,7 +192,7 @@ it('should not emit empty rules once optimized', () => {
     "
   `)
 
-  expect(toCss(optimizeAst(ast))).toMatchInlineSnapshot(`
+  expect(toCss(optimizeAst(ast, defaultDesignSystem))).toMatchInlineSnapshot(`
     "@charset "UTF-8";
     @layer foo, bar, baz;
     @custom-media --modern (color), (hover);
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index e13e19743209..3a086a193968 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -1,8 +1,10 @@
+import { Polyfills } from '.'
 import { parseAtRule } from './css-parser'
 import type { DesignSystem } from './design-system'
 import { Theme, ThemeOptions } from './theme'
 import { DefaultMap } from './utils/default-map'
 import { extractUsedVariables } from './utils/variables'
+import * as ValueParser from './value-parser'
 
 const AT_SIGN = 0x40
 
@@ -257,7 +259,11 @@ export function walkDepth(
 
 // Optimize the AST for printing where all the special nodes that require custom
 // handling are handled such that the printing is a 1-to-1 transformation.
-export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
+export function optimizeAst(
+  ast: AstNode[],
+  designSystem: DesignSystem,
+  polyfills: Polyfills = Polyfills.All,
+) {
   let atRoots: AstNode[] = []
   let seenAtProperties = new Set<string>()
   let cssThemeVariables = new DefaultMap<
@@ -267,6 +273,9 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
   let keyframes = new Set<AtRule>()
   let usedKeyframeNames = new Set()
 
+  let propertyFallbacksRoot: Declaration[] = []
+  let propertyFallbacksUniversal: Declaration[] = []
+
   let variableDependencies = new DefaultMap<string, Set<string>>(() => new Set())
 
   function transform(
@@ -314,6 +323,53 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
           usedKeyframeNames.add(keyframeName)
       }
 
+      // Create fallback values for usages of the `color-mix(…)` function that reference variables
+      // found in the theme config.
+      if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) {
+        let ast = ValueParser.parse(node.value)
+
+        let didGenerateFallback = false
+        ValueParser.walk(ast, (node) => {
+          if (node.kind !== 'function' || node.value !== 'color-mix') return
+
+          ValueParser.walk(node.nodes, (node, { replaceWith }) => {
+            if (node.kind !== 'function' || node.value !== 'var') return
+            let firstChild = node.nodes[0]
+            if (!firstChild || firstChild.kind !== 'word') return
+
+            let inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any])
+            if (!inlinedColor) return
+
+            didGenerateFallback = true
+            replaceWith({ kind: 'word', value: inlinedColor })
+          })
+
+          // Change the colorspace to `srgb` since the fallback values should not be represented as
+          // `oklab(…)` functions again as their support in Safari <16 is very limited.
+          let colorspace = node.nodes[2]
+          if (
+            colorspace.kind === 'word' &&
+            (colorspace.value === 'oklab' ||
+              colorspace.value === 'oklch' ||
+              colorspace.value === 'lab' ||
+              colorspace.value === 'lch')
+          ) {
+            colorspace.value = 'srgb'
+          }
+        })
+
+        if (didGenerateFallback) {
+          let fallback = {
+            ...node,
+            value: ValueParser.toCss(ast),
+          }
+          let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
+
+          parent.push(fallback, colorMixQuery)
+          return
+        }
+      }
+
       parent.push(node)
     }
 
@@ -349,6 +405,29 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
         return
       }
 
+      // Collect fallbacks for `@property` rules for Firefox support We turn these into rules on
+      // `:root` or `*` and some pseudo-elements based on the value of `inherits`
+      if (polyfills & Polyfills.AtProperty) {
+        let property = node.params
+        let initialValue = null
+        let inherits = false
+
+        for (let prop of node.nodes) {
+          if (prop.kind !== 'declaration') continue
+          if (prop.property === 'initial-value') {
+            initialValue = prop.value
+          } else if (prop.property === 'inherits') {
+            inherits = prop.value === 'true'
+          }
+        }
+
+        if (inherits) {
+          propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
+        } else {
+          propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
+        }
+      }
+
       seenAtProperties.add(node.params)
 
       let copy = { ...node, nodes: [] }
@@ -369,8 +448,7 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
         transform(child, copy.nodes, context, depth + 1)
       }
 
-      // Only track `@keyframes` that could be removed, when they were defined
-      // inside of a `@theme`.
+      // Only track `@keyframes` that could be removed, when they were defined inside of a `@theme`.
       if (node.name === '@keyframes' && context.theme) {
         keyframes.add(copy)
       }
@@ -491,6 +569,35 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
     }
   }
 
+  // Fallbacks
+  if (polyfills & Polyfills.AtProperty) {
+    let fallbackAst = []
+
+    if (propertyFallbacksRoot.length > 0) {
+      fallbackAst.push(rule(':root, :host', propertyFallbacksRoot))
+    }
+
+    if (propertyFallbacksUniversal.length > 0) {
+      fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+    }
+
+    if (fallbackAst.length > 0) {
+      let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment')
+      if (firstNonCommentIndex === -1) firstNonCommentIndex = 0
+      newAst.splice(
+        firstNonCommentIndex,
+        0,
+        atRule(
+          '@supports',
+          // We can't write a supports query for `@property` directly so we have to test for
+          // features that are added around the same time in Mozilla and Safari.
+          '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
+          [rule('@layer base', fallbackAst)],
+        ),
+      )
+    }
+  }
+
   return newAst.concat(atRoots)
 }
 
diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts
index 6b418169ff8e..090279fd4bc1 100644
--- a/packages/tailwindcss/src/at-import.test.ts
+++ b/packages/tailwindcss/src/at-import.test.ts
@@ -318,7 +318,7 @@ test('@supports', async () => {
     ),
   ).resolves.toMatchInlineSnapshot(`
     "@supports (display: grid) {
-      @media screen and (width <= 400px) {
+      @media screen and (max-width: 400px) {
         a {
           color: red;
         }
@@ -337,7 +337,7 @@ test('@supports', async () => {
     ),
   ).resolves.toMatchInlineSnapshot(`
     "@supports (not (display: grid)) and (display: flex) {
-      @media screen and (width <= 400px) {
+      @media screen and (max-width: 400px) {
         a {
           color: red;
         }
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
index 0a6cba403954..67fe71c4a82c 100644
--- a/packages/tailwindcss/src/compat/colors.ts
+++ b/packages/tailwindcss/src/compat/colors.ts
@@ -5,289 +5,289 @@ export default {
   black: '#000',
   white: '#fff',
   slate: {
-    '50': 'oklch(0.984 0.003 247.858)',
-    '100': 'oklch(0.968 0.007 247.896)',
-    '200': 'oklch(0.929 0.013 255.508)',
-    '300': 'oklch(0.869 0.022 252.894)',
-    '400': 'oklch(0.704 0.04 256.788)',
-    '500': 'oklch(0.554 0.046 257.417)',
-    '600': 'oklch(0.446 0.043 257.281)',
-    '700': 'oklch(0.372 0.044 257.287)',
-    '800': 'oklch(0.279 0.041 260.031)',
-    '900': 'oklch(0.208 0.042 265.755)',
-    '950': 'oklch(0.129 0.042 264.695)',
+    '50': 'oklch(98.4% 0.003 247.858)',
+    '100': 'oklch(96.8% 0.007 247.896)',
+    '200': 'oklch(92.9% 0.013 255.508)',
+    '300': 'oklch(86.9% 0.022 252.894)',
+    '400': 'oklch(70.4% 0.04 256.788)',
+    '500': 'oklch(55.4% 0.046 257.417)',
+    '600': 'oklch(44.6% 0.043 257.281)',
+    '700': 'oklch(37.2% 0.044 257.287)',
+    '800': 'oklch(27.9% 0.041 260.031)',
+    '900': 'oklch(20.8% 0.042 265.755)',
+    '950': 'oklch(12.9% 0.042 264.695)',
   },
   gray: {
-    '50': 'oklch(0.985 0.002 247.839)',
-    '100': 'oklch(0.967 0.003 264.542)',
-    '200': 'oklch(0.928 0.006 264.531)',
-    '300': 'oklch(0.872 0.01 258.338)',
-    '400': 'oklch(0.707 0.022 261.325)',
-    '500': 'oklch(0.551 0.027 264.364)',
-    '600': 'oklch(0.446 0.03 256.802)',
-    '700': 'oklch(0.373 0.034 259.733)',
-    '800': 'oklch(0.278 0.033 256.848)',
-    '900': 'oklch(0.21 0.034 264.665)',
-    '950': 'oklch(0.13 0.028 261.692)',
+    '50': 'oklch(98.5% 0.002 247.839)',
+    '100': 'oklch(96.7% 0.003 264.542)',
+    '200': 'oklch(92.8% 0.006 264.531)',
+    '300': 'oklch(87.2% 0.01 258.338)',
+    '400': 'oklch(70.7% 0.022 261.325)',
+    '500': 'oklch(55.1% 0.027 264.364)',
+    '600': 'oklch(44.6% 0.03 256.802)',
+    '700': 'oklch(37.3% 0.034 259.733)',
+    '800': 'oklch(27.8% 0.033 256.848)',
+    '900': 'oklch(21% 0.034 264.665)',
+    '950': 'oklch(13% 0.028 261.692)',
   },
   zinc: {
-    '50': 'oklch(0.985 0 0)',
-    '100': 'oklch(0.967 0.001 286.375)',
-    '200': 'oklch(0.92 0.004 286.32)',
-    '300': 'oklch(0.871 0.006 286.286)',
-    '400': 'oklch(0.705 0.015 286.067)',
-    '500': 'oklch(0.552 0.016 285.938)',
-    '600': 'oklch(0.442 0.017 285.786)',
-    '700': 'oklch(0.37 0.013 285.805)',
-    '800': 'oklch(0.274 0.006 286.033)',
-    '900': 'oklch(0.21 0.006 285.885)',
-    '950': 'oklch(0.141 0.005 285.823)',
+    '50': 'oklch(98.5% 0 0)',
+    '100': 'oklch(96.7% 0.001 286.375)',
+    '200': 'oklch(92% 0.004 286.32)',
+    '300': 'oklch(87.1% 0.006 286.286)',
+    '400': 'oklch(70.5% 0.015 286.067)',
+    '500': 'oklch(55.2% 0.016 285.938)',
+    '600': 'oklch(44.2% 0.017 285.786)',
+    '700': 'oklch(37% 0.013 285.805)',
+    '800': 'oklch(27.4% 0.006 286.033)',
+    '900': 'oklch(21% 0.006 285.885)',
+    '950': 'oklch(14.1% 0.005 285.823)',
   },
   neutral: {
-    '50': 'oklch(0.985 0 0)',
-    '100': 'oklch(0.97 0 0)',
-    '200': 'oklch(0.922 0 0)',
-    '300': 'oklch(0.87 0 0)',
-    '400': 'oklch(0.708 0 0)',
-    '500': 'oklch(0.556 0 0)',
-    '600': 'oklch(0.439 0 0)',
-    '700': 'oklch(0.371 0 0)',
-    '800': 'oklch(0.269 0 0)',
-    '900': 'oklch(0.205 0 0)',
-    '950': 'oklch(0.145 0 0)',
+    '50': 'oklch(98.5% 0 0)',
+    '100': 'oklch(97% 0 0)',
+    '200': 'oklch(92.2% 0 0)',
+    '300': 'oklch(87% 0 0)',
+    '400': 'oklch(70.8% 0 0)',
+    '500': 'oklch(55.6% 0 0)',
+    '600': 'oklch(43.9% 0 0)',
+    '700': 'oklch(37.1% 0 0)',
+    '800': 'oklch(26.9% 0 0)',
+    '900': 'oklch(20.5% 0 0)',
+    '950': 'oklch(14.5% 0 0)',
   },
   stone: {
-    '50': 'oklch(0.985 0.001 106.423)',
-    '100': 'oklch(0.97 0.001 106.424)',
-    '200': 'oklch(0.923 0.003 48.717)',
-    '300': 'oklch(0.869 0.005 56.366)',
-    '400': 'oklch(0.709 0.01 56.259)',
-    '500': 'oklch(0.553 0.013 58.071)',
-    '600': 'oklch(0.444 0.011 73.639)',
-    '700': 'oklch(0.374 0.01 67.558)',
-    '800': 'oklch(0.268 0.007 34.298)',
-    '900': 'oklch(0.216 0.006 56.043)',
-    '950': 'oklch(0.147 0.004 49.25)',
+    '50': 'oklch(98.5% 0.001 106.423)',
+    '100': 'oklch(97% 0.001 106.424)',
+    '200': 'oklch(92.3% 0.003 48.717)',
+    '300': 'oklch(86.9% 0.005 56.366)',
+    '400': 'oklch(70.9% 0.01 56.259)',
+    '500': 'oklch(55.3% 0.013 58.071)',
+    '600': 'oklch(44.4% 0.011 73.639)',
+    '700': 'oklch(37.4% 0.01 67.558)',
+    '800': 'oklch(26.8% 0.007 34.298)',
+    '900': 'oklch(21.6% 0.006 56.043)',
+    '950': 'oklch(14.7% 0.004 49.25)',
   },
   red: {
-    '50': 'oklch(0.971 0.013 17.38)',
-    '100': 'oklch(0.936 0.032 17.717)',
-    '200': 'oklch(0.885 0.062 18.334)',
-    '300': 'oklch(0.808 0.114 19.571)',
-    '400': 'oklch(0.704 0.191 22.216)',
-    '500': 'oklch(0.637 0.237 25.331)',
-    '600': 'oklch(0.577 0.245 27.325)',
-    '700': 'oklch(0.505 0.213 27.518)',
-    '800': 'oklch(0.444 0.177 26.899)',
-    '900': 'oklch(0.396 0.141 25.723)',
-    '950': 'oklch(0.258 0.092 26.042)',
+    '50': 'oklch(97.1% 0.013 17.38)',
+    '100': 'oklch(93.6% 0.032 17.717)',
+    '200': 'oklch(88.5% 0.062 18.334)',
+    '300': 'oklch(80.8% 0.114 19.571)',
+    '400': 'oklch(70.4% 0.191 22.216)',
+    '500': 'oklch(63.7% 0.237 25.331)',
+    '600': 'oklch(57.7% 0.245 27.325)',
+    '700': 'oklch(50.5% 0.213 27.518)',
+    '800': 'oklch(44.4% 0.177 26.899)',
+    '900': 'oklch(39.6% 0.141 25.723)',
+    '950': 'oklch(25.8% 0.092 26.042)',
   },
   orange: {
-    '50': 'oklch(0.98 0.016 73.684)',
-    '100': 'oklch(0.954 0.038 75.164)',
-    '200': 'oklch(0.901 0.076 70.697)',
-    '300': 'oklch(0.837 0.128 66.29)',
-    '400': 'oklch(0.75 0.183 55.934)',
-    '500': 'oklch(0.705 0.213 47.604)',
-    '600': 'oklch(0.646 0.222 41.116)',
-    '700': 'oklch(0.553 0.195 38.402)',
-    '800': 'oklch(0.47 0.157 37.304)',
-    '900': 'oklch(0.408 0.123 38.172)',
-    '950': 'oklch(0.266 0.079 36.259)',
+    '50': 'oklch(98% 0.016 73.684)',
+    '100': 'oklch(95.4% 0.038 75.164)',
+    '200': 'oklch(90.1% 0.076 70.697)',
+    '300': 'oklch(83.7% 0.128 66.29)',
+    '400': 'oklch(75% 0.183 55.934)',
+    '500': 'oklch(70.5% 0.213 47.604)',
+    '600': 'oklch(64.6% 0.222 41.116)',
+    '700': 'oklch(55.3% 0.195 38.402)',
+    '800': 'oklch(47% 0.157 37.304)',
+    '900': 'oklch(40.8% 0.123 38.172)',
+    '950': 'oklch(26.6% 0.079 36.259)',
   },
   amber: {
-    '50': 'oklch(0.987 0.022 95.277)',
-    '100': 'oklch(0.962 0.059 95.617)',
-    '200': 'oklch(0.924 0.12 95.746)',
-    '300': 'oklch(0.879 0.169 91.605)',
-    '400': 'oklch(0.828 0.189 84.429)',
-    '500': 'oklch(0.769 0.188 70.08)',
-    '600': 'oklch(0.666 0.179 58.318)',
-    '700': 'oklch(0.555 0.163 48.998)',
-    '800': 'oklch(0.473 0.137 46.201)',
-    '900': 'oklch(0.414 0.112 45.904)',
-    '950': 'oklch(0.279 0.077 45.635)',
+    '50': 'oklch(98.7% 0.022 95.277)',
+    '100': 'oklch(96.2% 0.059 95.617)',
+    '200': 'oklch(92.4% 0.12 95.746)',
+    '300': 'oklch(87.9% 0.169 91.605)',
+    '400': 'oklch(82.8% 0.189 84.429)',
+    '500': 'oklch(76.9% 0.188 70.08)',
+    '600': 'oklch(66.6% 0.179 58.318)',
+    '700': 'oklch(55.5% 0.163 48.998)',
+    '800': 'oklch(47.3% 0.137 46.201)',
+    '900': 'oklch(41.4% 0.112 45.904)',
+    '950': 'oklch(27.9% 0.077 45.635)',
   },
   yellow: {
-    '50': 'oklch(0.987 0.026 102.212)',
-    '100': 'oklch(0.973 0.071 103.193)',
-    '200': 'oklch(0.945 0.129 101.54)',
-    '300': 'oklch(0.905 0.182 98.111)',
-    '400': 'oklch(0.852 0.199 91.936)',
-    '500': 'oklch(0.795 0.184 86.047)',
-    '600': 'oklch(0.681 0.162 75.834)',
-    '700': 'oklch(0.554 0.135 66.442)',
-    '800': 'oklch(0.476 0.114 61.907)',
-    '900': 'oklch(0.421 0.095 57.708)',
-    '950': 'oklch(0.286 0.066 53.813)',
+    '50': 'oklch(98.7% 0.026 102.212)',
+    '100': 'oklch(97.3% 0.071 103.193)',
+    '200': 'oklch(94.5% 0.129 101.54)',
+    '300': 'oklch(90.5% 0.182 98.111)',
+    '400': 'oklch(85.2% 0.199 91.936)',
+    '500': 'oklch(79.5% 0.184 86.047)',
+    '600': 'oklch(68.1% 0.162 75.834)',
+    '700': 'oklch(55.4% 0.135 66.442)',
+    '800': 'oklch(47.6% 0.114 61.907)',
+    '900': 'oklch(42.1% 0.095 57.708)',
+    '950': 'oklch(28.6% 0.066 53.813)',
   },
   lime: {
-    '50': 'oklch(0.986 0.031 120.757)',
-    '100': 'oklch(0.967 0.067 122.328)',
-    '200': 'oklch(0.938 0.127 124.321)',
-    '300': 'oklch(0.897 0.196 126.665)',
-    '400': 'oklch(0.841 0.238 128.85)',
-    '500': 'oklch(0.768 0.233 130.85)',
-    '600': 'oklch(0.648 0.2 131.684)',
-    '700': 'oklch(0.532 0.157 131.589)',
-    '800': 'oklch(0.453 0.124 130.933)',
-    '900': 'oklch(0.405 0.101 131.063)',
-    '950': 'oklch(0.274 0.072 132.109)',
+    '50': 'oklch(98.6% 0.031 120.757)',
+    '100': 'oklch(96.7% 0.067 122.328)',
+    '200': 'oklch(93.8% 0.127 124.321)',
+    '300': 'oklch(89.7% 0.196 126.665)',
+    '400': 'oklch(84.1% 0.238 128.85)',
+    '500': 'oklch(76.8% 0.233 130.85)',
+    '600': 'oklch(64.8% 0.2 131.684)',
+    '700': 'oklch(53.2% 0.157 131.589)',
+    '800': 'oklch(45.3% 0.124 130.933)',
+    '900': 'oklch(40.5% 0.101 131.063)',
+    '950': 'oklch(27.4% 0.072 132.109)',
   },
   green: {
-    '50': 'oklch(0.982 0.018 155.826)',
-    '100': 'oklch(0.962 0.044 156.743)',
-    '200': 'oklch(0.925 0.084 155.995)',
-    '300': 'oklch(0.871 0.15 154.449)',
-    '400': 'oklch(0.792 0.209 151.711)',
-    '500': 'oklch(0.723 0.219 149.579)',
-    '600': 'oklch(0.627 0.194 149.214)',
-    '700': 'oklch(0.527 0.154 150.069)',
-    '800': 'oklch(0.448 0.119 151.328)',
-    '900': 'oklch(0.393 0.095 152.535)',
-    '950': 'oklch(0.266 0.065 152.934)',
+    '50': 'oklch(98.2% 0.018 155.826)',
+    '100': 'oklch(96.2% 0.044 156.743)',
+    '200': 'oklch(92.5% 0.084 155.995)',
+    '300': 'oklch(87.1% 0.15 154.449)',
+    '400': 'oklch(79.2% 0.209 151.711)',
+    '500': 'oklch(72.3% 0.219 149.579)',
+    '600': 'oklch(62.7% 0.194 149.214)',
+    '700': 'oklch(52.7% 0.154 150.069)',
+    '800': 'oklch(44.8% 0.119 151.328)',
+    '900': 'oklch(39.3% 0.095 152.535)',
+    '950': 'oklch(26.6% 0.065 152.934)',
   },
   emerald: {
-    '50': 'oklch(0.979 0.021 166.113)',
-    '100': 'oklch(0.95 0.052 163.051)',
-    '200': 'oklch(0.905 0.093 164.15)',
-    '300': 'oklch(0.845 0.143 164.978)',
-    '400': 'oklch(0.765 0.177 163.223)',
-    '500': 'oklch(0.696 0.17 162.48)',
-    '600': 'oklch(0.596 0.145 163.225)',
-    '700': 'oklch(0.508 0.118 165.612)',
-    '800': 'oklch(0.432 0.095 166.913)',
-    '900': 'oklch(0.378 0.077 168.94)',
-    '950': 'oklch(0.262 0.051 172.552)',
+    '50': 'oklch(97.9% 0.021 166.113)',
+    '100': 'oklch(95% 0.052 163.051)',
+    '200': 'oklch(90.5% 0.093 164.15)',
+    '300': 'oklch(84.5% 0.143 164.978)',
+    '400': 'oklch(76.5% 0.177 163.223)',
+    '500': 'oklch(69.6% 0.17 162.48)',
+    '600': 'oklch(59.6% 0.145 163.225)',
+    '700': 'oklch(50.8% 0.118 165.612)',
+    '800': 'oklch(43.2% 0.095 166.913)',
+    '900': 'oklch(37.8% 0.077 168.94)',
+    '950': 'oklch(26.2% 0.051 172.552)',
   },
   teal: {
-    '50': 'oklch(0.984 0.014 180.72)',
-    '100': 'oklch(0.953 0.051 180.801)',
-    '200': 'oklch(0.91 0.096 180.426)',
-    '300': 'oklch(0.855 0.138 181.071)',
-    '400': 'oklch(0.777 0.152 181.912)',
-    '500': 'oklch(0.704 0.14 182.503)',
-    '600': 'oklch(0.6 0.118 184.704)',
-    '700': 'oklch(0.511 0.096 186.391)',
-    '800': 'oklch(0.437 0.078 188.216)',
-    '900': 'oklch(0.386 0.063 188.416)',
-    '950': 'oklch(0.277 0.046 192.524)',
+    '50': 'oklch(98.4% 0.014 180.72)',
+    '100': 'oklch(95.3% 0.051 180.801)',
+    '200': 'oklch(91% 0.096 180.426)',
+    '300': 'oklch(85.5% 0.138 181.071)',
+    '400': 'oklch(77.7% 0.152 181.912)',
+    '500': 'oklch(70.4% 0.14 182.503)',
+    '600': 'oklch(60% 0.118 184.704)',
+    '700': 'oklch(51.1% 0.096 186.391)',
+    '800': 'oklch(43.7% 0.078 188.216)',
+    '900': 'oklch(38.6% 0.063 188.416)',
+    '950': 'oklch(27.7% 0.046 192.524)',
   },
   cyan: {
-    '50': 'oklch(0.984 0.019 200.873)',
-    '100': 'oklch(0.956 0.045 203.388)',
-    '200': 'oklch(0.917 0.08 205.041)',
-    '300': 'oklch(0.865 0.127 207.078)',
-    '400': 'oklch(0.789 0.154 211.53)',
-    '500': 'oklch(0.715 0.143 215.221)',
-    '600': 'oklch(0.609 0.126 221.723)',
-    '700': 'oklch(0.52 0.105 223.128)',
-    '800': 'oklch(0.45 0.085 224.283)',
-    '900': 'oklch(0.398 0.07 227.392)',
-    '950': 'oklch(0.302 0.056 229.695)',
+    '50': 'oklch(98.4% 0.019 200.873)',
+    '100': 'oklch(95.6% 0.045 203.388)',
+    '200': 'oklch(91.7% 0.08 205.041)',
+    '300': 'oklch(86.5% 0.127 207.078)',
+    '400': 'oklch(78.9% 0.154 211.53)',
+    '500': 'oklch(71.5% 0.143 215.221)',
+    '600': 'oklch(60.9% 0.126 221.723)',
+    '700': 'oklch(52% 0.105 223.128)',
+    '800': 'oklch(45% 0.085 224.283)',
+    '900': 'oklch(39.8% 0.07 227.392)',
+    '950': 'oklch(30.2% 0.056 229.695)',
   },
   sky: {
-    '50': 'oklch(0.977 0.013 236.62)',
-    '100': 'oklch(0.951 0.026 236.824)',
-    '200': 'oklch(0.901 0.058 230.902)',
-    '300': 'oklch(0.828 0.111 230.318)',
-    '400': 'oklch(0.746 0.16 232.661)',
-    '500': 'oklch(0.685 0.169 237.323)',
-    '600': 'oklch(0.588 0.158 241.966)',
-    '700': 'oklch(0.5 0.134 242.749)',
-    '800': 'oklch(0.443 0.11 240.79)',
-    '900': 'oklch(0.391 0.09 240.876)',
-    '950': 'oklch(0.293 0.066 243.157)',
+    '50': 'oklch(97.7% 0.013 236.62)',
+    '100': 'oklch(95.1% 0.026 236.824)',
+    '200': 'oklch(90.1% 0.058 230.902)',
+    '300': 'oklch(82.8% 0.111 230.318)',
+    '400': 'oklch(74.6% 0.16 232.661)',
+    '500': 'oklch(68.5% 0.169 237.323)',
+    '600': 'oklch(58.8% 0.158 241.966)',
+    '700': 'oklch(50% 0.134 242.749)',
+    '800': 'oklch(44.3% 0.11 240.79)',
+    '900': 'oklch(39.1% 0.09 240.876)',
+    '950': 'oklch(29.3% 0.066 243.157)',
   },
   blue: {
-    '50': 'oklch(0.97 0.014 254.604)',
-    '100': 'oklch(0.932 0.032 255.585)',
-    '200': 'oklch(0.882 0.059 254.128)',
-    '300': 'oklch(0.809 0.105 251.813)',
-    '400': 'oklch(0.707 0.165 254.624)',
-    '500': 'oklch(0.623 0.214 259.815)',
-    '600': 'oklch(0.546 0.245 262.881)',
-    '700': 'oklch(0.488 0.243 264.376)',
-    '800': 'oklch(0.424 0.199 265.638)',
-    '900': 'oklch(0.379 0.146 265.522)',
-    '950': 'oklch(0.282 0.091 267.935)',
+    '50': 'oklch(97% 0.014 254.604)',
+    '100': 'oklch(93.2% 0.032 255.585)',
+    '200': 'oklch(88.2% 0.059 254.128)',
+    '300': 'oklch(80.9% 0.105 251.813)',
+    '400': 'oklch(70.7% 0.165 254.624)',
+    '500': 'oklch(62.3% 0.214 259.815)',
+    '600': 'oklch(54.6% 0.245 262.881)',
+    '700': 'oklch(48.8% 0.243 264.376)',
+    '800': 'oklch(42.4% 0.199 265.638)',
+    '900': 'oklch(37.9% 0.146 265.522)',
+    '950': 'oklch(28.2% 0.091 267.935)',
   },
   indigo: {
-    '50': 'oklch(0.962 0.018 272.314)',
-    '100': 'oklch(0.93 0.034 272.788)',
-    '200': 'oklch(0.87 0.065 274.039)',
-    '300': 'oklch(0.785 0.115 274.713)',
-    '400': 'oklch(0.673 0.182 276.935)',
-    '500': 'oklch(0.585 0.233 277.117)',
-    '600': 'oklch(0.511 0.262 276.966)',
-    '700': 'oklch(0.457 0.24 277.023)',
-    '800': 'oklch(0.398 0.195 277.366)',
-    '900': 'oklch(0.359 0.144 278.697)',
-    '950': 'oklch(0.257 0.09 281.288)',
+    '50': 'oklch(96.2% 0.018 272.314)',
+    '100': 'oklch(93% 0.034 272.788)',
+    '200': 'oklch(87% 0.065 274.039)',
+    '300': 'oklch(78.5% 0.115 274.713)',
+    '400': 'oklch(67.3% 0.182 276.935)',
+    '500': 'oklch(58.5% 0.233 277.117)',
+    '600': 'oklch(51.1% 0.262 276.966)',
+    '700': 'oklch(45.7% 0.24 277.023)',
+    '800': 'oklch(39.8% 0.195 277.366)',
+    '900': 'oklch(35.9% 0.144 278.697)',
+    '950': 'oklch(25.7% 0.09 281.288)',
   },
   violet: {
-    '50': 'oklch(0.969 0.016 293.756)',
-    '100': 'oklch(0.943 0.029 294.588)',
-    '200': 'oklch(0.894 0.057 293.283)',
-    '300': 'oklch(0.811 0.111 293.571)',
-    '400': 'oklch(0.702 0.183 293.541)',
-    '500': 'oklch(0.606 0.25 292.717)',
-    '600': 'oklch(0.541 0.281 293.009)',
-    '700': 'oklch(0.491 0.27 292.581)',
-    '800': 'oklch(0.432 0.232 292.759)',
-    '900': 'oklch(0.38 0.189 293.745)',
-    '950': 'oklch(0.283 0.141 291.089)',
+    '50': 'oklch(96.9% 0.016 293.756)',
+    '100': 'oklch(94.3% 0.029 294.588)',
+    '200': 'oklch(89.4% 0.057 293.283)',
+    '300': 'oklch(81.1% 0.111 293.571)',
+    '400': 'oklch(70.2% 0.183 293.541)',
+    '500': 'oklch(60.6% 0.25 292.717)',
+    '600': 'oklch(54.1% 0.281 293.009)',
+    '700': 'oklch(49.1% 0.27 292.581)',
+    '800': 'oklch(43.2% 0.232 292.759)',
+    '900': 'oklch(38% 0.189 293.745)',
+    '950': 'oklch(28.3% 0.141 291.089)',
   },
   purple: {
-    '50': 'oklch(0.977 0.014 308.299)',
-    '100': 'oklch(0.946 0.033 307.174)',
-    '200': 'oklch(0.902 0.063 306.703)',
-    '300': 'oklch(0.827 0.119 306.383)',
-    '400': 'oklch(0.714 0.203 305.504)',
-    '500': 'oklch(0.627 0.265 303.9)',
-    '600': 'oklch(0.558 0.288 302.321)',
-    '700': 'oklch(0.496 0.265 301.924)',
-    '800': 'oklch(0.438 0.218 303.724)',
-    '900': 'oklch(0.381 0.176 304.987)',
-    '950': 'oklch(0.291 0.149 302.717)',
+    '50': 'oklch(97.7% 0.014 308.299)',
+    '100': 'oklch(94.6% 0.033 307.174)',
+    '200': 'oklch(90.2% 0.063 306.703)',
+    '300': 'oklch(82.7% 0.119 306.383)',
+    '400': 'oklch(71.4% 0.203 305.504)',
+    '500': 'oklch(62.7% 0.265 303.9)',
+    '600': 'oklch(55.8% 0.288 302.321)',
+    '700': 'oklch(49.6% 0.265 301.924)',
+    '800': 'oklch(43.8% 0.218 303.724)',
+    '900': 'oklch(38.1% 0.176 304.987)',
+    '950': 'oklch(29.1% 0.149 302.717)',
   },
   fuchsia: {
-    '50': 'oklch(0.977 0.017 320.058)',
-    '100': 'oklch(0.952 0.037 318.852)',
-    '200': 'oklch(0.903 0.076 319.62)',
-    '300': 'oklch(0.833 0.145 321.434)',
-    '400': 'oklch(0.74 0.238 322.16)',
-    '500': 'oklch(0.667 0.295 322.15)',
-    '600': 'oklch(0.591 0.293 322.896)',
-    '700': 'oklch(0.518 0.253 323.949)',
-    '800': 'oklch(0.452 0.211 324.591)',
-    '900': 'oklch(0.401 0.17 325.612)',
-    '950': 'oklch(0.293 0.136 325.661)',
+    '50': 'oklch(97.7% 0.017 320.058)',
+    '100': 'oklch(95.2% 0.037 318.852)',
+    '200': 'oklch(90.3% 0.076 319.62)',
+    '300': 'oklch(83.3% 0.145 321.434)',
+    '400': 'oklch(74% 0.238 322.16)',
+    '500': 'oklch(66.7% 0.295 322.15)',
+    '600': 'oklch(59.1% 0.293 322.896)',
+    '700': 'oklch(51.8% 0.253 323.949)',
+    '800': 'oklch(45.2% 0.211 324.591)',
+    '900': 'oklch(40.1% 0.17 325.612)',
+    '950': 'oklch(29.3% 0.136 325.661)',
   },
   pink: {
-    '50': 'oklch(0.971 0.014 343.198)',
-    '100': 'oklch(0.948 0.028 342.258)',
-    '200': 'oklch(0.899 0.061 343.231)',
-    '300': 'oklch(0.823 0.12 346.018)',
-    '400': 'oklch(0.718 0.202 349.761)',
-    '500': 'oklch(0.656 0.241 354.308)',
-    '600': 'oklch(0.592 0.249 0.584)',
-    '700': 'oklch(0.525 0.223 3.958)',
-    '800': 'oklch(0.459 0.187 3.815)',
-    '900': 'oklch(0.408 0.153 2.432)',
-    '950': 'oklch(0.284 0.109 3.907)',
+    '50': 'oklch(97.1% 0.014 343.198)',
+    '100': 'oklch(94.8% 0.028 342.258)',
+    '200': 'oklch(89.9% 0.061 343.231)',
+    '300': 'oklch(82.3% 0.12 346.018)',
+    '400': 'oklch(71.8% 0.202 349.761)',
+    '500': 'oklch(65.6% 0.241 354.308)',
+    '600': 'oklch(59.2% 0.249 0.584)',
+    '700': 'oklch(52.5% 0.223 3.958)',
+    '800': 'oklch(45.9% 0.187 3.815)',
+    '900': 'oklch(40.8% 0.153 2.432)',
+    '950': 'oklch(28.4% 0.109 3.907)',
   },
   rose: {
-    '50': 'oklch(0.969 0.015 12.422)',
-    '100': 'oklch(0.941 0.03 12.58)',
-    '200': 'oklch(0.892 0.058 10.001)',
-    '300': 'oklch(0.81 0.117 11.638)',
-    '400': 'oklch(0.712 0.194 13.428)',
-    '500': 'oklch(0.645 0.246 16.439)',
-    '600': 'oklch(0.586 0.253 17.585)',
-    '700': 'oklch(0.514 0.222 16.935)',
-    '800': 'oklch(0.455 0.188 13.697)',
-    '900': 'oklch(0.41 0.159 10.272)',
-    '950': 'oklch(0.271 0.105 12.094)',
+    '50': 'oklch(96.9% 0.015 12.422)',
+    '100': 'oklch(94.1% 0.03 12.58)',
+    '200': 'oklch(89.2% 0.058 10.001)',
+    '300': 'oklch(81% 0.117 11.638)',
+    '400': 'oklch(71.2% 0.194 13.428)',
+    '500': 'oklch(64.5% 0.246 16.439)',
+    '600': 'oklch(58.6% 0.253 17.585)',
+    '700': 'oklch(51.4% 0.222 16.935)',
+    '800': 'oklch(45.5% 0.188 13.697)',
+    '900': 'oklch(41% 0.159 10.272)',
+    '950': 'oklch(27.1% 0.105 12.094)',
   },
 }
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 372f5f3e3ae0..8cc87d9bb4c3 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -322,7 +322,14 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        ".prose {
+        "@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          @layer base {
+            *, ::before, ::after, ::backdrop {
+              --tw-leading: initial;
+            }
+          }
+        }
+        .prose {
           [class~=lead-base] {
             font-size: 100rem;
             line-height: 201rem;
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
index d96bdc7008b8..e47fa4eda47d 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
@@ -231,17 +231,17 @@ test('theme keys can read from the CSS theme', () => {
       },
       caretColor: {
         primary: {
-          '50': 'oklch(0.982 0.018 155.826)',
-          '100': 'oklch(0.962 0.044 156.743)',
-          '200': 'oklch(0.925 0.084 155.995)',
-          '300': 'oklch(0.871 0.15 154.449)',
-          '400': 'oklch(0.792 0.209 151.711)',
-          '500': 'oklch(0.723 0.219 149.579)',
-          '600': 'oklch(0.627 0.194 149.214)',
-          '700': 'oklch(0.527 0.154 150.069)',
-          '800': 'oklch(0.448 0.119 151.328)',
-          '900': 'oklch(0.393 0.095 152.535)',
-          '950': 'oklch(0.266 0.065 152.934)',
+          '100': 'oklch(96.2% 0.044 156.743)',
+          '200': 'oklch(92.5% 0.084 155.995)',
+          '300': 'oklch(87.1% 0.15 154.449)',
+          '400': 'oklch(79.2% 0.209 151.711)',
+          '50': 'oklch(98.2% 0.018 155.826)',
+          '500': 'oklch(72.3% 0.219 149.579)',
+          '600': 'oklch(62.7% 0.194 149.214)',
+          '700': 'oklch(52.7% 0.154 150.069)',
+          '800': 'oklch(44.8% 0.119 151.328)',
+          '900': 'oklch(39.3% 0.095 152.535)',
+          '950': 'oklch(26.6% 0.065 152.934)',
         },
       },
       transitionColor: {
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index b786f2311e28..31306bf57e88 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -1734,7 +1734,7 @@ describe('addVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width <= 400px) {
+        @media (max-width: 400px) {
           @supports (font: bold) {
             .potato\\:flex:large-potato {
               display: flex;
@@ -2053,19 +2053,19 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 500px) {
+        @media (min-width: 500px) {
           .testmin-\\[500px\\]\\:underline {
             text-decoration-line: underline;
           }
         }
 
-        @media (width >= 600px) {
+        @media (min-width: 600px) {
           .testmin-\\[600px\\]\\:flex {
             display: flex;
           }
         }
 
-        @media (width >= 700px) {
+        @media (min-width: 700px) {
           .testmin-\\[700px\\]\\:italic {
             font-style: italic;
           }
@@ -2108,19 +2108,19 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 500px) {
+        @media (min-width: 500px) {
           .testmin-\\[500px\\]\\:italic {
             font-style: italic;
           }
         }
 
-        @media (width >= 600px) {
+        @media (min-width: 600px) {
           .testmin-example\\:italic {
             font-style: italic;
           }
         }
 
-        @media (width >= 700px) {
+        @media (min-width: 700px) {
           .testmin-\\[700px\\]\\:italic {
             font-style: italic;
           }
@@ -2168,30 +2168,30 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 100px) {
-          @media (width <= 400px) {
+        @media (min-width: 100px) {
+          @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
               order: 1;
             }
           }
         }
 
-        @media (width >= 150px) {
-          @media (width <= 400px) {
+        @media (min-width: 150px) {
+          @media (max-width: 400px) {
             .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 {
               order: 2;
             }
           }
         }
 
-        @media (width >= 100px) {
-          @media (width <= 350px) {
+        @media (min-width: 100px) {
+          @media (max-width: 350px) {
             .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 {
               order: 3;
             }
           }
 
-          @media (width <= 300px) {
+          @media (max-width: 300px) {
             .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 {
               order: 4;
             }
@@ -2238,8 +2238,8 @@ describe('matchVariant', () => {
     // Expect :focus to come after :hover
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 100px) {
-          @media (width <= 200px) {
+        @media (min-width: 100px) {
+          @media (max-width: 200px) {
             @media (hover: hover) {
               .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover {
                 text-decoration-line: underline;
@@ -2292,32 +2292,32 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 100px) {
-          @media (width <= 400px) {
+        @media (min-width: 100px) {
+          @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
               order: 1;
             }
           }
         }
 
-        @media (width >= 200px) {
-          @media (width <= 400px) {
+        @media (min-width: 200px) {
+          @media (max-width: 400px) {
             .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
               order: 2;
             }
           }
         }
 
-        @media (width >= 100px) {
-          @media (width <= 300px) {
+        @media (min-width: 100px) {
+          @media (max-width: 300px) {
             .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
               order: 3;
             }
           }
         }
 
-        @media (width >= 200px) {
-          @media (width <= 300px) {
+        @media (min-width: 200px) {
+          @media (max-width: 300px) {
             .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
               order: 4;
             }
@@ -2364,28 +2364,28 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width <= 400px) {
-          @media (width >= 100px) {
+        @media (max-width: 400px) {
+          @media (min-width: 100px) {
             .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline {
               text-decoration-line: underline;
             }
           }
 
-          @media (width >= 200px) {
+          @media (min-width: 200px) {
             .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline {
               text-decoration-line: underline;
             }
           }
         }
 
-        @media (width <= 300px) {
-          @media (width >= 100px) {
+        @media (max-width: 300px) {
+          @media (min-width: 100px) {
             .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline {
               text-decoration-line: underline;
             }
           }
 
-          @media (width >= 200px) {
+          @media (min-width: 200px) {
             .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline {
               text-decoration-line: underline;
             }
@@ -2440,32 +2440,32 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (width >= 100px) {
-          @media (width <= 400px) {
+        @media (min-width: 100px) {
+          @media (max-width: 400px) {
             .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 {
               order: 1;
             }
           }
         }
 
-        @media (width >= 200px) {
-          @media (width <= 400px) {
+        @media (min-width: 200px) {
+          @media (max-width: 400px) {
             .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 {
               order: 2;
             }
           }
         }
 
-        @media (width >= 100px) {
-          @media (width <= 300px) {
+        @media (min-width: 100px) {
+          @media (max-width: 300px) {
             .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 {
               order: 3;
             }
           }
         }
 
-        @media (width >= 200px) {
-          @media (width <= 300px) {
+        @media (min-width: 200px) {
+          @media (max-width: 300px) {
             .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 {
               order: 4;
             }
@@ -2629,13 +2629,13 @@ describe('matchVariant', () => {
       'my-container-[250px]/placement:underline',
     ])
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      "@container (width >= 250px) {
+      "@container (min-width: 250px) {
         .my-container-\\[250px\\]\\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container placement (width >= 250px) {
+      @container placement (min-width: 250px) {
         .my-container-\\[250px\\]\\/placement\\:underline {
           text-decoration-line: underline;
         }
@@ -2676,20 +2676,20 @@ describe('addUtilities()', () => {
 
     expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim())
       .toMatchInlineSnapshot(`
-      "@layer utilities {
-        .text-trim {
-          text-box-trim: both;
-          text-box-edge: cap alphabetic;
-        }
-
-        @media (width >= 1024px) {
-          .lg\\:text-trim {
+        "@layer utilities {
+          .text-trim {
             text-box-trim: both;
             text-box-edge: cap alphabetic;
           }
-        }
-      }"
-    `)
+
+          @media (min-width: 1024px) {
+            .lg\\:text-trim {
+              text-box-trim: both;
+              text-box-edge: cap alphabetic;
+            }
+          }
+        }"
+      `)
   })
 
   test('return multiple rule objects from a custom utility', async () => {
@@ -2873,7 +2873,7 @@ describe('addUtilities()', () => {
           }
         }
 
-        @media (width >= 1024px) {
+        @media (min-width: 1024px) {
           .lg\\:foo {
             display: flex;
           }
@@ -2954,7 +2954,7 @@ describe('addUtilities()', () => {
           background-color: #fff;
         }
 
-        @media (width >= 1024px) {
+        @media (min-width: 1024px) {
           .lg\\:form-textarea {
             appearance: none;
             background-color: #fff;
@@ -3280,7 +3280,7 @@ describe('matchUtilities()', () => {
         border-block-width: var(--foo);
       }
 
-      @media (width >= 1024px) {
+      @media (min-width: 1024px) {
         .lg\\:border-block-2 {
           border-block-width: 2px;
         }
@@ -3579,7 +3579,7 @@ describe('matchUtilities()', () => {
         }
 
         .scrollbar-\\[\\#08c\\]\\/50 {
-          scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5);
+          scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
         }
 
         .scrollbar-\\[2px\\] {
@@ -3975,7 +3975,7 @@ describe('matchUtilities()', () => {
           display: flex;
         }
 
-        @media (width >= 1024px) {
+        @media (min-width: 1024px) {
           .lg\\:foo-\\[12px\\] {
             --foo: 12px;
             display: flex;
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index e8b1611aac8c..184a63806554 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -17,7 +17,7 @@ describe('--alpha(…)', () => {
       `),
     ).toMatchInlineSnapshot(`
       ".foo {
-        margin: oklab(62.7955% .22486 .12584 / .5);
+        margin: oklab(62.7955% .224 .125 / .5);
       }"
     `)
   })
@@ -196,7 +196,13 @@ describe('--theme(…)', () => {
       }
 
       .red {
-        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        color: #ff000080;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .red {
+          color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        }
       }"
     `)
   })
@@ -343,13 +349,13 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@media (width >= 48rem) {
+      "@media (min-width: 48rem) {
         .blue {
           color: #00f;
         }
       }
 
-      @media (width >= 64rem) {
+      @media (min-width: 64rem) {
         .red {
           color: red;
         }
@@ -545,7 +551,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .75);
+            color: oklab(62.7955% .224 .125 / .75);
           }"
         `)
       })
@@ -562,7 +568,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .75);
+            color: oklab(62.7955% .224 .125 / .75);
           }"
         `)
       })
@@ -579,7 +585,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .75);
+            color: oklab(62.7955% .224 .125 / .75);
           }"
         `)
       })
@@ -804,7 +810,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .25);
+            color: oklab(62.7955% .224 .125 / .25);
           }"
         `)
       })
@@ -876,7 +882,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .25);
+            color: oklab(62.7955% .224 .125 / .25);
           }"
         `)
       })
@@ -912,7 +918,7 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: oklab(62.7955% .22486 .12584 / .5);
+            color: oklab(62.7955% .224 .125 / .5);
           }"
         `)
       })
@@ -964,7 +970,7 @@ describe('theme(…)', () => {
         ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
         ['letterSpacing.wide', '.025em'],
         ['lineHeight.tight', '1.25'],
-        ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
+        ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'],
       ])('theme(%s) → %s', async (value, result) => {
         let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
         let compiled = await compileCss(css`
@@ -1002,7 +1008,7 @@ describe('theme(…)', () => {
           ['sm:[--color:theme(colors.red[500])]'],
         ),
       ).toMatchInlineSnapshot(`
-        "@media (width >= 40rem) {
+        "@media (min-width: 40rem) {
           .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] {
             --color: red;
           }
@@ -1063,7 +1069,7 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (width >= 48rem) and (width <= 64rem) {
+        "@media (min-width: 48rem) and (max-width: 64rem) {
           .red {
             color: red;
           }
@@ -1085,7 +1091,7 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (width >= 48rem) and (width < 64rem) {
+        "@media (min-width: 48rem) and (not (min-width: 64rem)) {
           .red {
             color: red;
           }
@@ -1108,7 +1114,7 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@media (width >= 48rem) {
+      "@media (min-width: 48rem) {
         .red {
           color: red;
         }
@@ -1129,7 +1135,7 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@container (width > 48rem) {
+      "@container not (max-width: 48rem) {
         .red {
           color: red;
         }
@@ -1205,8 +1211,8 @@ describe('in plugins', () => {
         .my-base-rule {
           color: oklch(62% .25 30);
           background-color: oklch(45% .31 264);
-          border-color: oklab(87% .06947 .00853 / .1);
-          outline-color: oklab(79% .05814 .15974 / .15);
+          border-color: oklab(87% .069 .008 / .1);
+          outline-color: oklab(79% .058 .159 / .15);
         }
       }
 
diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts
index b11dabc11ccb..e18e882ba092 100644
--- a/packages/tailwindcss/src/design-system.ts
+++ b/packages/tailwindcss/src/design-system.ts
@@ -1,3 +1,4 @@
+import { Polyfills } from '.'
 import { optimizeAst, toCss } from './ast'
 import { parseCandidate, parseVariant, type Candidate, type Variant } from './candidate'
 import { compileAstNodes, compileCandidates } from './compile'
@@ -94,7 +95,8 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
           },
         })
 
-        astNodes = optimizeAst(astNodes, designSystem)
+        // Disable all polyfills to not unnecessarily pollute IntelliSense output
+        astNodes = optimizeAst(astNodes, designSystem, Polyfills.None)
 
         if (astNodes.length === 0 || wasInvalid) {
           result.push(null)
diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts
index b3594219b6f4..1824a4239f21 100644
--- a/packages/tailwindcss/src/important.test.ts
+++ b/packages/tailwindcss/src/important.test.ts
@@ -101,7 +101,15 @@ test('variables in utilities should not be marked as important', async () => {
       ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-ease: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 6983bdb37c94..cc156bef856c 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, it, test } from 'vitest'
-import { compile } from '.'
+import { compile, Polyfills } from '.'
 import type { PluginAPI } from './compat/plugin-api'
 import plugin from './plugin'
 import { compileCss, optimizeCss, run } from './test-utils/run'
@@ -40,7 +40,7 @@ describe('compiling CSS', () => {
           }
         }
 
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\\:grid {
             display: grid;
           }
@@ -246,7 +246,7 @@ describe('arbitrary properties', () => {
   it('should generate arbitrary properties with modifiers', async () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:red\\]\\/50 {
-        color: oklab(62.7955% .22486 .12584 / .5);
+        color: oklab(62.7955% .224 .125 / .5);
       }"
     `)
   })
@@ -309,7 +309,17 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
+        }
+      }
+
+      :root, :host {
         --color-red-200: #fecaca;
         --color-red-500: #ef4444;
         --color-blue-500: #3b82f6;
@@ -332,7 +342,7 @@ describe('@apply', () => {
         }
       }
 
-      @media (width >= 768px) {
+      @media (min-width: 768px) {
         .foo {
           background-color: var(--color-green-500);
         }
@@ -342,7 +352,7 @@ describe('@apply', () => {
         background-color: var(--color-red-200);
       }
 
-      @media (width >= 768px) {
+      @media (min-width: 768px) {
         .foo:hover:focus {
           background-color: var(--color-green-200);
         }
@@ -416,7 +426,15 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo, .bar {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
+      .foo, .bar {
         --tw-content: "b";
         content: var(--tw-content);
         content: var(--tw-content);
@@ -601,7 +619,7 @@ describe('arbitrary variants', () => {
 
   it('should generate arbitrary at-rule variants', async () => {
     expect(await run(['[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "@media (width >= 123px) {
+      "@media (min-width: 123px) {
         .\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex {
           display: flex;
         }
@@ -637,7 +655,7 @@ describe('variant stacking', () => {
 
   it('should stack multiple arbitrary variants', async () => {
     expect(await run(['[&_p]:[@media(width>=123px)]:flex'])).toMatchInlineSnapshot(`
-      "@media (width >= 123px) {
+      "@media (min-width: 123px) {
         .\\[\\&_p\\]\\:\\[\\@media\\(width\\>\\=123px\\)\\]\\:flex p {
           display: flex;
         }
@@ -647,7 +665,15 @@ describe('variant stacking', () => {
 
   it('pseudo element variants are re-ordered', async () => {
     expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(`
-      ".before\\:hover\\:flex:before {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
+      .before\\:hover\\:flex:before {
         content: var(--tw-content);
       }
 
@@ -807,7 +833,15 @@ describe('sorting', () => {
         ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-x-reverse: 0;
+          }
+        }
+      }
+
+      :root, :host {
         --spacing-0: 0px;
         --spacing-2: .5rem;
         --spacing-4: 1rem;
@@ -1436,7 +1470,15 @@ describe('Parsing theme values from CSS', () => {
         ['font-bold', 'font-sans', 'font-serif', 'font-body'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-font-weight: initial;
+          }
+        }
+      }
+
+      :root, :host {
         --font-weight-bold: bold;
         --font-body: Inter;
       }
@@ -1475,7 +1517,28 @@ describe('Parsing theme values from CSS', () => {
         ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
       ),
     ).toMatchInlineSnapshot(`
-      ":root, :host {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --tw-ring-color: initial;
+            --tw-ring-shadow: 0 0 #0000;
+            --tw-inset-ring-color: initial;
+            --tw-inset-ring-shadow: 0 0 #0000;
+            --tw-ring-inset: initial;
+            --tw-ring-offset-width: 0px;
+            --tw-ring-offset-color: #fff;
+            --tw-ring-offset-shadow: 0 0 #0000;
+          }
+        }
+      }
+
+      :root, :host {
         --inset-md: 50px;
       }
 
@@ -3607,13 +3670,13 @@ describe('@custom-variant', () => {
             text-decoration-line: underline;
           }
 
-          @media not (any-hover: hover) {
+          @media not all and (any-hover: hover) {
             .cant-hover\\:focus\\:underline:focus {
               text-decoration-line: underline;
             }
           }
 
-          @media not (pointer: fine) {
+          @media not all and (pointer: fine) {
             .cant-hover\\:focus\\:underline:focus {
               text-decoration-line: underline;
             }
@@ -4168,7 +4231,7 @@ describe('`@reference "…" imports`', () => {
         { loadStylesheet },
       ),
     ).resolves.toMatchInlineSnapshot(`
-      "@media (width >= 768px) {
+      "@media (min-width: 768px) {
         .bar:hover, .bar:focus {
           color: red;
         }
@@ -4398,12 +4461,12 @@ describe('`@reference "…" imports`', () => {
         { loadStylesheet },
       ),
     ).resolves.toMatchInlineSnapshot(`
-        "@media (width >= 768px) {
-          .bar:hover, .bar:focus {
-            color: red;
-          }
-        }"
-      `)
+      "@media (min-width: 768px) {
+        .bar:hover, .bar:focus {
+          color: red;
+        }
+      }"
+    `)
   })
 
   test('removes styles when the import resolver was handled outside of Tailwind CSS', async () => {
@@ -4432,7 +4495,7 @@ describe('`@reference "…" imports`', () => {
         [],
       ),
     ).resolves.toMatchInlineSnapshot(`
-      "@media (width >= 48rem) {
+      "@media (min-width: 48rem) {
         .bar:hover, .bar:focus {
           color: red;
         }
@@ -4657,7 +4720,7 @@ describe('@variant', () => {
         background: #000;
       }
 
-      @container (width >= 768px) {
+      @container (min-width: 768px) {
         .btn.foo {
           background: #fff;
         }
@@ -4665,3 +4728,339 @@ describe('@variant', () => {
     `)
   })
 })
+
+describe('`color-mix(…)` polyfill', () => {
+  it('creates an inlined variable version of the color-mix(…) usages', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+        `,
+        ['text-red-500/50'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+      }
+
+      .text-red-500\\/50 {
+        color: #fb2c3680;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-red-500\\/50 {
+          color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        }
+      }"
+    `)
+  })
+
+  it('works for color values in the first and second position', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+            --color-orange-500: oklch(70.5% 0.213 47.604);
+          }
+          @tailwind utilities;
+          .mixed {
+            color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+        --color-orange-500: oklch(70.5% .213 47.604);
+      }
+
+      .mixed {
+        color: #fc4d1b;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .mixed {
+          color: color-mix(in lch, var(--color-red-500) 50%, var(--color-orange-500));
+        }
+      }"
+    `)
+  })
+
+  it('works for nested `color-mix(…)` calls', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+          .stacked {
+            color: color-mix(
+              in lch,
+              color-mix(in lch, var(--color-red-500) 50%, transparent) 50%,
+              transparent
+            );
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+      }
+
+      .stacked {
+        color: lch(55.5764% 89.7903 33.1932 / .25098);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .stacked {
+          color: color-mix(in lch, color-mix(in lch, var(--color-red-500) 50%, transparent) 50%, transparent);
+        }
+      }"
+    `)
+  })
+
+  it('works with multiple `color-mix(…)` functions in one declaration', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+            --color-orange-500: oklch(70.5% 0.213 47.604);
+          }
+          @tailwind utilities;
+          .gradient {
+            background: linear-gradient(
+              90deg,
+              color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%,
+              color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%,
+              100%
+            );
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+        --color-orange-500: oklch(70.5% .213 47.604);
+      }
+
+      .gradient {
+        background: linear-gradient(90deg, #fb2c3680 0%, #fe6e0080 0%, 100%);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .gradient {
+          background: linear-gradient(90deg, color-mix(in oklab, var(--color-red-500) 50%, transparent) 0%, color-mix(in oklab, var(--color-orange-500) 50%, transparent) 0%, 100%);
+        }
+      }"
+    `)
+  })
+
+  it('works with no spaces after the `var(…)`', async () => {
+    await expect(
+      compileCss(
+        // prettier-ignore
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+          .text-red-500\/50 {
+            color: color-mix(in oklab,var(--color-red-500)50%,transparent);
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+      }
+
+      .text-red-500\\/50 {
+        color: #fb2c3680;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-red-500\\/50 {
+          color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        }
+      }"
+    `)
+  })
+
+  it('does not replace `currentColor` inside `color-mix(…)`', async () => {
+    await expect(
+      compileCss(
+        css`
+          @tailwind utilities;
+        `,
+        ['text-current/50'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ".text-current\\/50 {
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }"
+    `)
+  })
+
+  it('also replaces eventual variables in opacity values', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --my-half: 50%;
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+        `,
+        ['text-red-500/(--my-half)'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --my-half: 50%;
+        --color-red-500: oklch(63.7% .237 25.331);
+      }
+
+      .text-red-500\\/\\(--my-half\\) {
+        color: #fb2c3680;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-red-500\\/\\(--my-half\\) {
+          color: color-mix(in oklab, var(--color-red-500) var(--my-half), transparent);
+        }
+      }"
+    `)
+  })
+})
+
+describe('`@property` polyfill', async () => {
+  it('emits fallbacks', async () => {
+    await expect(
+      compileCss(
+        css`
+          @tailwind utilities;
+
+          @property --no-inherit-no-value {
+            syntax: '*';
+            inherits: false;
+          }
+          @property --no-inherit-value {
+            syntax: '*';
+            inherits: false;
+            initial-value: red;
+          }
+          @property --inherit-no-value {
+            syntax: '*';
+            inherits: true;
+          }
+          @property --inherit-value {
+            syntax: '*';
+            inherits: true;
+            initial-value: red;
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          :root, :host {
+            --inherit-no-value: initial;
+            --inherit-value: red;
+          }
+
+          *, :before, :after, ::backdrop {
+            --no-inherit-no-value: initial;
+            --no-inherit-value: red;
+          }
+        }
+      }
+
+      @property --no-inherit-no-value {
+        syntax: "*";
+        inherits: false
+      }
+
+      @property --no-inherit-value {
+        syntax: "*";
+        inherits: false;
+        initial-value: red;
+      }
+
+      @property --inherit-no-value {
+        syntax: "*";
+        inherits: true
+      }
+
+      @property --inherit-value {
+        syntax: "*";
+        inherits: true;
+        initial-value: red;
+      }"
+    `)
+  })
+
+  it('emitting fallbacks can be disabled (necessary for CSS modules)', async () => {
+    await expect(
+      compileCss(
+        css`
+          @tailwind utilities;
+
+          @property --no-inherit-no-value {
+            syntax: '*';
+            inherits: false;
+          }
+          @property --no-inherit-value {
+            syntax: '*';
+            inherits: false;
+            initial-value: red;
+          }
+          @property --inherit-no-value {
+            syntax: '*';
+            inherits: true;
+          }
+          @property --inherit-value {
+            syntax: '*';
+            inherits: true;
+            initial-value: red;
+          }
+        `,
+        [],
+        {
+          polyfills: Polyfills.None,
+        },
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@property --no-inherit-no-value {
+        syntax: "*";
+        inherits: false
+      }
+
+      @property --no-inherit-value {
+        syntax: "*";
+        inherits: false;
+        initial-value: red;
+      }
+
+      @property --inherit-no-value {
+        syntax: "*";
+        inherits: true
+      }
+
+      @property --inherit-value {
+        syntax: "*";
+        inherits: true;
+        initial-value: red;
+      }"
+    `)
+  })
+})
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index d8d4f73315ea..2aba5c50b1cf 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -37,8 +37,22 @@ export type Config = UserConfig
 
 const IS_VALID_PREFIX = /^[a-z]+$/
 
+export const enum Polyfills {
+  None = 0,
+
+  // Control if fallbacks for `@property` rules are emitted
+  AtProperty = 1 << 0,
+
+  // Control if `color-mix(…)` fallbacks are inserted
+  ColorMix = 1 << 1,
+
+  // Enable all
+  All = AtProperty | ColorMix,
+}
+
 type CompileOptions = {
   base?: string
+  polyfills?: Polyfills
   loadModule?: (
     id: string,
     base: string,
@@ -697,7 +711,7 @@ export async function compileAst(
       }
 
       if (!utilitiesNode) {
-        compiled ??= optimizeAst(ast, designSystem)
+        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
         return compiled
       }
 
@@ -723,7 +737,7 @@ export async function compileAst(
       // If no new candidates were added, we can return the original CSS. This
       // currently assumes that we only add new candidates and never remove any.
       if (!didChange) {
-        compiled ??= optimizeAst(ast, designSystem)
+        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
         return compiled
       }
 
@@ -735,7 +749,7 @@ export async function compileAst(
       // CSS. This currently assumes that we only add new ast nodes and never
       // remove any.
       if (!didAddExternalVariable && previousAstNodeCount === newNodes.length) {
-        compiled ??= optimizeAst(ast, designSystem)
+        compiled ??= optimizeAst(ast, designSystem, opts.polyfills)
         return compiled
       }
 
@@ -743,7 +757,7 @@ export async function compileAst(
 
       utilitiesNode.nodes = newNodes
 
-      compiled = optimizeAst(ast, designSystem)
+      compiled = optimizeAst(ast, designSystem, opts.polyfills)
       return compiled
     },
   }
diff --git a/packages/tailwindcss/src/test-utils/custom-serializer.ts b/packages/tailwindcss/src/test-utils/custom-serializer.ts
index ff2b0a3f0e27..1704340e77c9 100644
--- a/packages/tailwindcss/src/test-utils/custom-serializer.ts
+++ b/packages/tailwindcss/src/test-utils/custom-serializer.ts
@@ -3,19 +3,20 @@ import type { SnapshotSerializer } from 'vitest'
 // We're reducing the precision of parameters to the `oklab()` function from
 // our snapshots as we've observed lightningcss generating different decimal
 // places in the last position when run on different operating systems.
-const HIGH_PRECISION_OKLAB = /oklab\(\d{1,2}\.?\d{0,4}% -?\.(\d{6,8}) -?\.(\d{6,8}) \/ \.\d{1,2}\)/g
+const HIGH_PRECISION_COLOR_FUNCTION =
+  /(oklab\(|oklch\(|lab\(|lch\()\d{1,2}\.?\d{0,4}% -?\d{0,2}\.(\d{4,8}) -?\d{0,2}.(\d{4,8}) \/ \.\d{1,2}\)/g
 
 export default {
   test(val) {
-    return typeof val === 'string' && val.match(HIGH_PRECISION_OKLAB) !== null
+    return typeof val === 'string' && val.match(HIGH_PRECISION_COLOR_FUNCTION) !== null
   },
   serialize(val, config, indentation, depth, refs, printer) {
     if (typeof val !== 'string') {
       throw new Error('This was already tested in the test() callback')
     }
 
-    let replaced = val.replaceAll(HIGH_PRECISION_OKLAB, (match, first, second) => {
-      return match.replaceAll(first, first.slice(0, 5)).replaceAll(second, second.slice(0, 5))
+    let replaced = val.replaceAll(HIGH_PRECISION_COLOR_FUNCTION, (match, _, first, second) => {
+      return match.replaceAll(first, first.slice(0, 3)).replaceAll(second, second.slice(0, 3))
     })
     return printer(replaced, config, indentation, depth, refs)
   },
diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts
index 2951ef576ab8..3ecf1a10fd36 100644
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/packages/tailwindcss/src/test-utils/run.ts
@@ -1,5 +1,5 @@
-import { Features, transform } from 'lightningcss'
 import { compile } from '..'
+import { optimize } from '../../../@tailwindcss-node/src/optimize'
 
 export async function compileCss(
   css: string,
@@ -7,43 +7,12 @@ export async function compileCss(
   options: Parameters<typeof compile>[1] = {},
 ) {
   let { build } = await compile(css, options)
-  return optimizeCss(build(candidates)).trim()
+  return optimize(build(candidates)).trim()
 }
 
 export async function run(candidates: string[]) {
   let { build } = await compile('@tailwind utilities;')
-  return optimizeCss(build(candidates)).trim()
+  return optimize(build(candidates)).trim()
 }
 
-export function optimizeCss(
-  input: string,
-  { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-) {
-  function optimize(code: Buffer | Uint8Array) {
-    return transform({
-      filename: file,
-      code,
-      minify,
-      sourceMap: false,
-      drafts: {
-        customMedia: true,
-      },
-      nonStandard: {
-        deepSelectorCombinator: true,
-      },
-      include: Features.Nesting,
-      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
-      targets: {
-        safari: (16 << 16) | (4 << 8),
-        ios_saf: (16 << 16) | (4 << 8),
-        firefox: 128 << 16,
-        chrome: 111 << 16,
-      },
-      errorRecovery: true,
-    }).code
-  }
-
-  // Running Lightning CSS twice to ensure that adjacent rules are merged after
-  // nesting is applied. This creates a more optimized output.
-  return optimize(optimize(Buffer.from(input))).toString()
-}
+export const optimizeCss = optimize
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 25dc020d6b07..e75afe626e32 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -145,7 +145,28 @@ test('inset', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-4: 1rem;
       --inset-shadowned: 1940px;
     }
@@ -3192,31 +3213,31 @@ describe('container', () => {
         width: 100%;
       }
 
-      @media (width >= 40rem) {
+      @media (min-width: 40rem) {
         .container {
           max-width: 40rem;
         }
       }
 
-      @media (width >= 48rem) {
+      @media (min-width: 48rem) {
         .container {
           max-width: 48rem;
         }
       }
 
-      @media (width >= 64rem) {
+      @media (min-width: 64rem) {
         .container {
           max-width: 64rem;
         }
       }
 
-      @media (width >= 80rem) {
+      @media (min-width: 80rem) {
         .container {
           max-width: 80rem;
         }
       }
 
-      @media (width >= 96rem) {
+      @media (min-width: 96rem) {
         .container {
           max-width: 96rem;
         }
@@ -3254,43 +3275,43 @@ describe('container', () => {
         width: 100%;
       }
 
-      @media (width >= 40em) {
+      @media (min-width: 40em) {
         .container {
           max-width: 40em;
         }
       }
 
-      @media (width >= 48em) {
+      @media (min-width: 48em) {
         .container {
           max-width: 48em;
         }
       }
 
-      @media (width >= 30px) {
+      @media (min-width: 30px) {
         .container {
           max-width: 30px;
         }
       }
 
-      @media (width >= 1600px) {
+      @media (min-width: 1600px) {
         .container {
           max-width: 1600px;
         }
       }
 
-      @media (width >= 64rem) {
+      @media (min-width: 64rem) {
         .container {
           max-width: 64rem;
         }
       }
 
-      @media (width >= 80rem) {
+      @media (min-width: 80rem) {
         .container {
           max-width: 80rem;
         }
       }
 
-      @media (width >= 96rem) {
+      @media (min-width: 96rem) {
         .container {
           max-width: 96rem;
         }
@@ -3331,31 +3352,31 @@ describe('container', () => {
         width: 100%;
       }
 
-      @media (width >= 40rem) {
+      @media (min-width: 40rem) {
         .container {
           max-width: 40rem;
         }
       }
 
-      @media (width >= 48rem) {
+      @media (min-width: 48rem) {
         .container {
           max-width: 48rem;
         }
       }
 
-      @media (width >= 64rem) {
+      @media (min-width: 64rem) {
         .container {
           max-width: 64rem;
         }
       }
 
-      @media (width >= 80rem) {
+      @media (min-width: 80rem) {
         .container {
           max-width: 80rem;
         }
       }
 
-      @media (width >= 96rem) {
+      @media (min-width: 96rem) {
         .container {
           max-width: 96rem;
         }
@@ -3366,7 +3387,7 @@ describe('container', () => {
         padding-inline: 1rem;
       }
 
-      @media (width >= 40rem) {
+      @media (min-width: 40rem) {
         .container {
           padding-inline: 2rem;
         }
@@ -3620,7 +3641,16 @@ test('border-spacing', async () => {
       ['border-spacing-1', 'border-spacing-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-border-spacing-x: 0;
+          --tw-border-spacing-y: 0;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-1: .25rem;
     }
 
@@ -3671,7 +3701,16 @@ test('border-spacing-x', async () => {
       ['border-spacing-x-1', 'border-spacing-x-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-border-spacing-x: 0;
+          --tw-border-spacing-y: 0;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-1: .25rem;
     }
 
@@ -3720,7 +3759,16 @@ test('border-spacing-y', async () => {
       ['border-spacing-y-1', 'border-spacing-y-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-border-spacing-x: 0;
+          --tw-border-spacing-y: 0;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-1: .25rem;
     }
 
@@ -3925,7 +3973,17 @@ test('translate', async () => {
       '-translate-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-translate-\\[var\\(--value\\)\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .-translate-\\[var\\(--value\\)\\] {
       --tw-translate-x: calc(var(--value) * -1);
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3998,7 +4056,17 @@ test('translate-x', async () => {
       '-translate-x-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-translate-x-\\[var\\(--value\\)\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .-translate-x-\\[var\\(--value\\)\\] {
       --tw-translate-x: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4061,7 +4129,17 @@ test('translate-x', async () => {
       ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-translate-x-\\[var\\(--value\\)\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .-translate-x-\\[var\\(--value\\)\\] {
       --tw-translate-x: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4122,7 +4200,17 @@ test('translate-y', async () => {
       '-translate-y-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-translate-y-\\[var\\(--value\\)\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .-translate-y-\\[var\\(--value\\)\\] {
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4185,7 +4273,17 @@ test('translate-y', async () => {
       ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-translate-y-\\[var\\(--value\\)\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .-translate-y-\\[var\\(--value\\)\\] {
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4240,39 +4338,49 @@ test('translate-y', async () => {
 test('translate-z', async () => {
   expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']))
     .toMatchInlineSnapshot(`
-    ".-translate-z-\\[var\\(--value\\)\\] {
-      --tw-translate-z: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
+        }
+      }
 
-    .-translate-z-px {
-      --tw-translate-z: -1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
+      .-translate-z-\\[var\\(--value\\)\\] {
+        --tw-translate-z: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      }
 
-    .translate-z-px {
-      --tw-translate-z: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
+      .-translate-z-px {
+        --tw-translate-z: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      }
 
-    @property --tw-translate-x {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      .translate-z-px {
+        --tw-translate-z: 1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      }
 
-    @property --tw-translate-y {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-x {
+        syntax: "*";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-z {
-      syntax: "*";
-      inherits: false;
-      initial-value: 0;
-    }"
-  `)
+      @property --tw-translate-y {
+        syntax: "*";
+        inherits: false;
+        initial-value: 0;
+      }
+
+      @property --tw-translate-z {
+        syntax: "*";
+        inherits: false;
+        initial-value: 0;
+      }"
+    `)
   expect(
     await run([
       'translate-z',
@@ -4291,7 +4399,17 @@ test('translate-z', async () => {
 
 test('translate-3d', async () => {
   expect(await run(['translate-3d'])).toMatchInlineSnapshot(`
-    ".translate-3d {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          --tw-translate-z: 0;
+        }
+      }
+    }
+
+    .translate-3d {
       translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
     }
 
@@ -4351,7 +4469,19 @@ test('rotate', async () => {
 
 test('rotate-x', async () => {
   expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(`
-    ".-rotate-x-45 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-rotate-x: rotateX(0);
+          --tw-rotate-y: rotateY(0);
+          --tw-rotate-z: rotateZ(0);
+          --tw-skew-x: skewX(0);
+          --tw-skew-y: skewY(0);
+        }
+      }
+    }
+
+    .-rotate-x-45 {
       --tw-rotate-x: rotateX(calc(45deg * -1));
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
@@ -4412,7 +4542,19 @@ test('rotate-x', async () => {
 test('rotate-y', async () => {
   expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]']))
     .toMatchInlineSnapshot(`
-      ".-rotate-y-45 {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-rotate-x: rotateX(0);
+            --tw-rotate-y: rotateY(0);
+            --tw-rotate-z: rotateZ(0);
+            --tw-skew-x: skewX(0);
+            --tw-skew-y: skewY(0);
+          }
+        }
+      }
+
+      .-rotate-y-45 {
         --tw-rotate-y: rotateY(calc(45deg * -1));
         transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
       }
@@ -4478,7 +4620,19 @@ test('rotate-y', async () => {
 test('rotate-z', async () => {
   expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]']))
     .toMatchInlineSnapshot(`
-      ".-rotate-z-45 {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-rotate-x: rotateX(0);
+            --tw-rotate-y: rotateY(0);
+            --tw-rotate-z: rotateZ(0);
+            --tw-skew-x: skewX(0);
+            --tw-skew-y: skewY(0);
+          }
+        }
+      }
+
+      .-rotate-z-45 {
         --tw-rotate-z: rotateZ(calc(45deg * -1));
         transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
       }
@@ -4543,7 +4697,19 @@ test('rotate-z', async () => {
 
 test('skew', async () => {
   expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
-    ".-skew-6 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-rotate-x: rotateX(0);
+          --tw-rotate-y: rotateY(0);
+          --tw-rotate-z: rotateZ(0);
+          --tw-skew-x: skewX(0);
+          --tw-skew-y: skewY(0);
+        }
+      }
+    }
+
+    .-skew-6 {
       --tw-skew-x: skewX(calc(6deg * -1));
       --tw-skew-y: skewY(calc(6deg * -1));
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
@@ -4605,7 +4771,19 @@ test('skew', async () => {
 
 test('skew-x', async () => {
   expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
-    ".-skew-x-6 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-rotate-x: rotateX(0);
+          --tw-rotate-y: rotateY(0);
+          --tw-rotate-z: rotateZ(0);
+          --tw-skew-x: skewX(0);
+          --tw-skew-y: skewY(0);
+        }
+      }
+    }
+
+    .-skew-x-6 {
       --tw-skew-x: skewX(calc(6deg * -1));
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
@@ -4664,7 +4842,19 @@ test('skew-x', async () => {
 
 test('skew-y', async () => {
   expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
-    ".-skew-y-6 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-rotate-x: rotateX(0);
+          --tw-rotate-y: rotateY(0);
+          --tw-rotate-z: rotateZ(0);
+          --tw-skew-x: skewX(0);
+          --tw-skew-y: skewY(0);
+        }
+      }
+    }
+
+    .-skew-y-6 {
       --tw-skew-y: skewY(calc(6deg * -1));
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
@@ -4724,7 +4914,17 @@ test('skew-y', async () => {
 test('scale', async () => {
   expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
     .toMatchInlineSnapshot(`
-      ".-scale-50 {
+      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
+        }
+      }
+
+      .-scale-50 {
         --tw-scale-x: calc(50% * -1);
         --tw-scale-y: calc(50% * -1);
         --tw-scale-z: calc(50% * -1);
@@ -4780,7 +4980,17 @@ test('scale', async () => {
 
 test('scale-3d', async () => {
   expect(await run(['scale-3d'])).toMatchInlineSnapshot(`
-    ".scale-3d {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scale-x: 1;
+          --tw-scale-y: 1;
+          --tw-scale-z: 1;
+        }
+      }
+    }
+
+    .scale-3d {
       scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
     }
 
@@ -4807,7 +5017,17 @@ test('scale-3d', async () => {
 
 test('scale-x', async () => {
   expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(`
-    ".-scale-x-50 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scale-x: 1;
+          --tw-scale-y: 1;
+          --tw-scale-z: 1;
+        }
+      }
+    }
+
+    .-scale-x-50 {
       --tw-scale-x: calc(50% * -1);
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
@@ -4841,7 +5061,17 @@ test('scale-x', async () => {
     }"
   `)
   expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(`
-    ".scale-200 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scale-x: 1;
+          --tw-scale-y: 1;
+          --tw-scale-z: 1;
+        }
+      }
+    }
+
+    .scale-200 {
       --tw-scale-x: 200%;
       --tw-scale-y: 200%;
       --tw-scale-z: 200%;
@@ -4888,7 +5118,17 @@ test('scale-x', async () => {
 
 test('scale-y', async () => {
   expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(`
-    ".-scale-y-50 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scale-x: 1;
+          --tw-scale-y: 1;
+          --tw-scale-z: 1;
+        }
+      }
+    }
+
+    .-scale-y-50 {
       --tw-scale-y: calc(50% * -1);
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
@@ -4936,7 +5176,17 @@ test('scale-y', async () => {
 
 test('scale-z', async () => {
   expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(`
-    ".-scale-z-50 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scale-x: 1;
+          --tw-scale-y: 1;
+          --tw-scale-z: 1;
+        }
+      }
+    }
+
+    .-scale-z-50 {
       --tw-scale-z: calc(50% * -1);
       scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
     }
@@ -4991,7 +5241,19 @@ test('transform', async () => {
       'transform-[scaleZ(2)_rotateY(45deg)]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".transform {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-rotate-x: rotateX(0);
+          --tw-rotate-y: rotateY(0);
+          --tw-rotate-z: rotateZ(0);
+          --tw-skew-x: skewX(0);
+          --tw-skew-y: skewY(0);
+        }
+      }
+    }
+
+    .transform {
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
 
@@ -5489,7 +5751,17 @@ test('touch-pan', async () => {
       'touch-pan-down',
     ]),
   ).toMatchInlineSnapshot(`
-    ".touch-pan-left {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-pan-x: initial;
+          --tw-pan-y: initial;
+          --tw-pinch-zoom: initial;
+        }
+      }
+    }
+
+    .touch-pan-left {
       --tw-pan-x: pan-left;
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
@@ -5554,7 +5826,17 @@ test('touch-pan', async () => {
 
 test('touch-pinch-zoom', async () => {
   expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(`
-    ".touch-pinch-zoom {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-pan-x: initial;
+          --tw-pan-y: initial;
+          --tw-pinch-zoom: initial;
+        }
+      }
+    }
+
+    .touch-pinch-zoom {
       --tw-pinch-zoom: pinch-zoom;
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
@@ -5648,7 +5930,15 @@ test('resize', async () => {
 
 test('scroll-snap-type', async () => {
   expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(`
-    ".snap-both {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scroll-snap-strictness: proximity;
+        }
+      }
+    }
+
+    .snap-both {
       scroll-snap-type: both var(--tw-scroll-snap-strictness);
     }
 
@@ -5686,7 +5976,15 @@ test('scroll-snap-type', async () => {
 
 test('--tw-scroll-snap-strictness', async () => {
   expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(`
-    ".snap-mandatory {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-scroll-snap-strictness: proximity;
+        }
+      }
+    }
+
+    .snap-mandatory {
       --tw-scroll-snap-strictness: mandatory;
     }
 
@@ -7642,7 +7940,15 @@ test('space-x', async () => {
       ['space-x-4', 'space-x-[4px]', '-space-x-4'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-space-x-reverse: 0;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7685,7 +7991,15 @@ test('space-y', async () => {
       ['space-y-4', 'space-y-[4px]', '-space-y-4'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-space-y-reverse: 0;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing-4: 1rem;
     }
 
@@ -7718,7 +8032,15 @@ test('space-y', async () => {
 
 test('space-x-reverse', async () => {
   expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(`
-    ":where(.space-x-reverse > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-space-x-reverse: 0;
+        }
+      }
+    }
+
+    :where(.space-x-reverse > :not(:last-child)) {
       --tw-space-x-reverse: 1;
     }
 
@@ -7733,7 +8055,15 @@ test('space-x-reverse', async () => {
 
 test('space-y-reverse', async () => {
   expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(`
-    ":where(.space-y-reverse > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-space-y-reverse: 0;
+        }
+      }
+    }
+
+    :where(.space-y-reverse > :not(:last-child)) {
       --tw-space-y-reverse: 1;
     }
 
@@ -7755,7 +8085,16 @@ test('divide-x', async () => {
       ['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-x > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-x-reverse: 0;
+          --tw-border-style: solid;
+        }
+      }
+    }
+
+    :where(.divide-x > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
@@ -7822,7 +8161,16 @@ test('divide-x with custom default border width', async () => {
       ['divide-x'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-x > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-x-reverse: 0;
+          --tw-border-style: solid;
+        }
+      }
+    }
+
+    :where(.divide-x > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(2px * var(--tw-divide-x-reverse));
@@ -7853,7 +8201,16 @@ test('divide-y', async () => {
       ['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-y > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-y-reverse: 0;
+          --tw-border-style: solid;
+        }
+      }
+    }
+
+    :where(.divide-y > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
@@ -7924,7 +8281,16 @@ test('divide-y with custom default border width', async () => {
       ['divide-y'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-y > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-y-reverse: 0;
+          --tw-border-style: solid;
+        }
+      }
+    }
+
+    :where(.divide-y > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
@@ -7949,7 +8315,15 @@ test('divide-y with custom default border width', async () => {
 
 test('divide-x-reverse', async () => {
   expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(`
-    ":where(.divide-x-reverse > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-x-reverse: 0;
+        }
+      }
+    }
+
+    :where(.divide-x-reverse > :not(:last-child)) {
       --tw-divide-x-reverse: 1;
     }
 
@@ -7964,7 +8338,15 @@ test('divide-x-reverse', async () => {
 
 test('divide-y-reverse', async () => {
   expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(`
-    ":where(.divide-y-reverse > :not(:last-child)) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-divide-y-reverse: 0;
+        }
+      }
+    }
+
+    :where(.divide-y-reverse > :not(:last-child)) {
       --tw-divide-y-reverse: 1;
     }
 
@@ -8062,7 +8444,7 @@ test('accent', async () => {
     }
 
     .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      accent-color: oklab(59.9824% -.06725 -.12414 / .5);
+      accent-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .accent-current {
@@ -8082,19 +8464,63 @@ test('accent', async () => {
     }
 
     .accent-red-500\\/2\\.5 {
-      accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      accent-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/2\\.5 {
+        accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .accent-red-500\\/2\\.25 {
-      accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      accent-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/2\\.25 {
+        accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .accent-red-500\\/2\\.75 {
-      accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      accent-color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/2\\.75 {
+        accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .accent-red-500\\/50 {
+      accent-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/50 {
+        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .accent-red-500\\/\\[0\\.5\\] {
+      accent-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/\\[0\\.5\\] {
+        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
-      accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .accent-red-500\\/\\[50\\%\\] {
+      accent-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-red-500\\/\\[50\\%\\] {
+        accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .accent-transparent {
@@ -8177,7 +8603,7 @@ test('caret', async () => {
     }
 
     .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      caret-color: oklab(59.9824% -.06725 -.12414 / .5);
+      caret-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .caret-current {
@@ -8197,19 +8623,63 @@ test('caret', async () => {
     }
 
     .caret-red-500\\/2\\.5 {
-      caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      caret-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/2\\.5 {
+        caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .caret-red-500\\/2\\.25 {
-      caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      caret-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/2\\.25 {
+        caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .caret-red-500\\/2\\.75 {
-      caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      caret-color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/2\\.75 {
+        caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
     }
 
-    .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
-      caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .caret-red-500\\/50 {
+      caret-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/50 {
+        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .caret-red-500\\/\\[0\\.5\\] {
+      caret-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/\\[0\\.5\\] {
+        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .caret-red-500\\/\\[50\\%\\] {
+      caret-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-red-500\\/\\[50\\%\\] {
+        caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .caret-transparent {
@@ -8290,7 +8760,7 @@ test('divide-color', async () => {
     }
 
     :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: oklab(59.9824% -.06725 -.12414 / .5);
+      border-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     :where(.divide-current > :not(:last-child)) {
@@ -8310,33 +8780,77 @@ test('divide-color', async () => {
     }
 
     :where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      border-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     :where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      border-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     :where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      border-color: #ef444407;
     }
 
-    :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
     }
 
-    :where(.divide-transparent > :not(:last-child)) {
-      border-color: #0000;
-    }"
-  `)
-  expect(
-    await run([
-      'divide',
-      '-divide-red-500',
-      '-divide-red-500/50',
-      '-divide-red-500/[0.5]',
-      '-divide-red-500/[50%]',
-      '-divide-current',
+    :where(.divide-red-500\\/50 > :not(:last-child)) {
+      border-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/50 > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
+      border-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
+      border-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
+        border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    :where(.divide-transparent > :not(:last-child)) {
+      border-color: #0000;
+    }"
+  `)
+  expect(
+    await run([
+      'divide',
+      '-divide-red-500',
+      '-divide-red-500/50',
+      '-divide-red-500/[0.5]',
+      '-divide-red-500/[50%]',
+      '-divide-current',
       '-divide-current/50',
       '-divide-current/[0.5]',
       '-divide-current/[50%]',
@@ -10070,7 +10584,15 @@ test('border with custom default border width', async () => {
       ['border'],
     ),
   ).toMatchInlineSnapshot(`
-    ".border {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-border-style: solid;
+        }
+      }
+    }
+
+    .border {
       border-style: var(--tw-border-style);
       border-width: 2px;
     }
@@ -10242,7 +10764,7 @@ test('bg', async () => {
     }
 
     .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      background-color: oklab(59.9824% -.06725 -.12414 / .5);
+      background-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .bg-\\[color\\:var\\(--some-var\\)\\] {
@@ -10282,230 +10804,423 @@ test('bg', async () => {
     }
 
     .bg-red-500\\/2\\.5 {
-      background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
-    }
-
-    .bg-red-500\\/2\\.25 {
-      background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      background-color: #ef444406;
     }
 
-    .bg-red-500\\/2\\.75 {
-      background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
-    }
-
-    .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
-      background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/2\\.5 {
+        background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
-    .bg-transparent {
-      background-color: #0000;
+    .bg-red-500\\/2\\.25 {
+      background-color: #ef444406;
     }
 
-    .-bg-conic-45\\/oklab {
-      --tw-gradient-position: from calc(45deg * -1) in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/2\\.25 {
+        background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
-    .-bg-linear-45, .-bg-linear-45\\/oklab {
-      --tw-gradient-position: calc(45deg * -1) in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
+    .bg-red-500\\/2\\.75 {
+      background-color: #ef444407;
     }
 
-    .-bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: calc(74.4845deg * -1);
-      background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/2\\.75 {
+        background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
     }
 
-    .-bg-linear-\\[125deg\\] {
-      --tw-gradient-position: calc(125deg * -1);
-      background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1)));
+    .bg-red-500\\/50 {
+      background-color: #ef444480;
     }
 
-    .bg-conic-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: from 45deg in hsl longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/50 {
+        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .bg-conic-45\\/oklab {
-      --tw-gradient-position: from 45deg in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .bg-red-500\\/\\[0\\.5\\] {
+      background-color: #ef444480;
     }
 
-    .bg-conic-45\\/shorter {
-      --tw-gradient-position: from 45deg in oklch shorter hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/\\[0\\.5\\] {
+        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .bg-conic\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: in hsl longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .bg-red-500\\/\\[50\\%\\] {
+      background-color: #ef444480;
     }
 
-    .bg-conic\\/decreasing {
-      --tw-gradient-position: in oklch decreasing hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-red-500\\/\\[50\\%\\] {
+        background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .bg-conic\\/hsl {
-      --tw-gradient-position: in hsl;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .bg-transparent {
+      background-color: #0000;
     }
 
-    .bg-conic\\/increasing {
-      --tw-gradient-position: in oklch increasing hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .-bg-linear-45 {
+      --tw-gradient-position: calc(45deg * -1);
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-conic\\/longer {
-      --tw-gradient-position: in oklch longer hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .-bg-linear-45 {
+        --tw-gradient-position: calc(45deg * -1) in oklab;
+      }
     }
 
-    .bg-conic\\/oklab {
-      --tw-gradient-position: in oklab;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .-bg-linear-45\\/oklab {
+      --tw-gradient-position: calc(45deg * -1);
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-conic\\/oklch {
-      --tw-gradient-position: in oklch;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .-bg-linear-45\\/oklab {
+        --tw-gradient-position: calc(45deg * -1) in oklab;
+      }
     }
 
-    .bg-conic\\/shorter {
-      --tw-gradient-position: in oklch shorter hue;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    .bg-linear-45 {
+      --tw-gradient-position: 45deg;
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-conic\\/srgb {
-      --tw-gradient-position: in srgb;
-      background-image: conic-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-45 {
+        --tw-gradient-position: 45deg in oklab;
+      }
     }
 
-    .bg-linear-45 {
-      --tw-gradient-position: 45deg in oklab;
+    .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: 45deg;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: 45deg in hsl longer hue;
-      background-image: linear-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
+        --tw-gradient-position: 45deg in hsl longer hue;
+      }
     }
 
     .bg-linear-45\\/oklab {
-      --tw-gradient-position: 45deg in oklab;
+      --tw-gradient-position: 45deg;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-linear-45\\/shorter {
-      --tw-gradient-position: 45deg in oklch shorter hue;
-      background-image: linear-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-45\\/oklab {
+        --tw-gradient-position: 45deg in oklab;
+      }
     }
 
-    .bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: 74.4845deg;
-      background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
+    .bg-linear-45\\/shorter {
+      --tw-gradient-position: 45deg;
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-linear-\\[125deg\\] {
-      --tw-gradient-position: 125deg;
-      background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-45\\/shorter {
+        --tw-gradient-position: 45deg in oklch shorter hue;
+      }
     }
 
-    .bg-linear-\\[to_bottom\\] {
+    .bg-linear-to-b {
       --tw-gradient-position: to bottom;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-linear-to-b {
-      --tw-gradient-position: to bottom in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-b {
+        --tw-gradient-position: to bottom in oklab;
+      }
     }
 
     .bg-linear-to-bl {
-      --tw-gradient-position: to bottom left in oklab;
+      --tw-gradient-position: to bottom left;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-bl {
+        --tw-gradient-position: to bottom left in oklab;
+      }
+    }
+
     .bg-linear-to-br {
-      --tw-gradient-position: to bottom right in oklab;
+      --tw-gradient-position: to bottom right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-br {
+        --tw-gradient-position: to bottom right in oklab;
+      }
+    }
+
     .bg-linear-to-l {
-      --tw-gradient-position: to left in oklab;
+      --tw-gradient-position: to left;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-l {
+        --tw-gradient-position: to left in oklab;
+      }
+    }
+
     .bg-linear-to-r {
-      --tw-gradient-position: to right in oklab;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r {
+        --tw-gradient-position: to right in oklab;
+      }
+    }
+
     .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: to right in hsl longer hue;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
+        --tw-gradient-position: to right in hsl longer hue;
+      }
+    }
+
     .bg-linear-to-r\\/\\[longer\\] {
-      --tw-gradient-position: to right longer;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/\\[longer\\] {
+        --tw-gradient-position: to right longer;
+      }
+    }
+
     .bg-linear-to-r\\/decreasing {
-      --tw-gradient-position: to right in oklch decreasing hue;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/decreasing {
+        --tw-gradient-position: to right in oklch decreasing hue;
+      }
+    }
+
     .bg-linear-to-r\\/hsl {
-      --tw-gradient-position: to right in hsl;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/hsl {
+        --tw-gradient-position: to right in hsl;
+      }
+    }
+
     .bg-linear-to-r\\/increasing {
-      --tw-gradient-position: to right in oklch increasing hue;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/increasing {
+        --tw-gradient-position: to right in oklch increasing hue;
+      }
+    }
+
     .bg-linear-to-r\\/longer {
-      --tw-gradient-position: to right in oklch longer hue;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/longer {
+        --tw-gradient-position: to right in oklch longer hue;
+      }
+    }
+
     .bg-linear-to-r\\/oklab {
-      --tw-gradient-position: to right in oklab;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/oklab {
+        --tw-gradient-position: to right in oklab;
+      }
+    }
+
     .bg-linear-to-r\\/oklch {
-      --tw-gradient-position: to right in oklch;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/oklch {
+        --tw-gradient-position: to right in oklch;
+      }
+    }
+
     .bg-linear-to-r\\/shorter {
-      --tw-gradient-position: to right in oklch shorter hue;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/shorter {
+        --tw-gradient-position: to right in oklch shorter hue;
+      }
+    }
+
     .bg-linear-to-r\\/srgb {
-      --tw-gradient-position: to right in srgb;
+      --tw-gradient-position: to right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-r\\/srgb {
+        --tw-gradient-position: to right in srgb;
+      }
+    }
+
     .bg-linear-to-t {
-      --tw-gradient-position: to top in oklab;
+      --tw-gradient-position: to top;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-t {
+        --tw-gradient-position: to top in oklab;
+      }
+    }
+
     .bg-linear-to-tl {
-      --tw-gradient-position: to top left in oklab;
+      --tw-gradient-position: to top left;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-tl {
+        --tw-gradient-position: to top left in oklab;
+      }
+    }
+
     .bg-linear-to-tr {
-      --tw-gradient-position: to top right in oklab;
+      --tw-gradient-position: to top right;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      .bg-linear-to-tr {
+        --tw-gradient-position: to top right in oklab;
+      }
+    }
+
+    .-bg-conic-45\\/oklab {
+      --tw-gradient-position: from calc(45deg * -1) in oklab;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .-bg-linear-\\[1\\.3rad\\] {
+      --tw-gradient-position: calc(74.4845deg * -1);
+      background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
+    }
+
+    .-bg-linear-\\[125deg\\] {
+      --tw-gradient-position: calc(125deg * -1);
+      background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1)));
+    }
+
+    .bg-conic-45\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: from 45deg in hsl longer hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic-45\\/oklab {
+      --tw-gradient-position: from 45deg in oklab;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic-45\\/shorter {
+      --tw-gradient-position: from 45deg in oklch shorter hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: in hsl longer hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/decreasing {
+      --tw-gradient-position: in oklch decreasing hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/hsl {
+      --tw-gradient-position: in hsl;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/increasing {
+      --tw-gradient-position: in oklch increasing hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/longer {
+      --tw-gradient-position: in oklch longer hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklab {
+      --tw-gradient-position: in oklab;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklch {
+      --tw-gradient-position: in oklch;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/shorter {
+      --tw-gradient-position: in oklch shorter hue;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/srgb {
+      --tw-gradient-position: in srgb;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-\\[1\\.3rad\\] {
+      --tw-gradient-position: 74.4845deg;
+      background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
+    }
+
+    .bg-linear-\\[125deg\\] {
+      --tw-gradient-position: 125deg;
+      background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
+    }
+
+    .bg-linear-\\[to_bottom\\] {
+      --tw-gradient-position: to bottom;
+      background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
+    }
+
     .bg-radial-\\[circle_at_center\\] {
       --tw-gradient-position: circle at center;
       background-image: radial-gradient(var(--tw-gradient-stops, circle at center));
@@ -10808,15 +11523,33 @@ test('bg', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-current\\/custom {
-      background-color: color-mix(in oklab, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);
+      background-color: color-mix(in srgb, currentColor var(--custom-opacity), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/custom {
+        background-color: color-mix(in oklab, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);
+      }
     }
 
     .bg-current\\/half {
-      background-color: color-mix(in oklab, currentColor var(--opacity-half, .5), transparent);
+      background-color: color-mix(in srgb, currentColor .5, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/half {
+        background-color: color-mix(in oklab, currentColor var(--opacity-half, .5), transparent);
+      }
     }
 
     .\\[color\\:red\\]\\/half {
-      color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+      color: color-mix(in srgb, red .5, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .\\[color\\:red\\]\\/half {
+        color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+      }
     }"
   `)
 })
@@ -10944,7 +11677,23 @@ test('from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-position: initial;
+          --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -10954,7 +11703,7 @@ test('from', async () => {
     }
 
     .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-gradient-from: oklab(59.9824% -.067 -.124 / .5);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -10993,14 +11742,42 @@ test('from', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-red-500 {
-      --tw-gradient-from: var(--color-red-500);
+    .from-red-500 {
+      --tw-gradient-from: var(--color-red-500);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .from-red-500\\/50 {
+      --tw-gradient-from: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-red-500\\/50 {
+        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .from-red-500\\/\\[0\\.5\\] {
+      --tw-gradient-from: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-red-500\\/\\[0\\.5\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .from-red-500\\/\\[50\\%\\] {
+      --tw-gradient-from: #ef444480;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-red-500\\/\\[50\\%\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .from-transparent {
@@ -11163,7 +11940,23 @@ test('via', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-position: initial;
+          --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -11174,7 +11967,7 @@ test('via', async () => {
     }
 
     .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-gradient-via: oklab(59.9824% -.067 -.124 / .5);
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11227,12 +12020,42 @@ test('via', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .via-red-500\\/50 {
+      --tw-gradient-via: #ef444480;
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-red-500\\/50 {
+        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .via-red-500\\/\\[0\\.5\\] {
+      --tw-gradient-via: #ef444480;
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-red-500\\/\\[0\\.5\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .via-red-500\\/\\[50\\%\\] {
+      --tw-gradient-via: #ef444480;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-red-500\\/\\[50\\%\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
     .via-transparent {
       --tw-gradient-via: transparent;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -11392,7 +12215,23 @@ test('to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-position: initial;
+          --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -11402,7 +12241,7 @@ test('to', async () => {
     }
 
     .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-gradient-to: oklab(59.9824% -.067 -.124 / .5);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11446,11 +12285,39 @@ test('to', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .to-red-500\\/50 {
+      --tw-gradient-to: #ef444480;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/50 {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .to-red-500\\/\\[0\\.5\\] {
+      --tw-gradient-to: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/\\[0\\.5\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .to-red-500\\/\\[50\\%\\] {
+      --tw-gradient-to: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/\\[50\\%\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
     .to-transparent {
       --tw-gradient-to: transparent;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -11929,7 +12796,13 @@ test('mask', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".\\[color\\:red\\]\\/half {
-      color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+      color: color-mix(in srgb, red .5, transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .\\[color\\:red\\]\\/half {
+        color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+      }
     }"
   `)
 })
@@ -12043,7 +12916,25 @@ test('mask-t-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-top-from-position: 0%;
+          --tw-mask-top-to-position: 100%;
+          --tw-mask-top-from-color: black;
+          --tw-mask-top-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -12286,7 +13177,25 @@ test('mask-t-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-top-from-position: 0%;
+          --tw-mask-top-to-position: 100%;
+          --tw-mask-top-from-color: black;
+          --tw-mask-top-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -12530,7 +13439,25 @@ test('mask-r-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-right-from-position: 0%;
+          --tw-mask-right-to-position: 100%;
+          --tw-mask-right-from-color: black;
+          --tw-mask-right-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -12774,7 +13701,25 @@ test('mask-r-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-right-from-position: 0%;
+          --tw-mask-right-to-position: 100%;
+          --tw-mask-right-from-color: black;
+          --tw-mask-right-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -13018,7 +13963,25 @@ test('mask-b-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-bottom-from-position: 0%;
+          --tw-mask-bottom-to-position: 100%;
+          --tw-mask-bottom-from-color: black;
+          --tw-mask-bottom-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -13262,7 +14225,25 @@ test('mask-b-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-bottom-from-position: 0%;
+          --tw-mask-bottom-to-position: 100%;
+          --tw-mask-bottom-from-color: black;
+          --tw-mask-bottom-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -13506,7 +14487,25 @@ test('mask-l-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-left-from-position: 0%;
+          --tw-mask-left-to-position: 100%;
+          --tw-mask-left-from-color: black;
+          --tw-mask-left-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -13750,7 +14749,25 @@ test('mask-l-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-left-from-position: 0%;
+          --tw-mask-left-to-position: 100%;
+          --tw-mask-left-from-color: black;
+          --tw-mask-left-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -13994,7 +15011,29 @@ test('mask-x-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-right-from-position: 0%;
+          --tw-mask-right-to-position: 100%;
+          --tw-mask-right-from-color: black;
+          --tw-mask-right-to-color: transparent;
+          --tw-mask-left-from-position: 0%;
+          --tw-mask-left-to-position: 100%;
+          --tw-mask-left-from-color: black;
+          --tw-mask-left-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -14280,7 +15319,29 @@ test('mask-x-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-right-from-position: 0%;
+          --tw-mask-right-to-position: 100%;
+          --tw-mask-right-from-color: black;
+          --tw-mask-right-to-color: transparent;
+          --tw-mask-left-from-position: 0%;
+          --tw-mask-left-to-position: 100%;
+          --tw-mask-left-from-color: black;
+          --tw-mask-left-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -14566,7 +15627,29 @@ test('mask-y-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-top-from-position: 0%;
+          --tw-mask-top-to-position: 100%;
+          --tw-mask-top-from-color: black;
+          --tw-mask-top-to-color: transparent;
+          --tw-mask-bottom-from-position: 0%;
+          --tw-mask-bottom-to-position: 100%;
+          --tw-mask-bottom-from-color: black;
+          --tw-mask-bottom-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -14852,7 +15935,29 @@ test('mask-y-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-left: linear-gradient(#fff, #fff);
+          --tw-mask-right: linear-gradient(#fff, #fff);
+          --tw-mask-bottom: linear-gradient(#fff, #fff);
+          --tw-mask-top: linear-gradient(#fff, #fff);
+          --tw-mask-top-from-position: 0%;
+          --tw-mask-top-to-position: 100%;
+          --tw-mask-top-from-color: black;
+          --tw-mask-top-to-color: transparent;
+          --tw-mask-bottom-from-position: 0%;
+          --tw-mask-bottom-to-position: 100%;
+          --tw-mask-bottom-from-color: black;
+          --tw-mask-bottom-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -15123,7 +16228,22 @@ test('mask-linear', async () => {
       ['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-mask-linear-45 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-linear-position: 0deg;
+          --tw-mask-linear-from-position: 0%;
+          --tw-mask-linear-to-position: 100%;
+          --tw-mask-linear-from-color: black;
+          --tw-mask-linear-to-color: transparent;
+        }
+      }
+    }
+
+    .-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);
@@ -15247,7 +16367,22 @@ test('mask-linear-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-linear-position: 0deg;
+          --tw-mask-linear-from-position: 0%;
+          --tw-mask-linear-to-position: 100%;
+          --tw-mask-linear-from-color: black;
+          --tw-mask-linear-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -15473,7 +16608,22 @@ test('mask-linear-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-linear-position: 0deg;
+          --tw-mask-linear-from-position: 0%;
+          --tw-mask-linear-to-position: 100%;
+          --tw-mask-linear-from-color: black;
+          --tw-mask-linear-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -15692,7 +16842,24 @@ test('mask-radial', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ".mask-radial-\\[25\\%_25\\%\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-radial-from-position: 0%;
+          --tw-mask-radial-to-position: 100%;
+          --tw-mask-radial-from-color: black;
+          --tw-mask-radial-to-color: transparent;
+          --tw-mask-radial-shape: ellipse;
+          --tw-mask-radial-size: farthest-corner;
+          --tw-mask-radial-position: center;
+        }
+      }
+    }
+
+    .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);
@@ -15930,7 +17097,24 @@ test('mask-radial-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-radial-from-position: 0%;
+          --tw-mask-radial-to-position: 100%;
+          --tw-mask-radial-from-color: black;
+          --tw-mask-radial-to-color: transparent;
+          --tw-mask-radial-shape: ellipse;
+          --tw-mask-radial-size: farthest-corner;
+          --tw-mask-radial-position: center;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -16168,7 +17352,24 @@ test('mask-radial-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-radial-from-position: 0%;
+          --tw-mask-radial-to-position: 100%;
+          --tw-mask-radial-from-color: black;
+          --tw-mask-radial-to-color: transparent;
+          --tw-mask-radial-shape: ellipse;
+          --tw-mask-radial-size: farthest-corner;
+          --tw-mask-radial-position: center;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -16391,7 +17592,22 @@ test('mask-conic', async () => {
       ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-mask-conic-45 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-conic-position: 0deg;
+          --tw-mask-conic-from-position: 0%;
+          --tw-mask-conic-to-position: 100%;
+          --tw-mask-conic-from-color: black;
+          --tw-mask-conic-to-color: transparent;
+        }
+      }
+    }
+
+    .-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);
@@ -16515,7 +17731,22 @@ test('mask-conic-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-conic-position: 0deg;
+          --tw-mask-conic-from-position: 0%;
+          --tw-mask-conic-to-position: 100%;
+          --tw-mask-conic-from-color: black;
+          --tw-mask-conic-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -16741,7 +17972,22 @@ test('mask-conic-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-mask-linear: linear-gradient(#fff, #fff);
+          --tw-mask-radial: linear-gradient(#fff, #fff);
+          --tw-mask-conic: linear-gradient(#fff, #fff);
+          --tw-mask-conic-position: 0deg;
+          --tw-mask-conic-from-position: 0%;
+          --tw-mask-conic-to-position: 100%;
+          --tw-mask-conic-from-color: black;
+          --tw-mask-conic-to-color: transparent;
+        }
+      }
+    }
+
+    :root, :host {
       --spacing: .25rem;
     }
 
@@ -17458,7 +18704,7 @@ test('fill', async () => {
     }
 
     .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      fill: oklab(59.9824% -.06725 -.12414 / .5);
+      fill: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .fill-current {
@@ -17478,19 +18724,63 @@ test('fill', async () => {
     }
 
     .fill-red-500\\/2\\.5 {
-      fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      fill: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/2\\.5 {
+        fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .fill-red-500\\/2\\.25 {
-      fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      fill: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/2\\.25 {
+        fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .fill-red-500\\/2\\.75 {
-      fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      fill: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/2\\.75 {
+        fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .fill-red-500\\/50 {
+      fill: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/50 {
+        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .fill-red-500\\/\\[0\\.5\\] {
+      fill: #ef444480;
     }
 
-    .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
-      fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/\\[0\\.5\\] {
+        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .fill-red-500\\/\\[50\\%\\] {
+      fill: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-red-500\\/\\[50\\%\\] {
+        fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .fill-transparent {
@@ -17579,7 +18869,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      stroke: oklab(59.9824% -.06725 -.12414 / .5);
+      stroke: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .stroke-\\[color\\:var\\(--my-color\\)\\] {
@@ -17619,19 +18909,63 @@ test('stroke', async () => {
     }
 
     .stroke-red-500\\/2\\.5 {
-      stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      stroke: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/2\\.5 {
+        stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .stroke-red-500\\/2\\.25 {
-      stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      stroke: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/2\\.25 {
+        stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .stroke-red-500\\/2\\.75 {
-      stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      stroke: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/2\\.75 {
+        stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .stroke-red-500\\/50 {
+      stroke: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/50 {
+        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .stroke-red-500\\/\\[0\\.5\\] {
+      stroke: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/\\[0\\.5\\] {
+        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .stroke-red-500\\/\\[50\\%\\] {
+      stroke: #ef444480;
     }
 
-    .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
-      stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-red-500\\/\\[50\\%\\] {
+        stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .stroke-transparent {
@@ -18366,7 +19700,15 @@ test('font', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-font-weight: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       --font-weight-bold: 650;
     }
@@ -18593,7 +19935,7 @@ test('placeholder', async () => {
     }
 
     .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
-      color: oklab(59.9824% -.06725 -.12414 / .5);
+      color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .placeholder-current::placeholder {
@@ -18613,19 +19955,63 @@ test('placeholder', async () => {
     }
 
     .placeholder-red-500\\/2\\.5::placeholder {
-      color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/2\\.5::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .placeholder-red-500\\/2\\.25::placeholder {
-      color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/2\\.25::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .placeholder-red-500\\/2\\.75::placeholder {
-      color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/2\\.75::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .placeholder-red-500\\/50::placeholder {
+      color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/50::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .placeholder-red-500\\/\\[0\\.5\\]::placeholder {
+      color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/\\[0\\.5\\]::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .placeholder-red-500\\/\\[50\\%\\]::placeholder {
+      color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-red-500\\/\\[50\\%\\]::placeholder {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .placeholder-transparent::placeholder {
@@ -18718,7 +20104,7 @@ test('decoration', async () => {
     }
 
     .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5);
+      text-decoration-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .decoration-\\[color\\:var\\(--my-color\\)\\] {
@@ -18767,10 +20153,40 @@ test('decoration', async () => {
       text-decoration-color: var(--color-red-500);
     }
 
-    .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .decoration-red-500\\/50 {
+      text-decoration-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-red-500\\/50 {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .decoration-red-500\\/\\[0\\.5\\] {
+      text-decoration-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-red-500\\/\\[0\\.5\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .decoration-red-500\\/\\[50\\%\\] {
+      text-decoration-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-red-500\\/\\[50\\%\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .decoration-transparent {
@@ -18980,7 +20396,24 @@ test('filter', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-blur: initial;
+          --tw-brightness: initial;
+          --tw-contrast: initial;
+          --tw-grayscale: initial;
+          --tw-hue-rotate: initial;
+          --tw-invert: initial;
+          --tw-opacity: initial;
+          --tw-saturate: initial;
+          --tw-sepia: initial;
+          --tw-drop-shadow: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --blur-xl: 24px;
       --drop-shadow: 0 1px 1px #0000000d;
       --drop-shadow-xl: 0 9px 7px #0000001a;
@@ -19300,7 +20733,23 @@ test('backdrop-filter', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-backdrop-blur: initial;
+          --tw-backdrop-brightness: initial;
+          --tw-backdrop-contrast: initial;
+          --tw-backdrop-grayscale: initial;
+          --tw-backdrop-hue-rotate: initial;
+          --tw-backdrop-invert: initial;
+          --tw-backdrop-opacity: initial;
+          --tw-backdrop-saturate: initial;
+          --tw-backdrop-sepia: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --blur-xl: 24px;
     }
 
@@ -19809,7 +21258,15 @@ test('delay', async () => {
 
 test('duration', async () => {
   expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(`
-    ".duration-123 {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-duration: initial;
+        }
+      }
+    }
+
+    .duration-123 {
       --tw-duration: .123s;
       transition-duration: .123s;
     }
@@ -19855,7 +21312,15 @@ test('ease', async () => {
       ['ease-in', 'ease-out', 'ease-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-ease: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --ease-in: cubic-bezier(.4, 0, 1, 1);
       --ease-out: cubic-bezier(0, 0, .2, 1);
     }
@@ -19953,7 +21418,18 @@ test('contain', async () => {
       'contain-[unset]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".contain-inline-size {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-contain-size: initial;
+          --tw-contain-layout: initial;
+          --tw-contain-paint: initial;
+          --tw-contain-style: initial;
+        }
+      }
+    }
+
+    .contain-inline-size {
       --tw-contain-size: inline-size;
       contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
@@ -20031,7 +21507,15 @@ test('contain', async () => {
 
 test('content', async () => {
   expect(await run(['content-["hello_world"]'])).toMatchInlineSnapshot(`
-    ".content-\\[\\"hello_world\\"\\] {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
+    .content-\\[\\"hello_world\\"\\] {
       --tw-content: "hello world";
       content: var(--tw-content);
     }
@@ -20084,7 +21568,15 @@ test('leading', async () => {
       ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-leading: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --leading-tight: 1.25;
       --leading-6: 1.5rem;
     }
@@ -20135,7 +21627,15 @@ test('tracking', async () => {
       ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-tracking: initial;
+        }
+      }
+    }
+
+    :root, :host {
       --tracking-normal: 0em;
       --tracking-wide: .025em;
     }
@@ -20212,7 +21712,19 @@ test('font-variant-numeric', async () => {
       'stacked-fractions',
     ]),
   ).toMatchInlineSnapshot(`
-    ".diagonal-fractions {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-ordinal: initial;
+          --tw-slashed-zero: initial;
+          --tw-numeric-figure: initial;
+          --tw-numeric-spacing: initial;
+          --tw-numeric-fraction: initial;
+        }
+      }
+    }
+
+    .diagonal-fractions {
       --tw-numeric-fraction: diagonal-fractions;
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
     }
@@ -20364,7 +21876,15 @@ test('outline', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-outline-style: solid;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -20415,7 +21935,7 @@ test('outline', async () => {
     }
 
     .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      outline-color: oklab(59.9824% -.06725 -.12414 / .5);
+      outline-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .outline-\\[black\\] {
@@ -20466,8 +21986,34 @@ test('outline', async () => {
       outline-color: var(--color-red-500);
     }
 
-    .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .outline-red-500\\/50 {
+      outline-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-red-500\\/50 {
+        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .outline-red-500\\/\\[0\\.5\\] {
+      outline-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-red-500\\/\\[0\\.5\\] {
+        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .outline-red-500\\/\\[50\\%\\] {
+      outline-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-red-500\\/\\[50\\%\\] {
+        outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .outline-transparent {
@@ -20516,7 +22062,15 @@ test('outline', async () => {
       ['outline'],
     ),
   ).toMatchInlineSnapshot(`
-    ".outline {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-outline-style: solid;
+        }
+      }
+    }
+
+    .outline {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
@@ -20881,7 +22435,7 @@ test('text', async () => {
     }
 
     .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      color: oklab(59.9824% -.06725 -.12414 / .5);
+      color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .text-\\[color\\:var\\(--my-color\\)\\] {
@@ -20917,19 +22471,63 @@ test('text', async () => {
     }
 
     .text-red-500\\/2\\.5 {
-      color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/2\\.5 {
+        color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .text-red-500\\/2\\.25 {
-      color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/2\\.25 {
+        color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .text-red-500\\/2\\.75 {
-      color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/2\\.75 {
+        color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .text-red-500\\/50 {
+      color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/50 {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .text-red-500\\/\\[0\\.5\\] {
+      color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/\\[0\\.5\\] {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .text-red-500\\/\\[50\\%\\] {
+      color: #ef444480;
     }
 
-    .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
-      color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-red-500\\/\\[50\\%\\] {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .text-transparent {
@@ -20990,12 +22588,14 @@ test('text-shadow', async () => {
         'text-shadow-sm',
         'text-shadow-none',
         'text-shadow-[12px_12px_#0088cc]',
+        'text-shadow-[12px_12px_var(--value)]',
         'text-shadow-[10px_10px]',
         'text-shadow-[var(--value)]',
         'text-shadow-[shadow:var(--value)]',
 
         'text-shadow-sm/25',
         'text-shadow-[12px_12px_#0088cc]/25',
+        'text-shadow-[12px_12px_var(--value)]/25',
         'text-shadow-[10px_10px]/25',
 
         // Colors
@@ -21023,18 +22623,38 @@ test('text-shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-text-shadow-color: initial;
+          --tw-text-shadow-alpha: 100%;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
+    .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+      --tw-text-shadow-alpha: 25%;
+      text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
+    }
+
+    @supports (color: lab(from red l a b)) {
+      .text-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+        text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(from var(--value) l a b / 25%));
+      }
+    }
+
     .text-shadow-\\[10px_10px\\]\\/25 {
       --tw-text-shadow-alpha: 25%;
-      text-shadow: 10px 10px var(--tw-text-shadow-color, oklab(from currentcolor l a b / 25%));
+      text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
     }
 
     .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
       --tw-text-shadow-alpha: 25%;
-      text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.06725 -.12414 / .25));
+      text-shadow: 12px 12px var(--tw-text-shadow-color, oklab(59.9824% -.067 -.124 / .25));
     }
 
     .text-shadow-sm\\/25 {
@@ -21051,7 +22671,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-\\[\\#0088cc\\]\\/50, .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.06725 -.12414 / .5) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
     }
 
     .text-shadow-\\[10px_10px\\] {
@@ -21062,6 +22682,10 @@ test('text-shadow', async () => {
       text-shadow: 12px 12px var(--tw-text-shadow-color, #08c);
     }
 
+    .text-shadow-\\[12px_12px_var\\(--value\\)\\] {
+      text-shadow: 12px 12px var(--tw-text-shadow-color, var(--value));
+    }
+
     .text-shadow-\\[color\\:var\\(--value\\)\\] {
       --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
     }
@@ -21091,23 +22715,73 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500 {
-      --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: color-mix(in srgb, #ef4444 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500 {
+        --tw-text-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-red-500\\/2\\.5 {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/2\\.5 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-red-500\\/2\\.25 {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/2\\.25 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-red-500\\/2\\.75 {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: color-mix(in srgb, #ef444407 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/2\\.75 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-red-500\\/50 {
+      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/50 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
-    .text-shadow-red-500\\/50, .text-shadow-red-500\\/\\[0\\.5\\], .text-shadow-red-500\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+    .text-shadow-red-500\\/\\[0\\.5\\] {
+      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/\\[0\\.5\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-red-500\\/\\[50\\%\\] {
+      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-red-500\\/\\[50\\%\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-sm {
@@ -21169,12 +22843,14 @@ test('shadow', async () => {
         'shadow-xl',
         'shadow-none',
         'shadow-[12px_12px_#0088cc]',
+        'shadow-[12px_12px_var(--value)]',
         'shadow-[10px_10px]',
         'shadow-[var(--value)]',
         'shadow-[shadow:var(--value)]',
 
         'shadow-sm/25',
         'shadow-[12px_12px_#0088cc]/25',
+        'shadow-[12px_12px_var(--value)]/25',
         'shadow-[10px_10px]/25',
 
         // Colors
@@ -21202,19 +22878,52 @@ test('shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
+    .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+      --tw-shadow-alpha: 25%;
+      --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
+    @supports (color: lab(from red l a b)) {
+      .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+        --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(from var(--value) l a b / 25%));
+      }
+    }
+
     .shadow-\\[10px_10px\\]\\/25 {
       --tw-shadow-alpha: 25%;
-      --tw-shadow: 10px 10px var(--tw-shadow-color, oklab(from currentcolor l a b / 25%));
+      --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
       --tw-shadow-alpha: 25%;
-      --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.06725 -.12414 / .25));
+      --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -21234,6 +22943,11 @@ test('shadow', async () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .shadow-\\[12px_12px_var\\(--value\\)\\] {
+      --tw-shadow: 12px 12px var(--tw-shadow-color, var(--value));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] {
       --tw-shadow: var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -21259,7 +22973,7 @@ test('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.06725 -.12414 / .5) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
     }
 
     .shadow-\\[color\\:var\\(--value\\)\\] {
@@ -21283,23 +22997,73 @@ test('shadow', async () => {
     }
 
     .shadow-red-500 {
-      --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in srgb, #ef4444 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500 {
+        --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-red-500\\/2\\.5 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/2\\.5 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-red-500\\/2\\.25 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/2\\.25 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-red-500\\/2\\.75 {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: color-mix(in srgb, #ef444407 var(--tw-shadow-alpha), transparent);
     }
 
-    .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/2\\.75 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-red-500\\/50 {
+      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/50 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-red-500\\/\\[0\\.5\\] {
+      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/\\[0\\.5\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-red-500\\/\\[50\\%\\] {
+      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-red-500\\/\\[50\\%\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-transparent {
@@ -21425,12 +23189,14 @@ test('inset-shadow', async () => {
         'inset-shadow-sm',
         'inset-shadow-none',
         'inset-shadow-[12px_12px_#0088cc]',
+        'inset-shadow-[12px_12px_var(--value)]',
         'inset-shadow-[10px_10px]',
         'inset-shadow-[var(--value)]',
         'inset-shadow-[shadow:var(--value)]',
 
         'inset-shadow-sm/25',
         'inset-shadow-[12px_12px_#0088cc]/25',
+        'inset-shadow-[12px_12px_var(--value)]/25',
         'inset-shadow-[10px_10px]/25',
 
         // Colors
@@ -21458,19 +23224,52 @@ test('inset-shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
+    .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+      --tw-inset-shadow-alpha: 25%;
+      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
+    @supports (color: lab(from red l a b)) {
+      .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
+        --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value) l a b / 25%));
+      }
+    }
+
     .inset-shadow-\\[10px_10px\\]\\/25 {
       --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, oklab(from currentcolor l a b / 25%));
+      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
     .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
       --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.06725 -.12414 / .25));
+      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -21495,6 +23294,11 @@ test('inset-shadow', async () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .inset-shadow-\\[12px_12px_var\\(--value\\)\\] {
+      --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] {
       --tw-inset-shadow: inset var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -21515,7 +23319,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.06725 -.12414 / .5) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
     }
 
     .inset-shadow-\\[color\\:var\\(--value\\)\\] {
@@ -21539,23 +23343,73 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500 {
-      --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: color-mix(in srgb, #ef4444 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500 {
+        --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-red-500\\/2\\.5 {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/2\\.5 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.5%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-red-500\\/2\\.25 {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/2\\.25 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.25%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-red-500\\/2\\.75 {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444407 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/2\\.75 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 2.75%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-red-500\\/50 {
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/50 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
-    .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    .inset-shadow-red-500\\/\\[0\\.5\\] {
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/\\[0\\.5\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-red-500\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-red-500\\/\\[50\\%\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-transparent {
@@ -21713,7 +23567,28 @@ test('ring', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -21757,7 +23632,7 @@ test('ring', async () => {
     }
 
     .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-ring-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -21793,19 +23668,63 @@ test('ring', async () => {
     }
 
     .ring-red-500\\/2\\.5 {
-      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      --tw-ring-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/2\\.5 {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .ring-red-500\\/2\\.25 {
-      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      --tw-ring-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/2\\.25 {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .ring-red-500\\/2\\.75 {
-      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      --tw-ring-color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/2\\.75 {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .ring-red-500\\/50 {
+      --tw-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/50 {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .ring-red-500\\/\\[0\\.5\\] {
+      --tw-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/\\[0\\.5\\] {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .ring-red-500\\/\\[50\\%\\] {
+      --tw-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-red-500\\/\\[50\\%\\] {
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .ring-transparent {
@@ -21906,7 +23825,28 @@ test('ring', async () => {
       ['ring'],
     ),
   ).toMatchInlineSnapshot(`
-    ".ring {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    .ring {
       --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
@@ -22076,7 +24016,28 @@ test('inset-ring', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-color: initial;
+          --tw-shadow-alpha: 100%;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-color: initial;
+          --tw-inset-shadow-alpha: 100%;
+          --tw-ring-color: initial;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: initial;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: initial;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
+    :root, :host {
       --color-red-500: #ef4444;
     }
 
@@ -22120,7 +24081,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -22156,19 +24117,63 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-red-500\\/2\\.5 {
-      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      --tw-inset-ring-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/2\\.5 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
+      }
     }
 
     .inset-ring-red-500\\/2\\.25 {
-      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      --tw-inset-ring-color: #ef444406;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/2\\.25 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
+      }
     }
 
     .inset-ring-red-500\\/2\\.75 {
-      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      --tw-inset-ring-color: #ef444407;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/2\\.75 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
+      }
+    }
+
+    .inset-ring-red-500\\/50 {
+      --tw-inset-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/50 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .inset-ring-red-500\\/\\[0\\.5\\] {
+      --tw-inset-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/\\[0\\.5\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
-    .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .inset-ring-red-500\\/\\[50\\%\\] {
+      --tw-inset-ring-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-red-500\\/\\[50\\%\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .inset-ring-transparent {
@@ -22376,7 +24381,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5);
+      --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
     .ring-offset-\\[color\\:var\\(--my-color\\)\\] {
@@ -22411,8 +24416,34 @@ test('ring-offset', async () => {
       --tw-ring-offset-color: var(--color-red-500);
     }
 
-    .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    .ring-offset-red-500\\/50 {
+      --tw-ring-offset-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-red-500\\/50 {
+        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .ring-offset-red-500\\/\\[0\\.5\\] {
+      --tw-ring-offset-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-red-500\\/\\[0\\.5\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .ring-offset-red-500\\/\\[50\\%\\] {
+      --tw-ring-offset-color: #ef444480;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-red-500\\/\\[50\\%\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
     }
 
     .ring-offset-transparent {
@@ -22645,7 +24676,7 @@ describe('custom utilities', () => {
           text-box-edge: cap alphabetic;
         }
 
-        @media (width >= 1024px) {
+        @media (min-width: 1024px) {
           .lg\\:text-trim {
             text-box-trim: both;
             text-box-edge: cap alphabetic;
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 52f958c4af89..6ac0321bb976 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2,6 +2,7 @@ import {
   atRoot,
   atRule,
   decl,
+  rule,
   styleRule,
   walk,
   type AstNode,
@@ -185,9 +186,7 @@ export function withAlpha(value: string, alpha: string): string {
 /**
  * Apply opacity to a color using `color-mix`.
  */
-export function replaceAlpha(value: string, alpha: string | null): string {
-  if (alpha === null) return value
-
+export function replaceAlpha(value: string, alpha: string): string {
   // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
   // work properly with `color-mix`. Assume anything that isn't a number is
   // safe to pass through as-is, like `var(--my-opacity)`.
@@ -2533,7 +2532,10 @@ export function createUtilities(theme: Theme) {
         let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
         return [
-          decl('--tw-gradient-position', `${value} ${interpolationMethod}`),
+          decl('--tw-gradient-position', `${value}`),
+          rule('@supports (background-image: linear-gradient(in lab, red, red))', [
+            decl('--tw-gradient-position', `${value} ${interpolationMethod}`),
+          ]),
           decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
         ]
       }
@@ -4995,9 +4997,11 @@ export function createUtilities(theme: Theme) {
         return [
           textShadowProperties(),
           decl('--tw-text-shadow-alpha', alpha),
-          decl(
+          ...alphaReplacedShadowProperties(
             'text-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-text-shadow-color, ${color})`,
           ),
         ]
       }
@@ -5019,13 +5023,11 @@ export function createUtilities(theme: Theme) {
             return [
               textShadowProperties(),
               decl('--tw-text-shadow-alpha', alpha),
-              decl(
+              ...alphaReplacedShadowProperties(
                 'text-shadow',
-                replaceShadowColors(
-                  value,
-                  alpha,
-                  (color) => `var(--tw-text-shadow-color, ${color})`,
-                ),
+                value,
+                alpha,
+                (color) => `var(--tw-text-shadow-color, ${color})`,
               ),
             ]
           }
@@ -5045,9 +5047,11 @@ export function createUtilities(theme: Theme) {
           return [
             textShadowProperties(),
             decl('--tw-text-shadow-alpha', alpha),
-            decl(
+            ...alphaReplacedShadowProperties(
               'text-shadow',
-              replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
+              value,
+              alpha,
+              (color) => `var(--tw-text-shadow-color, ${color})`,
             ),
           ]
         }
@@ -5135,9 +5139,11 @@ export function createUtilities(theme: Theme) {
         return [
           boxShadowProperties(),
           decl('--tw-shadow-alpha', alpha),
-          decl(
+          ...alphaReplacedShadowProperties(
             '--tw-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-shadow-color, ${color})`,
           ),
           decl('box-shadow', cssBoxShadowValue),
         ]
@@ -5161,9 +5167,11 @@ export function createUtilities(theme: Theme) {
             return [
               boxShadowProperties(),
               decl('--tw-shadow-alpha', alpha),
-              decl(
+              ...alphaReplacedShadowProperties(
                 '--tw-shadow',
-                replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+                value,
+                alpha,
+                (color) => `var(--tw-shadow-color, ${color})`,
               ),
               decl('box-shadow', cssBoxShadowValue),
             ]
@@ -5188,9 +5196,11 @@ export function createUtilities(theme: Theme) {
           return [
             boxShadowProperties(),
             decl('--tw-shadow-alpha', alpha),
-            decl(
+            ...alphaReplacedShadowProperties(
               '--tw-shadow',
-              replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+              value,
+              alpha,
+              (color) => `var(--tw-shadow-color, ${color})`,
             ),
             decl('box-shadow', cssBoxShadowValue),
           ]
@@ -5250,9 +5260,11 @@ export function createUtilities(theme: Theme) {
         return [
           boxShadowProperties(),
           decl('--tw-inset-shadow-alpha', alpha),
-          decl(
+          ...alphaReplacedShadowProperties(
             '--tw-inset-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-inset-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-inset-shadow-color, ${color})`,
           ),
           decl('box-shadow', cssBoxShadowValue),
         ]
@@ -5276,13 +5288,12 @@ export function createUtilities(theme: Theme) {
             return [
               boxShadowProperties(),
               decl('--tw-inset-shadow-alpha', alpha),
-              decl(
+              ...alphaReplacedShadowProperties(
                 '--tw-inset-shadow',
-                `inset ${replaceShadowColors(
-                  value,
-                  alpha,
-                  (color) => `var(--tw-inset-shadow-color, ${color})`,
-                )}`,
+                value,
+                alpha,
+                (color) => `var(--tw-inset-shadow-color, ${color})`,
+                'inset ',
               ),
               decl('box-shadow', cssBoxShadowValue),
             ]
@@ -5308,13 +5319,11 @@ export function createUtilities(theme: Theme) {
           return [
             boxShadowProperties(),
             decl('--tw-inset-shadow-alpha', alpha),
-            decl(
+            ...alphaReplacedShadowProperties(
               '--tw-inset-shadow',
-              replaceShadowColors(
-                value,
-                alpha,
-                (color) => `var(--tw-inset-shadow-color, ${color})`,
-              ),
+              value,
+              alpha,
+              (color) => `var(--tw-inset-shadow-color, ${color})`,
             ),
             decl('box-shadow', cssBoxShadowValue),
           ]
@@ -6065,3 +6074,42 @@ function resolveValueFunction(
     }
   }
 }
+
+function alphaReplacedShadowProperties(
+  property: string,
+  value: string,
+  alpha: string | null | undefined,
+  varInjector: (color: string) => string,
+  prefix: string = '',
+): AstNode[] {
+  let requiresFallback = false
+  let replacedValue = replaceShadowColors(value, (color) => {
+    if (alpha == null) {
+      return varInjector(color)
+    }
+
+    // When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
+    // browser support. Note that the fallback of this is handled more generically in
+    // post-processing.
+    if (color.startsWith('current')) {
+      return varInjector(withAlpha(color, alpha))
+    }
+
+    // If any dynamic values are needed for the relative color syntax, we need to insert a
+    // replacement as lightningcss won't be able to resolve them statically.
+    if (color.startsWith('var(') || alpha.startsWith('var(')) {
+      requiresFallback = true
+    }
+
+    return varInjector(replaceAlpha(color, alpha))
+  })
+
+  if (requiresFallback) {
+    return [
+      decl(property, prefix + replaceShadowColors(value, varInjector)),
+      rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]),
+    ]
+  } else {
+    return [decl(property, prefix + replacedValue)]
+  }
+}
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
index 35aa89386198..c09bb47ddb3f 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.test.ts
@@ -1,72 +1,79 @@
-import { expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
+import { replaceAlpha } from '../utilities'
 import { replaceShadowColors } from './replace-shadow-colors'
 
-const table = [
-  {
-    input: 'var(--my-shadow)',
-    output: 'var(--my-shadow)',
-  },
-  {
-    input: '1px var(--my-shadow)',
-    output: '1px var(--my-shadow)',
-  },
-  {
-    input: '1px 1px var(--my-color)',
-    output: '1px 1px var(--tw-shadow-color, var(--my-color))',
-  },
-  {
-    input: '0 0 0 var(--my-color)',
-    output: '0 0 0 var(--tw-shadow-color, var(--my-color))',
-  },
-  {
-    input: '1px 2px',
-    output: '1px 2px var(--tw-shadow-color, currentcolor)',
-  },
-  {
-    input: '1px 2px 3px',
-    output: '1px 2px 3px var(--tw-shadow-color, currentcolor)',
-  },
-  {
-    input: '1px 2px 3px 4px',
-    output: '1px 2px 3px 4px var(--tw-shadow-color, currentcolor)',
-  },
-  {
-    input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
-    output: [
-      'var(--my-shadow)',
-      '1px 1px var(--tw-shadow-color, var(--my-color))',
-      '0 0 1px var(--tw-shadow-color, var(--my-color))',
-    ].join(', '),
-  },
-  {
-    input: '1px 1px var(--my-color)',
-    intensity: '50%',
-    output: '1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
-  },
-  {
-    input: '1px 2px 3px 4px',
-    intensity: '50%',
-    output: '1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))',
-  },
-  {
-    input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
-    intensity: '50%',
-    output: [
-      'var(--my-shadow)',
-      '1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
-      '0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
-    ].join(', '),
-  },
-]
+describe('without replacer', () => {
+  let replacer = (color: string) => `var(--tw-shadow-color, ${color})`
 
-it.each(table)(
-  'should replace the color of box-shadow $input with $output',
-  ({ input, intensity = null, output }) => {
+  it('should handle var shadow', () => {
+    let parsed = replaceShadowColors('var(--my-shadow)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"var(--my-shadow)"`)
+  })
+
+  it('should handle var shadow with offset', () => {
+    let parsed = replaceShadowColors('1px var(--my-shadow)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px var(--my-shadow)"`)
+  })
+
+  it('should handle var color with offsets', () => {
+    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 1px var(--tw-shadow-color, var(--my-color))"`)
+  })
+
+  it('should handle var color with zero offsets', () => {
+    let parsed = replaceShadowColors('0 0 0 var(--my-color)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"0 0 0 var(--tw-shadow-color, var(--my-color))"`)
+  })
+
+  it('should handle two values with currentcolor', () => {
+    let parsed = replaceShadowColors('1px 2px', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 2px var(--tw-shadow-color, currentcolor)"`)
+  })
+
+  it('should handle three values with currentcolor', () => {
+    let parsed = replaceShadowColors('1px 2px 3px', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px var(--tw-shadow-color, currentcolor)"`)
+  })
+
+  it('should handle four values with currentcolor', () => {
+    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px 4px var(--tw-shadow-color, currentcolor)"`)
+  })
+
+  it('should handle multiple shadows', () => {
+    let parsed = replaceShadowColors(
+      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
+      replacer,
+    )
+    expect(parsed).toMatchInlineSnapshot(`"var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color))"`)
+  })
+})
+
+describe('with replacer', () => {
+  let replacer = (color: string) => `var(--tw-shadow-color, ${replaceAlpha(color, '50%')})`
+
+  it('should handle var color with intensity', () => {
+    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`)
+  })
+
+  it('should handle box-shadow with intensity', () => {
+    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
+    expect(parsed).toMatchInlineSnapshot(`"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`)
+  })
+
+  it('should handle four values with intensity and no color value', () => {
+    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
+    expect(parsed).toMatchInlineSnapshot(
+      `"1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))"`,
+    )
+  })
+
+  it('should handle multiple shadows with intensity', () => {
     let parsed = replaceShadowColors(
-      input,
-      intensity,
-      (color) => `var(--tw-shadow-color, ${color})`,
+      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
+      replacer,
     )
-    expect(parsed).toEqual(output)
-  },
-)
+    expect(parsed).toMatchInlineSnapshot(`"var(--my-shadow), 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%)), 0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`)
+  })
+})
diff --git a/packages/tailwindcss/src/utils/replace-shadow-colors.ts b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
index bf4239ee3f16..e51f9c2a0536 100644
--- a/packages/tailwindcss/src/utils/replace-shadow-colors.ts
+++ b/packages/tailwindcss/src/utils/replace-shadow-colors.ts
@@ -1,14 +1,9 @@
-import { replaceAlpha } from '../utilities'
 import { segment } from './segment'
 
 const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
 const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
-export function replaceShadowColors(
-  input: string,
-  intensity: string | null | undefined,
-  replacement: (color: string) => string,
-) {
+export function replaceShadowColors(input: string, replacement: (color: string) => string) {
   let shadows = segment(input, ',').map((shadow) => {
     shadow = shadow.trim()
     let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
@@ -38,7 +33,7 @@ export function replaceShadowColors(
     // we can't know what to replace.
     if (offsetX === null || offsetY === null) return shadow
 
-    let replacementColor = replacement(replaceAlpha(color ?? 'currentcolor', intensity ?? null))
+    let replacementColor = replacement(color ?? 'currentcolor')
 
     if (color !== null) {
       // If a color was found, replace the color.
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 18e9075b8ec2..0a05785e3d2f 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -114,7 +114,15 @@ test('details-content', async () => {
 
 test('before', async () => {
   expect(await run(['before:flex'])).toMatchInlineSnapshot(`
-    ".before\\:flex:before {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
+    .before\\:flex:before {
       content: var(--tw-content);
       display: flex;
     }
@@ -130,7 +138,15 @@ test('before', async () => {
 
 test('after', async () => {
   expect(await run(['after:flex'])).toMatchInlineSnapshot(`
-    ".after\\:flex:after {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
+    .after\\:flex:after {
       content: var(--tw-content);
       display: flex;
     }
@@ -793,31 +809,31 @@ test('default breakpoints', async () => {
       ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 640px) {
+    "@media (min-width: 640px) {
       .sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 768px) {
+    @media (min-width: 768px) {
       .md\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1024px) {
+    @media (min-width: 1024px) {
       .lg\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1280px) {
+    @media (min-width: 1280px) {
       .xl\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1536px) {
+    @media (min-width: 1536px) {
       .\\32 xl\\:flex {
         display: flex;
       }
@@ -853,7 +869,7 @@ test('custom breakpoint', async () => {
       ['10xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 5000px) {
+    "@media (min-width: 5000px) {
       .\\31 0xl\\:flex {
         display: flex;
       }
@@ -876,19 +892,19 @@ test('max-*', async () => {
       ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width < 1024px) {
+    "@media not all and (min-width: 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 768px) {
+    @media not all and (min-width: 768px) {
       .max-md\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 640px) {
+    @media not all and (min-width: 640px) {
       .max-sm\\:flex {
         display: flex;
       }
@@ -925,19 +941,19 @@ test('min-*', async () => {
       ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 640px) {
+    "@media (min-width: 640px) {
       .min-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 768px) {
+    @media (min-width: 768px) {
       .min-md\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1024px) {
+    @media (min-width: 1024px) {
       .min-lg\\:flex {
         display: flex;
       }
@@ -976,30 +992,30 @@ test('sorting stacked min-* and max-* variants', async () => {
       ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 280px) {
-      @media (width < 640px) {
+    "@media (min-width: 280px) {
+      @media not all and (min-width: 640px) {
         .min-xs\\:max-sm\\:flex {
           display: flex;
         }
       }
     }
 
-    @media (width >= 640px) {
-      @media (width < 1280px) {
+    @media (min-width: 640px) {
+      @media not all and (min-width: 1280px) {
         .min-sm\\:max-xl\\:flex {
           display: flex;
         }
       }
 
-      @media (width < 1024px) {
+      @media not all and (min-width: 1024px) {
         .min-sm\\:max-lg\\:flex {
           display: flex;
         }
       }
     }
 
-    @media (width >= 768px) {
-      @media (width < 1024px) {
+    @media (min-width: 768px) {
+      @media not all and (min-width: 1024px) {
         .min-md\\:max-lg\\:flex {
           display: flex;
         }
@@ -1023,24 +1039,24 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a
       ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 640px) {
+    "@media (min-width: 640px) {
       .sm\\:flex {
         display: flex;
       }
 
-      @media (width < 1024px) {
+      @media not all and (min-width: 1024px) {
         .min-sm\\:max-lg\\:flex {
           display: flex;
         }
       }
     }
 
-    @media (width >= 768px) {
+    @media (min-width: 768px) {
       .md\\:flex {
         display: flex;
       }
 
-      @media (width < 1024px) {
+      @media not all and (min-width: 1024px) {
         .min-md\\:max-lg\\:flex {
           display: flex;
         }
@@ -1079,49 +1095,49 @@ test('min, max and unprefixed breakpoints', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width < 1024px) {
+    "@media not all and (min-width: 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 1000px) {
+    @media not all and (min-width: 1000px) {
       .max-\\[1000px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 768px) {
+    @media not all and (min-width: 768px) {
       .max-md\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 640px) {
+    @media not all and (min-width: 640px) {
       .max-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 640px) {
+    @media (min-width: 640px) {
       .min-sm\\:flex, .sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 700px) {
+    @media (min-width: 700px) {
       .min-\\[700px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 768px) {
+    @media (min-width: 768px) {
       .md\\:flex, .min-md\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1024px) {
+    @media (min-width: 1024px) {
       .lg\\:flex, .min-lg\\:flex {
         display: flex;
       }
@@ -1154,121 +1170,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti
       'max-[12vh]:flex',
     ]),
   ).toMatchInlineSnapshot(`
-    "@media (width < calc(1000px + 12em)) {
+    "@media not all and (min-width: calc(1000px + 12em)) {
       .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < calc(50vh + 12em)) {
+    @media not all and (min-width: calc(50vh + 12em)) {
       .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 12em) {
+    @media not all and (min-width: 12em) {
       .max-\\[12em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 10em) {
+    @media not all and (min-width: 10em) {
       .max-\\[10em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 12px) {
+    @media not all and (min-width: 12px) {
       .max-\\[12px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 10px) {
+    @media not all and (min-width: 10px) {
       .max-\\[10px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 12rem) {
+    @media not all and (min-width: 12rem) {
       .max-\\[12rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 10rem) {
+    @media not all and (min-width: 10rem) {
       .max-\\[10rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 12vh) {
+    @media not all and (min-width: 12vh) {
       .max-\\[12vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 10vh) {
+    @media not all and (min-width: 10vh) {
       .max-\\[10vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= calc(1000px + 12em)) {
+    @media (min-width: calc(1000px + 12em)) {
       .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= calc(50vh + 12em)) {
+    @media (min-width: calc(50vh + 12em)) {
       .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 10em) {
+    @media (min-width: 10em) {
       .min-\\[10em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 12em) {
+    @media (min-width: 12em) {
       .min-\\[12em\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 10px) {
+    @media (min-width: 10px) {
       .min-\\[10px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 12px) {
+    @media (min-width: 12px) {
       .min-\\[12px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 10rem) {
+    @media (min-width: 10rem) {
       .min-\\[10rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 12rem) {
+    @media (min-width: 12rem) {
       .min-\\[12rem\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 10vh) {
+    @media (min-width: 10vh) {
       .min-\\[10vh\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 12vh) {
+    @media (min-width: 12vh) {
       .min-\\[12vh\\]\\:flex {
         display: flex;
       }
@@ -1463,7 +1479,7 @@ test('not', async () => {
       display: flex;
     }
 
-    @media not (hover: hover) {
+    @media not all and (hover: hover) {
       .not-hover\\:flex {
         display: flex;
       }
@@ -1479,61 +1495,61 @@ test('not', async () => {
       }
     }
 
-    @media not (prefers-reduced-motion: no-preference) {
+    @media not all and (prefers-reduced-motion: no-preference) {
       .not-motion-safe\\:flex {
         display: flex;
       }
     }
 
-    @media not (prefers-reduced-motion: reduce) {
+    @media not all and (prefers-reduced-motion: reduce) {
       .not-motion-reduce\\:flex {
         display: flex;
       }
     }
 
-    @media not (prefers-contrast: more) {
+    @media not all and (prefers-contrast: more) {
       .not-contrast-more\\:flex {
         display: flex;
       }
     }
 
-    @media not (prefers-contrast: less) {
+    @media not all and (prefers-contrast: less) {
       .not-contrast-less\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 640px) {
+    @media (min-width: 640px) {
       .not-max-sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 130px) {
+    @media (min-width: 130px) {
       .not-max-\\[130px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 130px) {
+    @media not all and (min-width: 130px) {
       .not-min-\\[130px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media (width < 640px) {
+    @media not all and (min-width: 640px) {
       .not-min-sm\\:flex, .not-sm\\:flex {
         display: flex;
       }
     }
 
-    @media not (orientation: portrait) {
+    @media not all and (orientation: portrait) {
       .not-portrait\\:flex {
         display: flex;
       }
     }
 
-    @media not (orientation: landscape) {
+    @media not all and (orientation: landscape) {
       .not-landscape\\:flex {
         display: flex;
       }
@@ -1543,7 +1559,7 @@ test('not', async () => {
       display: flex;
     }
 
-    @media not (prefers-color-scheme: dark) {
+    @media not all and (prefers-color-scheme: dark) {
       .not-dark\\:flex {
         display: flex;
       }
@@ -1555,13 +1571,13 @@ test('not', async () => {
       }
     }
 
-    @media not (forced-colors: active) {
+    @media not all and (forced-colors: active) {
       .not-forced-colors\\:flex {
         display: flex;
       }
     }
 
-    @media not (scripting: none) {
+    @media not all and (scripting: none) {
       .not-noscript\\:flex {
         display: flex;
       }
@@ -1571,7 +1587,7 @@ test('not', async () => {
       display: flex;
     }
 
-    @media not (hover: hover) {
+    @media not all and (hover: hover) {
       .not-device-hocus\\:flex {
         display: flex;
       }
@@ -1581,7 +1597,7 @@ test('not', async () => {
       display: flex;
     }
 
-    @media not (orientation: landscape) {
+    @media not all and (orientation: landscape) {
       .not-\\[\\@media_\\(orientation\\:landscape\\)\\]\\:flex {
         display: flex;
       }
@@ -1599,7 +1615,7 @@ test('not', async () => {
       }
     }
 
-    @media not (orientation: portrait) {
+    @media not all and (orientation: portrait) {
       .not-\\[\\@media\\(orientation\\:portrait\\)\\]\\:flex {
         display: flex;
       }
@@ -2079,61 +2095,61 @@ test('container queries', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@container name (width < 1024px) {
+    "@container name not (min-width: 1024px) {
       .\\@max-lg\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (width < 1024px) {
+    @container not (min-width: 1024px) {
       .\\@max-lg\\:flex {
         display: flex;
       }
     }
 
-    @container name (width < 456px) {
+    @container name not (min-width: 456px) {
       .\\@max-\\[456px\\]\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (width < 123px) {
+    @container not (min-width: 123px) {
       .\\@max-\\[123px\\]\\:flex {
         display: flex;
       }
     }
 
-    @container (width >= 123px) {
+    @container (min-width: 123px) {
       .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex {
         display: flex;
       }
     }
 
-    @container name (width >= 456px) {
+    @container name (min-width: 456px) {
       .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container name (width >= 1024px) {
+    @container name (min-width: 1024px) {
       .\\@lg\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (width >= 1024px) {
+    @container (min-width: 1024px) {
       .\\@lg\\:flex {
         display: flex;
       }
     }
 
-    @container name (width >= 1024px) {
+    @container name (min-width: 1024px) {
       .\\@min-lg\\/name\\:flex {
         display: flex;
       }
     }
 
-    @container (width >= 1024px) {
+    @container (min-width: 1024px) {
       .\\@min-lg\\:flex {
         display: flex;
       }
@@ -2232,7 +2248,15 @@ test('variant order', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
+    @media (hover: hover) {
       .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
         display: flex;
       }
@@ -2327,31 +2351,31 @@ test('variant order', async () => {
       }
     }
 
-    @media (width >= 640px) {
+    @media (min-width: 640px) {
       .sm\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 768px) {
+    @media (min-width: 768px) {
       .md\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1024px) {
+    @media (min-width: 1024px) {
       .lg\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1280px) {
+    @media (min-width: 1280px) {
       .xl\\:flex {
         display: flex;
       }
     }
 
-    @media (width >= 1536px) {
+    @media (min-width: 1536px) {
       .\\32 xl\\:flex {
         display: flex;
       }
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index ed1a3e9b82cc..a62a9306bfd2 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -2,8 +2,8 @@ import { expect, test, type Page } from '@playwright/test'
 import { Scanner } from '@tailwindcss/oxide'
 import fs from 'node:fs'
 import path from 'node:path'
+import { optimize } from '../../@tailwindcss-node/src/optimize'
 import { compile } from '../src'
-import { optimizeCss } from '../src/test-utils/run'
 import { segment } from '../src/utils/segment'
 
 const html = String.raw
@@ -2137,7 +2137,7 @@ async function render(page: Page, content: string, extraCss: string = '') {
   let scanner = new Scanner({})
   let candidates = scanner.scanFiles([{ content, extension: 'html' }])
 
-  let styles = optimizeCss(build(candidates))
+  let styles = optimize(build(candidates))
 
   content = `<style type="text/css">${styles}</style>${content}`
   await page.setContent(content)
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 25411806d710..52d447f7ffa0 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -7,269 +7,269 @@
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
 
-  --color-red-50: oklch(0.971 0.013 17.38);
-  --color-red-100: oklch(0.936 0.032 17.717);
-  --color-red-200: oklch(0.885 0.062 18.334);
-  --color-red-300: oklch(0.808 0.114 19.571);
-  --color-red-400: oklch(0.704 0.191 22.216);
-  --color-red-500: oklch(0.637 0.237 25.331);
-  --color-red-600: oklch(0.577 0.245 27.325);
-  --color-red-700: oklch(0.505 0.213 27.518);
-  --color-red-800: oklch(0.444 0.177 26.899);
-  --color-red-900: oklch(0.396 0.141 25.723);
-  --color-red-950: oklch(0.258 0.092 26.042);
-
-  --color-orange-50: oklch(0.98 0.016 73.684);
-  --color-orange-100: oklch(0.954 0.038 75.164);
-  --color-orange-200: oklch(0.901 0.076 70.697);
-  --color-orange-300: oklch(0.837 0.128 66.29);
-  --color-orange-400: oklch(0.75 0.183 55.934);
-  --color-orange-500: oklch(0.705 0.213 47.604);
-  --color-orange-600: oklch(0.646 0.222 41.116);
-  --color-orange-700: oklch(0.553 0.195 38.402);
-  --color-orange-800: oklch(0.47 0.157 37.304);
-  --color-orange-900: oklch(0.408 0.123 38.172);
-  --color-orange-950: oklch(0.266 0.079 36.259);
-
-  --color-amber-50: oklch(0.987 0.022 95.277);
-  --color-amber-100: oklch(0.962 0.059 95.617);
-  --color-amber-200: oklch(0.924 0.12 95.746);
-  --color-amber-300: oklch(0.879 0.169 91.605);
-  --color-amber-400: oklch(0.828 0.189 84.429);
-  --color-amber-500: oklch(0.769 0.188 70.08);
-  --color-amber-600: oklch(0.666 0.179 58.318);
-  --color-amber-700: oklch(0.555 0.163 48.998);
-  --color-amber-800: oklch(0.473 0.137 46.201);
-  --color-amber-900: oklch(0.414 0.112 45.904);
-  --color-amber-950: oklch(0.279 0.077 45.635);
-
-  --color-yellow-50: oklch(0.987 0.026 102.212);
-  --color-yellow-100: oklch(0.973 0.071 103.193);
-  --color-yellow-200: oklch(0.945 0.129 101.54);
-  --color-yellow-300: oklch(0.905 0.182 98.111);
-  --color-yellow-400: oklch(0.852 0.199 91.936);
-  --color-yellow-500: oklch(0.795 0.184 86.047);
-  --color-yellow-600: oklch(0.681 0.162 75.834);
-  --color-yellow-700: oklch(0.554 0.135 66.442);
-  --color-yellow-800: oklch(0.476 0.114 61.907);
-  --color-yellow-900: oklch(0.421 0.095 57.708);
-  --color-yellow-950: oklch(0.286 0.066 53.813);
-
-  --color-lime-50: oklch(0.986 0.031 120.757);
-  --color-lime-100: oklch(0.967 0.067 122.328);
-  --color-lime-200: oklch(0.938 0.127 124.321);
-  --color-lime-300: oklch(0.897 0.196 126.665);
-  --color-lime-400: oklch(0.841 0.238 128.85);
-  --color-lime-500: oklch(0.768 0.233 130.85);
-  --color-lime-600: oklch(0.648 0.2 131.684);
-  --color-lime-700: oklch(0.532 0.157 131.589);
-  --color-lime-800: oklch(0.453 0.124 130.933);
-  --color-lime-900: oklch(0.405 0.101 131.063);
-  --color-lime-950: oklch(0.274 0.072 132.109);
-
-  --color-green-50: oklch(0.982 0.018 155.826);
-  --color-green-100: oklch(0.962 0.044 156.743);
-  --color-green-200: oklch(0.925 0.084 155.995);
-  --color-green-300: oklch(0.871 0.15 154.449);
-  --color-green-400: oklch(0.792 0.209 151.711);
-  --color-green-500: oklch(0.723 0.219 149.579);
-  --color-green-600: oklch(0.627 0.194 149.214);
-  --color-green-700: oklch(0.527 0.154 150.069);
-  --color-green-800: oklch(0.448 0.119 151.328);
-  --color-green-900: oklch(0.393 0.095 152.535);
-  --color-green-950: oklch(0.266 0.065 152.934);
-
-  --color-emerald-50: oklch(0.979 0.021 166.113);
-  --color-emerald-100: oklch(0.95 0.052 163.051);
-  --color-emerald-200: oklch(0.905 0.093 164.15);
-  --color-emerald-300: oklch(0.845 0.143 164.978);
-  --color-emerald-400: oklch(0.765 0.177 163.223);
-  --color-emerald-500: oklch(0.696 0.17 162.48);
-  --color-emerald-600: oklch(0.596 0.145 163.225);
-  --color-emerald-700: oklch(0.508 0.118 165.612);
-  --color-emerald-800: oklch(0.432 0.095 166.913);
-  --color-emerald-900: oklch(0.378 0.077 168.94);
-  --color-emerald-950: oklch(0.262 0.051 172.552);
-
-  --color-teal-50: oklch(0.984 0.014 180.72);
-  --color-teal-100: oklch(0.953 0.051 180.801);
-  --color-teal-200: oklch(0.91 0.096 180.426);
-  --color-teal-300: oklch(0.855 0.138 181.071);
-  --color-teal-400: oklch(0.777 0.152 181.912);
-  --color-teal-500: oklch(0.704 0.14 182.503);
-  --color-teal-600: oklch(0.6 0.118 184.704);
-  --color-teal-700: oklch(0.511 0.096 186.391);
-  --color-teal-800: oklch(0.437 0.078 188.216);
-  --color-teal-900: oklch(0.386 0.063 188.416);
-  --color-teal-950: oklch(0.277 0.046 192.524);
-
-  --color-cyan-50: oklch(0.984 0.019 200.873);
-  --color-cyan-100: oklch(0.956 0.045 203.388);
-  --color-cyan-200: oklch(0.917 0.08 205.041);
-  --color-cyan-300: oklch(0.865 0.127 207.078);
-  --color-cyan-400: oklch(0.789 0.154 211.53);
-  --color-cyan-500: oklch(0.715 0.143 215.221);
-  --color-cyan-600: oklch(0.609 0.126 221.723);
-  --color-cyan-700: oklch(0.52 0.105 223.128);
-  --color-cyan-800: oklch(0.45 0.085 224.283);
-  --color-cyan-900: oklch(0.398 0.07 227.392);
-  --color-cyan-950: oklch(0.302 0.056 229.695);
-
-  --color-sky-50: oklch(0.977 0.013 236.62);
-  --color-sky-100: oklch(0.951 0.026 236.824);
-  --color-sky-200: oklch(0.901 0.058 230.902);
-  --color-sky-300: oklch(0.828 0.111 230.318);
-  --color-sky-400: oklch(0.746 0.16 232.661);
-  --color-sky-500: oklch(0.685 0.169 237.323);
-  --color-sky-600: oklch(0.588 0.158 241.966);
-  --color-sky-700: oklch(0.5 0.134 242.749);
-  --color-sky-800: oklch(0.443 0.11 240.79);
-  --color-sky-900: oklch(0.391 0.09 240.876);
-  --color-sky-950: oklch(0.293 0.066 243.157);
-
-  --color-blue-50: oklch(0.97 0.014 254.604);
-  --color-blue-100: oklch(0.932 0.032 255.585);
-  --color-blue-200: oklch(0.882 0.059 254.128);
-  --color-blue-300: oklch(0.809 0.105 251.813);
-  --color-blue-400: oklch(0.707 0.165 254.624);
-  --color-blue-500: oklch(0.623 0.214 259.815);
-  --color-blue-600: oklch(0.546 0.245 262.881);
-  --color-blue-700: oklch(0.488 0.243 264.376);
-  --color-blue-800: oklch(0.424 0.199 265.638);
-  --color-blue-900: oklch(0.379 0.146 265.522);
-  --color-blue-950: oklch(0.282 0.091 267.935);
-
-  --color-indigo-50: oklch(0.962 0.018 272.314);
-  --color-indigo-100: oklch(0.93 0.034 272.788);
-  --color-indigo-200: oklch(0.87 0.065 274.039);
-  --color-indigo-300: oklch(0.785 0.115 274.713);
-  --color-indigo-400: oklch(0.673 0.182 276.935);
-  --color-indigo-500: oklch(0.585 0.233 277.117);
-  --color-indigo-600: oklch(0.511 0.262 276.966);
-  --color-indigo-700: oklch(0.457 0.24 277.023);
-  --color-indigo-800: oklch(0.398 0.195 277.366);
-  --color-indigo-900: oklch(0.359 0.144 278.697);
-  --color-indigo-950: oklch(0.257 0.09 281.288);
-
-  --color-violet-50: oklch(0.969 0.016 293.756);
-  --color-violet-100: oklch(0.943 0.029 294.588);
-  --color-violet-200: oklch(0.894 0.057 293.283);
-  --color-violet-300: oklch(0.811 0.111 293.571);
-  --color-violet-400: oklch(0.702 0.183 293.541);
-  --color-violet-500: oklch(0.606 0.25 292.717);
-  --color-violet-600: oklch(0.541 0.281 293.009);
-  --color-violet-700: oklch(0.491 0.27 292.581);
-  --color-violet-800: oklch(0.432 0.232 292.759);
-  --color-violet-900: oklch(0.38 0.189 293.745);
-  --color-violet-950: oklch(0.283 0.141 291.089);
-
-  --color-purple-50: oklch(0.977 0.014 308.299);
-  --color-purple-100: oklch(0.946 0.033 307.174);
-  --color-purple-200: oklch(0.902 0.063 306.703);
-  --color-purple-300: oklch(0.827 0.119 306.383);
-  --color-purple-400: oklch(0.714 0.203 305.504);
-  --color-purple-500: oklch(0.627 0.265 303.9);
-  --color-purple-600: oklch(0.558 0.288 302.321);
-  --color-purple-700: oklch(0.496 0.265 301.924);
-  --color-purple-800: oklch(0.438 0.218 303.724);
-  --color-purple-900: oklch(0.381 0.176 304.987);
-  --color-purple-950: oklch(0.291 0.149 302.717);
-
-  --color-fuchsia-50: oklch(0.977 0.017 320.058);
-  --color-fuchsia-100: oklch(0.952 0.037 318.852);
-  --color-fuchsia-200: oklch(0.903 0.076 319.62);
-  --color-fuchsia-300: oklch(0.833 0.145 321.434);
-  --color-fuchsia-400: oklch(0.74 0.238 322.16);
-  --color-fuchsia-500: oklch(0.667 0.295 322.15);
-  --color-fuchsia-600: oklch(0.591 0.293 322.896);
-  --color-fuchsia-700: oklch(0.518 0.253 323.949);
-  --color-fuchsia-800: oklch(0.452 0.211 324.591);
-  --color-fuchsia-900: oklch(0.401 0.17 325.612);
-  --color-fuchsia-950: oklch(0.293 0.136 325.661);
-
-  --color-pink-50: oklch(0.971 0.014 343.198);
-  --color-pink-100: oklch(0.948 0.028 342.258);
-  --color-pink-200: oklch(0.899 0.061 343.231);
-  --color-pink-300: oklch(0.823 0.12 346.018);
-  --color-pink-400: oklch(0.718 0.202 349.761);
-  --color-pink-500: oklch(0.656 0.241 354.308);
-  --color-pink-600: oklch(0.592 0.249 0.584);
-  --color-pink-700: oklch(0.525 0.223 3.958);
-  --color-pink-800: oklch(0.459 0.187 3.815);
-  --color-pink-900: oklch(0.408 0.153 2.432);
-  --color-pink-950: oklch(0.284 0.109 3.907);
-
-  --color-rose-50: oklch(0.969 0.015 12.422);
-  --color-rose-100: oklch(0.941 0.03 12.58);
-  --color-rose-200: oklch(0.892 0.058 10.001);
-  --color-rose-300: oklch(0.81 0.117 11.638);
-  --color-rose-400: oklch(0.712 0.194 13.428);
-  --color-rose-500: oklch(0.645 0.246 16.439);
-  --color-rose-600: oklch(0.586 0.253 17.585);
-  --color-rose-700: oklch(0.514 0.222 16.935);
-  --color-rose-800: oklch(0.455 0.188 13.697);
-  --color-rose-900: oklch(0.41 0.159 10.272);
-  --color-rose-950: oklch(0.271 0.105 12.094);
-
-  --color-slate-50: oklch(0.984 0.003 247.858);
-  --color-slate-100: oklch(0.968 0.007 247.896);
-  --color-slate-200: oklch(0.929 0.013 255.508);
-  --color-slate-300: oklch(0.869 0.022 252.894);
-  --color-slate-400: oklch(0.704 0.04 256.788);
-  --color-slate-500: oklch(0.554 0.046 257.417);
-  --color-slate-600: oklch(0.446 0.043 257.281);
-  --color-slate-700: oklch(0.372 0.044 257.287);
-  --color-slate-800: oklch(0.279 0.041 260.031);
-  --color-slate-900: oklch(0.208 0.042 265.755);
-  --color-slate-950: oklch(0.129 0.042 264.695);
-
-  --color-gray-50: oklch(0.985 0.002 247.839);
-  --color-gray-100: oklch(0.967 0.003 264.542);
-  --color-gray-200: oklch(0.928 0.006 264.531);
-  --color-gray-300: oklch(0.872 0.01 258.338);
-  --color-gray-400: oklch(0.707 0.022 261.325);
-  --color-gray-500: oklch(0.551 0.027 264.364);
-  --color-gray-600: oklch(0.446 0.03 256.802);
-  --color-gray-700: oklch(0.373 0.034 259.733);
-  --color-gray-800: oklch(0.278 0.033 256.848);
-  --color-gray-900: oklch(0.21 0.034 264.665);
-  --color-gray-950: oklch(0.13 0.028 261.692);
-
-  --color-zinc-50: oklch(0.985 0 0);
-  --color-zinc-100: oklch(0.967 0.001 286.375);
-  --color-zinc-200: oklch(0.92 0.004 286.32);
-  --color-zinc-300: oklch(0.871 0.006 286.286);
-  --color-zinc-400: oklch(0.705 0.015 286.067);
-  --color-zinc-500: oklch(0.552 0.016 285.938);
-  --color-zinc-600: oklch(0.442 0.017 285.786);
-  --color-zinc-700: oklch(0.37 0.013 285.805);
-  --color-zinc-800: oklch(0.274 0.006 286.033);
-  --color-zinc-900: oklch(0.21 0.006 285.885);
-  --color-zinc-950: oklch(0.141 0.005 285.823);
-
-  --color-neutral-50: oklch(0.985 0 0);
-  --color-neutral-100: oklch(0.97 0 0);
-  --color-neutral-200: oklch(0.922 0 0);
-  --color-neutral-300: oklch(0.87 0 0);
-  --color-neutral-400: oklch(0.708 0 0);
-  --color-neutral-500: oklch(0.556 0 0);
-  --color-neutral-600: oklch(0.439 0 0);
-  --color-neutral-700: oklch(0.371 0 0);
-  --color-neutral-800: oklch(0.269 0 0);
-  --color-neutral-900: oklch(0.205 0 0);
-  --color-neutral-950: oklch(0.145 0 0);
-
-  --color-stone-50: oklch(0.985 0.001 106.423);
-  --color-stone-100: oklch(0.97 0.001 106.424);
-  --color-stone-200: oklch(0.923 0.003 48.717);
-  --color-stone-300: oklch(0.869 0.005 56.366);
-  --color-stone-400: oklch(0.709 0.01 56.259);
-  --color-stone-500: oklch(0.553 0.013 58.071);
-  --color-stone-600: oklch(0.444 0.011 73.639);
-  --color-stone-700: oklch(0.374 0.01 67.558);
-  --color-stone-800: oklch(0.268 0.007 34.298);
-  --color-stone-900: oklch(0.216 0.006 56.043);
-  --color-stone-950: oklch(0.147 0.004 49.25);
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+
+  --color-slate-50: oklch(98.4% 0.003 247.858);
+  --color-slate-100: oklch(96.8% 0.007 247.896);
+  --color-slate-200: oklch(92.9% 0.013 255.508);
+  --color-slate-300: oklch(86.9% 0.022 252.894);
+  --color-slate-400: oklch(70.4% 0.04 256.788);
+  --color-slate-500: oklch(55.4% 0.046 257.417);
+  --color-slate-600: oklch(44.6% 0.043 257.281);
+  --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-800: oklch(27.9% 0.041 260.031);
+  --color-slate-900: oklch(20.8% 0.042 265.755);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
+
+  --color-gray-50: oklch(98.5% 0.002 247.839);
+  --color-gray-100: oklch(96.7% 0.003 264.542);
+  --color-gray-200: oklch(92.8% 0.006 264.531);
+  --color-gray-300: oklch(87.2% 0.01 258.338);
+  --color-gray-400: oklch(70.7% 0.022 261.325);
+  --color-gray-500: oklch(55.1% 0.027 264.364);
+  --color-gray-600: oklch(44.6% 0.03 256.802);
+  --color-gray-700: oklch(37.3% 0.034 259.733);
+  --color-gray-800: oklch(27.8% 0.033 256.848);
+  --color-gray-900: oklch(21% 0.034 264.665);
+  --color-gray-950: oklch(13% 0.028 261.692);
+
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
 
   --color-black: #000;
   --color-white: #fff;
diff --git a/playgrounds/nextjs/app/layout.tsx b/playgrounds/nextjs/app/layout.tsx
index cf832e94e696..41ee7f492a32 100644
--- a/playgrounds/nextjs/app/layout.tsx
+++ b/playgrounds/nextjs/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="[&_h1]:font-thin">
+    <html lang="en">
       <head>{/* <script src="https://cdn.tailwindcss.com"></script> */}</head>
       <body className={inter.className}>{children}</body>
     </html>
diff --git a/playgrounds/nextjs/app/page.module.css b/playgrounds/nextjs/app/page.module.css
index e0c1bf51eee8..4c5bdd2537ec 100644
--- a/playgrounds/nextjs/app/page.module.css
+++ b/playgrounds/nextjs/app/page.module.css
@@ -1,228 +1,5 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition:
-    background 200ms,
-    border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-  text-wrap: balance;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
+@reference "./globals.css";
 
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
+.heading {
+  @apply skew-7;
 }
diff --git a/playgrounds/nextjs/app/page.tsx b/playgrounds/nextjs/app/page.tsx
index 3c5390442f94..70ea89898734 100644
--- a/playgrounds/nextjs/app/page.tsx
+++ b/playgrounds/nextjs/app/page.tsx
@@ -1,3 +1,5 @@
+import styles from './page.module.css'
+
 export default function Home() {
-  return <h1 className="text-3xl font-bold underline border ring">Hello world!</h1>
+  return <h1 className={styles.heading}>Hello world!</h1>
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6da8dc5f08cd..42799f69f56b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,9 +185,6 @@ importers:
       enhanced-resolve:
         specifier: ^5.18.1
         version: 5.18.1
-      lightningcss:
-        specifier: 'catalog:'
-        version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
       mri:
         specifier: ^1.2.0
         version: 1.2.0
@@ -206,6 +203,9 @@ importers:
       jiti:
         specifier: ^2.4.2
         version: 2.4.2
+      lightningcss:
+        specifier: 'catalog:'
+        version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
       tailwindcss:
         specifier: workspace:*
         version: link:../tailwindcss
@@ -221,9 +221,6 @@ importers:
       '@tailwindcss/oxide':
         specifier: workspace:*
         version: link:../../crates/node
-      lightningcss:
-        specifier: 'catalog:'
-        version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
       postcss:
         specifier: ^8.4.41
         version: 8.4.41
@@ -389,9 +386,6 @@ importers:
       '@tailwindcss/oxide':
         specifier: workspace:*
         version: link:../../crates/node
-      lightningcss:
-        specifier: 'catalog:'
-        version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
       tailwindcss:
         specifier: workspace:*
         version: link:../tailwindcss
@@ -1535,7 +1529,6 @@ packages:
   '@parcel/watcher-darwin-arm64@2.5.1':
     resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
     engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
     os: [darwin]
 
   '@parcel/watcher-darwin-x64@2.5.0':
@@ -1547,7 +1540,6 @@ packages:
   '@parcel/watcher-darwin-x64@2.5.1':
     resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
     engines: {node: '>= 10.0.0'}
-    cpu: [x64]
     os: [darwin]
 
   '@parcel/watcher-freebsd-x64@2.5.0':
@@ -1595,7 +1587,6 @@ packages:
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
     os: [linux]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
@@ -1607,7 +1598,6 @@ packages:
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
-    cpu: [arm64]
     os: [linux]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
@@ -1619,7 +1609,6 @@ packages:
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
-    cpu: [x64]
     os: [linux]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
@@ -1631,7 +1620,6 @@ packages:
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
-    cpu: [x64]
     os: [linux]
 
   '@parcel/watcher-wasm@2.5.0':
@@ -1673,7 +1661,6 @@ packages:
   '@parcel/watcher-win32-x64@2.5.1':
     resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
     engines: {node: '>= 10.0.0'}
-    cpu: [x64]
     os: [win32]
 
   '@parcel/watcher@2.5.0':
@@ -2083,7 +2070,6 @@ packages:
 
   bun@1.2.4:
     resolution: {integrity: sha512-ZY0EZ/UKqheaLeAtMsfJA6jWoWvV9HAtfFaOJSmS3LrNpFKs1Sg5fZLSsczN1h3a+Dtheo4O3p3ZYWrf40kRGw==}
-    cpu: [arm64, x64, aarch64]
     os: [darwin, linux, win32]
     hasBin: true
 
@@ -2911,13 +2897,11 @@ packages:
   lightningcss-darwin-arm64@1.29.2:
     resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
     engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
     os: [darwin]
 
   lightningcss-darwin-x64@1.29.2:
     resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
     engines: {node: '>= 12.0.0'}
-    cpu: [x64]
     os: [darwin]
 
   lightningcss-freebsd-x64@1.29.2:
@@ -2935,25 +2919,21 @@ packages:
   lightningcss-linux-arm64-gnu@1.29.2:
     resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
     engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
     os: [linux]
 
   lightningcss-linux-arm64-musl@1.29.2:
     resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
     engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
     os: [linux]
 
   lightningcss-linux-x64-gnu@1.29.2:
     resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
     engines: {node: '>= 12.0.0'}
-    cpu: [x64]
     os: [linux]
 
   lightningcss-linux-x64-musl@1.29.2:
     resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
     engines: {node: '>= 12.0.0'}
-    cpu: [x64]
     os: [linux]
 
   lightningcss-win32-arm64-msvc@1.29.2:
@@ -2965,7 +2945,6 @@ packages:
   lightningcss-win32-x64-msvc@1.29.2:
     resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
     engines: {node: '>= 12.0.0'}
-    cpu: [x64]
     os: [win32]
 
   lightningcss@1.29.2: