From 9bbe2e3d08ac7d38c2f6e64cf34eb0fc931ba07f Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Mon, 10 Feb 2025 13:26:13 +0100
Subject: [PATCH] Revert: Only expose used CSS variables (#16403)

This reverts #16211

We found some unexpected interactions with using `@apply` and CSS
variables in multi-root setups like CSS modules or Vue inline `<style>`
blocks that were broken due to that change. We plan to re-enable this
soon and include a proper fix for those scenarios.

## Test plan

- Updated snapshots
- Tested using the CLI in a new project:
<img width="1523" alt="Screenshot 2025-02-10 at 13 08 42"
src="https://github.com/user-attachments/assets/defe0858-adb3-4d61-9d2c-87166558fd68"
/>

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
---
 .github/workflows/prepare-release.yml         |   2 +
 .github/workflows/release.yml                 |   2 +
 CHANGELOG.md                                  |   4 +-
 integrations/cli/index.test.ts                |   4 +-
 .../src/__snapshots__/index.test.ts.snap      | 383 +++++++++++++++++
 .../@tailwindcss-postcss/src/index.test.ts    |  12 +-
 .../src/__snapshots__/index.test.ts.snap      | 391 ++++++++++++++++++
 .../src/__snapshots__/utilities.test.ts.snap  |  27 ++
 packages/tailwindcss/src/ast.ts               |  71 ++--
 .../tailwindcss/src/compat/config.test.ts     | 108 ++++-
 .../src/compat/container-config.test.ts       |  76 +++-
 .../tailwindcss/src/compat/plugin-api.test.ts |  18 +
 .../src/compat/screens-config.test.ts         |  27 +-
 .../tailwindcss/src/css-functions.test.ts     | 208 ++++++++--
 packages/tailwindcss/src/feature-flags.ts     |   1 +
 packages/tailwindcss/src/index.test.ts        |  77 +++-
 packages/tailwindcss/src/prefix.test.ts       |  23 +-
 packages/tailwindcss/src/utilities.test.ts    |  73 +++-
 packages/tailwindcss/src/variants.test.ts     |  80 +++-
 packages/tailwindcss/tsup.config.ts           |   6 +
 turbo.json                                    |   3 +-
 21 files changed, 1473 insertions(+), 123 deletions(-)
 create mode 100644 packages/tailwindcss/src/feature-flags.ts

diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml
index 1bfd09f41..0c8e3f389 100644
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -264,6 +264,8 @@ jobs:
 
       - name: Build Tailwind CSS
         run: pnpm run build
+        env:
+          FEATURES_ENV: stable
 
       - name: Run pre-publish optimizations scripts
         run: node ./scripts/pre-publish-optimizations.mjs
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 66ae87e7f..d26670e11 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -256,6 +256,8 @@ jobs:
 
       - name: Build Tailwind CSS
         run: pnpm run build
+        env:
+          FEATURES_ENV: stable
 
       - name: Run pre-publish optimizations scripts
         run: node ./scripts/pre-publish-optimizations.mjs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d10d46069..b4ef4a020 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-Nothing yet!
+### Fixed
+
+- Revert change to no longer include theme variables that aren't used in compiled CSS
 
 ## [4.0.5] - 2025-02-08
 
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index 2eee0413d..6f48e9f9c 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -1289,7 +1289,9 @@ test(
     expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
       "
       --- ./dist/out.css ---
-      <EMPTY>
+      :root, :host {
+        --color-blue-500: blue;
+      }
       "
     `)
 
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index dbf73d755..d401ace41 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -4,11 +4,363 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 "@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-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --color-red-50: oklch(.971 .013 17.38);
+    --color-red-100: oklch(.936 .032 17.717);
+    --color-red-200: oklch(.885 .062 18.334);
+    --color-red-300: oklch(.808 .114 19.571);
+    --color-red-400: oklch(.704 .191 22.216);
+    --color-red-500: oklch(.637 .237 25.331);
+    --color-red-600: oklch(.577 .245 27.325);
+    --color-red-700: oklch(.505 .213 27.518);
+    --color-red-800: oklch(.444 .177 26.899);
+    --color-red-900: oklch(.396 .141 25.723);
+    --color-red-950: oklch(.258 .092 26.042);
+    --color-orange-50: oklch(.98 .016 73.684);
+    --color-orange-100: oklch(.954 .038 75.164);
+    --color-orange-200: oklch(.901 .076 70.697);
+    --color-orange-300: oklch(.837 .128 66.29);
+    --color-orange-400: oklch(.75 .183 55.934);
+    --color-orange-500: oklch(.705 .213 47.604);
+    --color-orange-600: oklch(.646 .222 41.116);
+    --color-orange-700: oklch(.553 .195 38.402);
+    --color-orange-800: oklch(.47 .157 37.304);
+    --color-orange-900: oklch(.408 .123 38.172);
+    --color-orange-950: oklch(.266 .079 36.259);
+    --color-amber-50: oklch(.987 .022 95.277);
+    --color-amber-100: oklch(.962 .059 95.617);
+    --color-amber-200: oklch(.924 .12 95.746);
+    --color-amber-300: oklch(.879 .169 91.605);
+    --color-amber-400: oklch(.828 .189 84.429);
+    --color-amber-500: oklch(.769 .188 70.08);
+    --color-amber-600: oklch(.666 .179 58.318);
+    --color-amber-700: oklch(.555 .163 48.998);
+    --color-amber-800: oklch(.473 .137 46.201);
+    --color-amber-900: oklch(.414 .112 45.904);
+    --color-amber-950: oklch(.279 .077 45.635);
+    --color-yellow-50: oklch(.987 .026 102.212);
+    --color-yellow-100: oklch(.973 .071 103.193);
+    --color-yellow-200: oklch(.945 .129 101.54);
+    --color-yellow-300: oklch(.905 .182 98.111);
+    --color-yellow-400: oklch(.852 .199 91.936);
+    --color-yellow-500: oklch(.795 .184 86.047);
+    --color-yellow-600: oklch(.681 .162 75.834);
+    --color-yellow-700: oklch(.554 .135 66.442);
+    --color-yellow-800: oklch(.476 .114 61.907);
+    --color-yellow-900: oklch(.421 .095 57.708);
+    --color-yellow-950: oklch(.286 .066 53.813);
+    --color-lime-50: oklch(.986 .031 120.757);
+    --color-lime-100: oklch(.967 .067 122.328);
+    --color-lime-200: oklch(.938 .127 124.321);
+    --color-lime-300: oklch(.897 .196 126.665);
+    --color-lime-400: oklch(.841 .238 128.85);
+    --color-lime-500: oklch(.768 .233 130.85);
+    --color-lime-600: oklch(.648 .2 131.684);
+    --color-lime-700: oklch(.532 .157 131.589);
+    --color-lime-800: oklch(.453 .124 130.933);
+    --color-lime-900: oklch(.405 .101 131.063);
+    --color-lime-950: oklch(.274 .072 132.109);
+    --color-green-50: oklch(.982 .018 155.826);
+    --color-green-100: oklch(.962 .044 156.743);
+    --color-green-200: oklch(.925 .084 155.995);
+    --color-green-300: oklch(.871 .15 154.449);
+    --color-green-400: oklch(.792 .209 151.711);
+    --color-green-500: oklch(.723 .219 149.579);
+    --color-green-600: oklch(.627 .194 149.214);
+    --color-green-700: oklch(.527 .154 150.069);
+    --color-green-800: oklch(.448 .119 151.328);
+    --color-green-900: oklch(.393 .095 152.535);
+    --color-green-950: oklch(.266 .065 152.934);
+    --color-emerald-50: oklch(.979 .021 166.113);
+    --color-emerald-100: oklch(.95 .052 163.051);
+    --color-emerald-200: oklch(.905 .093 164.15);
+    --color-emerald-300: oklch(.845 .143 164.978);
+    --color-emerald-400: oklch(.765 .177 163.223);
+    --color-emerald-500: oklch(.696 .17 162.48);
+    --color-emerald-600: oklch(.596 .145 163.225);
+    --color-emerald-700: oklch(.508 .118 165.612);
+    --color-emerald-800: oklch(.432 .095 166.913);
+    --color-emerald-900: oklch(.378 .077 168.94);
+    --color-emerald-950: oklch(.262 .051 172.552);
+    --color-teal-50: oklch(.984 .014 180.72);
+    --color-teal-100: oklch(.953 .051 180.801);
+    --color-teal-200: oklch(.91 .096 180.426);
+    --color-teal-300: oklch(.855 .138 181.071);
+    --color-teal-400: oklch(.777 .152 181.912);
+    --color-teal-500: oklch(.704 .14 182.503);
+    --color-teal-600: oklch(.6 .118 184.704);
+    --color-teal-700: oklch(.511 .096 186.391);
+    --color-teal-800: oklch(.437 .078 188.216);
+    --color-teal-900: oklch(.386 .063 188.416);
+    --color-teal-950: oklch(.277 .046 192.524);
+    --color-cyan-50: oklch(.984 .019 200.873);
+    --color-cyan-100: oklch(.956 .045 203.388);
+    --color-cyan-200: oklch(.917 .08 205.041);
+    --color-cyan-300: oklch(.865 .127 207.078);
+    --color-cyan-400: oklch(.789 .154 211.53);
+    --color-cyan-500: oklch(.715 .143 215.221);
+    --color-cyan-600: oklch(.609 .126 221.723);
+    --color-cyan-700: oklch(.52 .105 223.128);
+    --color-cyan-800: oklch(.45 .085 224.283);
+    --color-cyan-900: oklch(.398 .07 227.392);
+    --color-cyan-950: oklch(.302 .056 229.695);
+    --color-sky-50: oklch(.977 .013 236.62);
+    --color-sky-100: oklch(.951 .026 236.824);
+    --color-sky-200: oklch(.901 .058 230.902);
+    --color-sky-300: oklch(.828 .111 230.318);
+    --color-sky-400: oklch(.746 .16 232.661);
+    --color-sky-500: oklch(.685 .169 237.323);
+    --color-sky-600: oklch(.588 .158 241.966);
+    --color-sky-700: oklch(.5 .134 242.749);
+    --color-sky-800: oklch(.443 .11 240.79);
+    --color-sky-900: oklch(.391 .09 240.876);
+    --color-sky-950: oklch(.293 .066 243.157);
+    --color-blue-50: oklch(.97 .014 254.604);
+    --color-blue-100: oklch(.932 .032 255.585);
+    --color-blue-200: oklch(.882 .059 254.128);
+    --color-blue-300: oklch(.809 .105 251.813);
+    --color-blue-400: oklch(.707 .165 254.624);
+    --color-blue-500: oklch(.623 .214 259.815);
+    --color-blue-600: oklch(.546 .245 262.881);
+    --color-blue-700: oklch(.488 .243 264.376);
+    --color-blue-800: oklch(.424 .199 265.638);
+    --color-blue-900: oklch(.379 .146 265.522);
+    --color-blue-950: oklch(.282 .091 267.935);
+    --color-indigo-50: oklch(.962 .018 272.314);
+    --color-indigo-100: oklch(.93 .034 272.788);
+    --color-indigo-200: oklch(.87 .065 274.039);
+    --color-indigo-300: oklch(.785 .115 274.713);
+    --color-indigo-400: oklch(.673 .182 276.935);
+    --color-indigo-500: oklch(.585 .233 277.117);
+    --color-indigo-600: oklch(.511 .262 276.966);
+    --color-indigo-700: oklch(.457 .24 277.023);
+    --color-indigo-800: oklch(.398 .195 277.366);
+    --color-indigo-900: oklch(.359 .144 278.697);
+    --color-indigo-950: oklch(.257 .09 281.288);
+    --color-violet-50: oklch(.969 .016 293.756);
+    --color-violet-100: oklch(.943 .029 294.588);
+    --color-violet-200: oklch(.894 .057 293.283);
+    --color-violet-300: oklch(.811 .111 293.571);
+    --color-violet-400: oklch(.702 .183 293.541);
+    --color-violet-500: oklch(.606 .25 292.717);
+    --color-violet-600: oklch(.541 .281 293.009);
+    --color-violet-700: oklch(.491 .27 292.581);
+    --color-violet-800: oklch(.432 .232 292.759);
+    --color-violet-900: oklch(.38 .189 293.745);
+    --color-violet-950: oklch(.283 .141 291.089);
+    --color-purple-50: oklch(.977 .014 308.299);
+    --color-purple-100: oklch(.946 .033 307.174);
+    --color-purple-200: oklch(.902 .063 306.703);
+    --color-purple-300: oklch(.827 .119 306.383);
+    --color-purple-400: oklch(.714 .203 305.504);
+    --color-purple-500: oklch(.627 .265 303.9);
+    --color-purple-600: oklch(.558 .288 302.321);
+    --color-purple-700: oklch(.496 .265 301.924);
+    --color-purple-800: oklch(.438 .218 303.724);
+    --color-purple-900: oklch(.381 .176 304.987);
+    --color-purple-950: oklch(.291 .149 302.717);
+    --color-fuchsia-50: oklch(.977 .017 320.058);
+    --color-fuchsia-100: oklch(.952 .037 318.852);
+    --color-fuchsia-200: oklch(.903 .076 319.62);
+    --color-fuchsia-300: oklch(.833 .145 321.434);
+    --color-fuchsia-400: oklch(.74 .238 322.16);
+    --color-fuchsia-500: oklch(.667 .295 322.15);
+    --color-fuchsia-600: oklch(.591 .293 322.896);
+    --color-fuchsia-700: oklch(.518 .253 323.949);
+    --color-fuchsia-800: oklch(.452 .211 324.591);
+    --color-fuchsia-900: oklch(.401 .17 325.612);
+    --color-fuchsia-950: oklch(.293 .136 325.661);
+    --color-pink-50: oklch(.971 .014 343.198);
+    --color-pink-100: oklch(.948 .028 342.258);
+    --color-pink-200: oklch(.899 .061 343.231);
+    --color-pink-300: oklch(.823 .12 346.018);
+    --color-pink-400: oklch(.718 .202 349.761);
+    --color-pink-500: oklch(.656 .241 354.308);
+    --color-pink-600: oklch(.592 .249 .584);
+    --color-pink-700: oklch(.525 .223 3.958);
+    --color-pink-800: oklch(.459 .187 3.815);
+    --color-pink-900: oklch(.408 .153 2.432);
+    --color-pink-950: oklch(.284 .109 3.907);
+    --color-rose-50: oklch(.969 .015 12.422);
+    --color-rose-100: oklch(.941 .03 12.58);
+    --color-rose-200: oklch(.892 .058 10.001);
+    --color-rose-300: oklch(.81 .117 11.638);
+    --color-rose-400: oklch(.712 .194 13.428);
+    --color-rose-500: oklch(.645 .246 16.439);
+    --color-rose-600: oklch(.586 .253 17.585);
+    --color-rose-700: oklch(.514 .222 16.935);
+    --color-rose-800: oklch(.455 .188 13.697);
+    --color-rose-900: oklch(.41 .159 10.272);
+    --color-rose-950: oklch(.271 .105 12.094);
+    --color-slate-50: oklch(.984 .003 247.858);
+    --color-slate-100: oklch(.968 .007 247.896);
+    --color-slate-200: oklch(.929 .013 255.508);
+    --color-slate-300: oklch(.869 .022 252.894);
+    --color-slate-400: oklch(.704 .04 256.788);
+    --color-slate-500: oklch(.554 .046 257.417);
+    --color-slate-600: oklch(.446 .043 257.281);
+    --color-slate-700: oklch(.372 .044 257.287);
+    --color-slate-800: oklch(.279 .041 260.031);
+    --color-slate-900: oklch(.208 .042 265.755);
+    --color-slate-950: oklch(.129 .042 264.695);
+    --color-gray-50: oklch(.985 .002 247.839);
+    --color-gray-100: oklch(.967 .003 264.542);
+    --color-gray-200: oklch(.928 .006 264.531);
+    --color-gray-300: oklch(.872 .01 258.338);
+    --color-gray-400: oklch(.707 .022 261.325);
+    --color-gray-500: oklch(.551 .027 264.364);
+    --color-gray-600: oklch(.446 .03 256.802);
+    --color-gray-700: oklch(.373 .034 259.733);
+    --color-gray-800: oklch(.278 .033 256.848);
+    --color-gray-900: oklch(.21 .034 264.665);
+    --color-gray-950: oklch(.13 .028 261.692);
+    --color-zinc-50: oklch(.985 0 0);
+    --color-zinc-100: oklch(.967 .001 286.375);
+    --color-zinc-200: oklch(.92 .004 286.32);
+    --color-zinc-300: oklch(.871 .006 286.286);
+    --color-zinc-400: oklch(.705 .015 286.067);
+    --color-zinc-500: oklch(.552 .016 285.938);
+    --color-zinc-600: oklch(.442 .017 285.786);
+    --color-zinc-700: oklch(.37 .013 285.805);
+    --color-zinc-800: oklch(.274 .006 286.033);
+    --color-zinc-900: oklch(.21 .006 285.885);
+    --color-zinc-950: oklch(.141 .005 285.823);
+    --color-neutral-50: oklch(.985 0 0);
+    --color-neutral-100: oklch(.97 0 0);
+    --color-neutral-200: oklch(.922 0 0);
+    --color-neutral-300: oklch(.87 0 0);
+    --color-neutral-400: oklch(.708 0 0);
+    --color-neutral-500: oklch(.556 0 0);
+    --color-neutral-600: oklch(.439 0 0);
+    --color-neutral-700: oklch(.371 0 0);
+    --color-neutral-800: oklch(.269 0 0);
+    --color-neutral-900: oklch(.205 0 0);
+    --color-neutral-950: oklch(.145 0 0);
+    --color-stone-50: oklch(.985 .001 106.423);
+    --color-stone-100: oklch(.97 .001 106.424);
+    --color-stone-200: oklch(.923 .003 48.717);
+    --color-stone-300: oklch(.869 .005 56.366);
+    --color-stone-400: oklch(.709 .01 56.259);
+    --color-stone-500: oklch(.553 .013 58.071);
+    --color-stone-600: oklch(.444 .011 73.639);
+    --color-stone-700: oklch(.374 .01 67.558);
+    --color-stone-800: oklch(.268 .007 34.298);
+    --color-stone-900: oklch(.216 .006 56.043);
+    --color-stone-950: oklch(.147 .004 49.25);
     --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+    --tracking-tighter: -.05em;
+    --tracking-tight: -.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: .025em;
+    --tracking-wider: .05em;
+    --tracking-widest: .1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    --radius-xs: .125rem;
+    --radius-sm: .25rem;
+    --radius-md: .375rem;
+    --radius-lg: .5rem;
+    --radius-xl: .75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
+    --shadow-2xs: 0 1px #0000000d;
+    --shadow-xs: 0 1px 2px 0 #0000000d;
+    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+    --shadow-2xl: 0 25px 50px -12px #00000040;
+    --inset-shadow-2xs: inset 0 1px #0000000d;
+    --inset-shadow-xs: inset 0 1px 1px #0000000d;
+    --inset-shadow-sm: inset 0 2px 4px #0000000d;
+    --drop-shadow-xs: 0 1px 1px #0000000d;
+    --drop-shadow-sm: 0 1px 2px #00000026;
+    --drop-shadow-md: 0 3px 3px #0000001f;
+    --drop-shadow-lg: 0 4px 4px #00000026;
+    --drop-shadow-xl: 0 9px 7px #0000001a;
+    --drop-shadow-2xl: 0 25px 25px #00000026;
+    --ease-in: cubic-bezier(.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+    --blur-xs: 4px;
+    --blur-sm: 8px;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --blur-xl: 24px;
+    --blur-2xl: 40px;
+    --blur-3xl: 64px;
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
+    --aspect-video: 16 / 9;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
     --default-font-feature-settings: var(--font-sans--font-feature-settings);
     --default-font-variation-settings: var(--font-sans--font-variation-settings);
@@ -278,6 +630,37 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}
+
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
index 3a7e1b8b8..97eee3c1c 100644
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -330,7 +330,11 @@ test('runs `Once` plugins in the right order', async () => {
   )
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".custom-css {
+    ":root, :host {
+      --color-red-500: red;
+    }
+
+    .custom-css {
       color: red;
     }"
   `)
@@ -343,7 +347,11 @@ test('runs `Once` plugins in the right order', async () => {
     }"
   `)
   expect(after).toMatchInlineSnapshot(`
-    ".custom-css {
+    ":root, :host {
+      --color-red-500: red;
+    }
+
+    .custom-css {
       color: red;
     }"
   `)
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 0b32f5ed7..9ed291c39 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -3,9 +3,369 @@
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
 ":root, :host {
   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --color-red-50: oklch(.971 .013 17.38);
+  --color-red-100: oklch(.936 .032 17.717);
+  --color-red-200: oklch(.885 .062 18.334);
+  --color-red-300: oklch(.808 .114 19.571);
+  --color-red-400: oklch(.704 .191 22.216);
   --color-red-500: oklch(.637 .237 25.331);
+  --color-red-600: oklch(.577 .245 27.325);
+  --color-red-700: oklch(.505 .213 27.518);
+  --color-red-800: oklch(.444 .177 26.899);
+  --color-red-900: oklch(.396 .141 25.723);
+  --color-red-950: oklch(.258 .092 26.042);
+  --color-orange-50: oklch(.98 .016 73.684);
+  --color-orange-100: oklch(.954 .038 75.164);
+  --color-orange-200: oklch(.901 .076 70.697);
+  --color-orange-300: oklch(.837 .128 66.29);
+  --color-orange-400: oklch(.75 .183 55.934);
+  --color-orange-500: oklch(.705 .213 47.604);
+  --color-orange-600: oklch(.646 .222 41.116);
+  --color-orange-700: oklch(.553 .195 38.402);
+  --color-orange-800: oklch(.47 .157 37.304);
+  --color-orange-900: oklch(.408 .123 38.172);
+  --color-orange-950: oklch(.266 .079 36.259);
+  --color-amber-50: oklch(.987 .022 95.277);
+  --color-amber-100: oklch(.962 .059 95.617);
+  --color-amber-200: oklch(.924 .12 95.746);
+  --color-amber-300: oklch(.879 .169 91.605);
+  --color-amber-400: oklch(.828 .189 84.429);
+  --color-amber-500: oklch(.769 .188 70.08);
+  --color-amber-600: oklch(.666 .179 58.318);
+  --color-amber-700: oklch(.555 .163 48.998);
+  --color-amber-800: oklch(.473 .137 46.201);
+  --color-amber-900: oklch(.414 .112 45.904);
+  --color-amber-950: oklch(.279 .077 45.635);
+  --color-yellow-50: oklch(.987 .026 102.212);
+  --color-yellow-100: oklch(.973 .071 103.193);
+  --color-yellow-200: oklch(.945 .129 101.54);
+  --color-yellow-300: oklch(.905 .182 98.111);
+  --color-yellow-400: oklch(.852 .199 91.936);
+  --color-yellow-500: oklch(.795 .184 86.047);
+  --color-yellow-600: oklch(.681 .162 75.834);
+  --color-yellow-700: oklch(.554 .135 66.442);
+  --color-yellow-800: oklch(.476 .114 61.907);
+  --color-yellow-900: oklch(.421 .095 57.708);
+  --color-yellow-950: oklch(.286 .066 53.813);
+  --color-lime-50: oklch(.986 .031 120.757);
+  --color-lime-100: oklch(.967 .067 122.328);
+  --color-lime-200: oklch(.938 .127 124.321);
+  --color-lime-300: oklch(.897 .196 126.665);
+  --color-lime-400: oklch(.841 .238 128.85);
+  --color-lime-500: oklch(.768 .233 130.85);
+  --color-lime-600: oklch(.648 .2 131.684);
+  --color-lime-700: oklch(.532 .157 131.589);
+  --color-lime-800: oklch(.453 .124 130.933);
+  --color-lime-900: oklch(.405 .101 131.063);
+  --color-lime-950: oklch(.274 .072 132.109);
+  --color-green-50: oklch(.982 .018 155.826);
+  --color-green-100: oklch(.962 .044 156.743);
+  --color-green-200: oklch(.925 .084 155.995);
+  --color-green-300: oklch(.871 .15 154.449);
+  --color-green-400: oklch(.792 .209 151.711);
+  --color-green-500: oklch(.723 .219 149.579);
+  --color-green-600: oklch(.627 .194 149.214);
+  --color-green-700: oklch(.527 .154 150.069);
+  --color-green-800: oklch(.448 .119 151.328);
+  --color-green-900: oklch(.393 .095 152.535);
+  --color-green-950: oklch(.266 .065 152.934);
+  --color-emerald-50: oklch(.979 .021 166.113);
+  --color-emerald-100: oklch(.95 .052 163.051);
+  --color-emerald-200: oklch(.905 .093 164.15);
+  --color-emerald-300: oklch(.845 .143 164.978);
+  --color-emerald-400: oklch(.765 .177 163.223);
+  --color-emerald-500: oklch(.696 .17 162.48);
+  --color-emerald-600: oklch(.596 .145 163.225);
+  --color-emerald-700: oklch(.508 .118 165.612);
+  --color-emerald-800: oklch(.432 .095 166.913);
+  --color-emerald-900: oklch(.378 .077 168.94);
+  --color-emerald-950: oklch(.262 .051 172.552);
+  --color-teal-50: oklch(.984 .014 180.72);
+  --color-teal-100: oklch(.953 .051 180.801);
+  --color-teal-200: oklch(.91 .096 180.426);
+  --color-teal-300: oklch(.855 .138 181.071);
+  --color-teal-400: oklch(.777 .152 181.912);
+  --color-teal-500: oklch(.704 .14 182.503);
+  --color-teal-600: oklch(.6 .118 184.704);
+  --color-teal-700: oklch(.511 .096 186.391);
+  --color-teal-800: oklch(.437 .078 188.216);
+  --color-teal-900: oklch(.386 .063 188.416);
+  --color-teal-950: oklch(.277 .046 192.524);
+  --color-cyan-50: oklch(.984 .019 200.873);
+  --color-cyan-100: oklch(.956 .045 203.388);
+  --color-cyan-200: oklch(.917 .08 205.041);
+  --color-cyan-300: oklch(.865 .127 207.078);
+  --color-cyan-400: oklch(.789 .154 211.53);
+  --color-cyan-500: oklch(.715 .143 215.221);
+  --color-cyan-600: oklch(.609 .126 221.723);
+  --color-cyan-700: oklch(.52 .105 223.128);
+  --color-cyan-800: oklch(.45 .085 224.283);
+  --color-cyan-900: oklch(.398 .07 227.392);
+  --color-cyan-950: oklch(.302 .056 229.695);
+  --color-sky-50: oklch(.977 .013 236.62);
+  --color-sky-100: oklch(.951 .026 236.824);
+  --color-sky-200: oklch(.901 .058 230.902);
+  --color-sky-300: oklch(.828 .111 230.318);
+  --color-sky-400: oklch(.746 .16 232.661);
+  --color-sky-500: oklch(.685 .169 237.323);
+  --color-sky-600: oklch(.588 .158 241.966);
+  --color-sky-700: oklch(.5 .134 242.749);
+  --color-sky-800: oklch(.443 .11 240.79);
+  --color-sky-900: oklch(.391 .09 240.876);
+  --color-sky-950: oklch(.293 .066 243.157);
+  --color-blue-50: oklch(.97 .014 254.604);
+  --color-blue-100: oklch(.932 .032 255.585);
+  --color-blue-200: oklch(.882 .059 254.128);
+  --color-blue-300: oklch(.809 .105 251.813);
+  --color-blue-400: oklch(.707 .165 254.624);
+  --color-blue-500: oklch(.623 .214 259.815);
+  --color-blue-600: oklch(.546 .245 262.881);
+  --color-blue-700: oklch(.488 .243 264.376);
+  --color-blue-800: oklch(.424 .199 265.638);
+  --color-blue-900: oklch(.379 .146 265.522);
+  --color-blue-950: oklch(.282 .091 267.935);
+  --color-indigo-50: oklch(.962 .018 272.314);
+  --color-indigo-100: oklch(.93 .034 272.788);
+  --color-indigo-200: oklch(.87 .065 274.039);
+  --color-indigo-300: oklch(.785 .115 274.713);
+  --color-indigo-400: oklch(.673 .182 276.935);
+  --color-indigo-500: oklch(.585 .233 277.117);
+  --color-indigo-600: oklch(.511 .262 276.966);
+  --color-indigo-700: oklch(.457 .24 277.023);
+  --color-indigo-800: oklch(.398 .195 277.366);
+  --color-indigo-900: oklch(.359 .144 278.697);
+  --color-indigo-950: oklch(.257 .09 281.288);
+  --color-violet-50: oklch(.969 .016 293.756);
+  --color-violet-100: oklch(.943 .029 294.588);
+  --color-violet-200: oklch(.894 .057 293.283);
+  --color-violet-300: oklch(.811 .111 293.571);
+  --color-violet-400: oklch(.702 .183 293.541);
+  --color-violet-500: oklch(.606 .25 292.717);
+  --color-violet-600: oklch(.541 .281 293.009);
+  --color-violet-700: oklch(.491 .27 292.581);
+  --color-violet-800: oklch(.432 .232 292.759);
+  --color-violet-900: oklch(.38 .189 293.745);
+  --color-violet-950: oklch(.283 .141 291.089);
+  --color-purple-50: oklch(.977 .014 308.299);
+  --color-purple-100: oklch(.946 .033 307.174);
+  --color-purple-200: oklch(.902 .063 306.703);
+  --color-purple-300: oklch(.827 .119 306.383);
+  --color-purple-400: oklch(.714 .203 305.504);
+  --color-purple-500: oklch(.627 .265 303.9);
+  --color-purple-600: oklch(.558 .288 302.321);
+  --color-purple-700: oklch(.496 .265 301.924);
+  --color-purple-800: oklch(.438 .218 303.724);
+  --color-purple-900: oklch(.381 .176 304.987);
+  --color-purple-950: oklch(.291 .149 302.717);
+  --color-fuchsia-50: oklch(.977 .017 320.058);
+  --color-fuchsia-100: oklch(.952 .037 318.852);
+  --color-fuchsia-200: oklch(.903 .076 319.62);
+  --color-fuchsia-300: oklch(.833 .145 321.434);
+  --color-fuchsia-400: oklch(.74 .238 322.16);
+  --color-fuchsia-500: oklch(.667 .295 322.15);
+  --color-fuchsia-600: oklch(.591 .293 322.896);
+  --color-fuchsia-700: oklch(.518 .253 323.949);
+  --color-fuchsia-800: oklch(.452 .211 324.591);
+  --color-fuchsia-900: oklch(.401 .17 325.612);
+  --color-fuchsia-950: oklch(.293 .136 325.661);
+  --color-pink-50: oklch(.971 .014 343.198);
+  --color-pink-100: oklch(.948 .028 342.258);
+  --color-pink-200: oklch(.899 .061 343.231);
+  --color-pink-300: oklch(.823 .12 346.018);
+  --color-pink-400: oklch(.718 .202 349.761);
+  --color-pink-500: oklch(.656 .241 354.308);
+  --color-pink-600: oklch(.592 .249 .584);
+  --color-pink-700: oklch(.525 .223 3.958);
+  --color-pink-800: oklch(.459 .187 3.815);
+  --color-pink-900: oklch(.408 .153 2.432);
+  --color-pink-950: oklch(.284 .109 3.907);
+  --color-rose-50: oklch(.969 .015 12.422);
+  --color-rose-100: oklch(.941 .03 12.58);
+  --color-rose-200: oklch(.892 .058 10.001);
+  --color-rose-300: oklch(.81 .117 11.638);
+  --color-rose-400: oklch(.712 .194 13.428);
+  --color-rose-500: oklch(.645 .246 16.439);
+  --color-rose-600: oklch(.586 .253 17.585);
+  --color-rose-700: oklch(.514 .222 16.935);
+  --color-rose-800: oklch(.455 .188 13.697);
+  --color-rose-900: oklch(.41 .159 10.272);
+  --color-rose-950: oklch(.271 .105 12.094);
+  --color-slate-50: oklch(.984 .003 247.858);
+  --color-slate-100: oklch(.968 .007 247.896);
+  --color-slate-200: oklch(.929 .013 255.508);
+  --color-slate-300: oklch(.869 .022 252.894);
+  --color-slate-400: oklch(.704 .04 256.788);
+  --color-slate-500: oklch(.554 .046 257.417);
+  --color-slate-600: oklch(.446 .043 257.281);
+  --color-slate-700: oklch(.372 .044 257.287);
+  --color-slate-800: oklch(.279 .041 260.031);
+  --color-slate-900: oklch(.208 .042 265.755);
+  --color-slate-950: oklch(.129 .042 264.695);
+  --color-gray-50: oklch(.985 .002 247.839);
+  --color-gray-100: oklch(.967 .003 264.542);
+  --color-gray-200: oklch(.928 .006 264.531);
+  --color-gray-300: oklch(.872 .01 258.338);
+  --color-gray-400: oklch(.707 .022 261.325);
+  --color-gray-500: oklch(.551 .027 264.364);
+  --color-gray-600: oklch(.446 .03 256.802);
+  --color-gray-700: oklch(.373 .034 259.733);
+  --color-gray-800: oklch(.278 .033 256.848);
+  --color-gray-900: oklch(.21 .034 264.665);
+  --color-gray-950: oklch(.13 .028 261.692);
+  --color-zinc-50: oklch(.985 0 0);
+  --color-zinc-100: oklch(.967 .001 286.375);
+  --color-zinc-200: oklch(.92 .004 286.32);
+  --color-zinc-300: oklch(.871 .006 286.286);
+  --color-zinc-400: oklch(.705 .015 286.067);
+  --color-zinc-500: oklch(.552 .016 285.938);
+  --color-zinc-600: oklch(.442 .017 285.786);
+  --color-zinc-700: oklch(.37 .013 285.805);
+  --color-zinc-800: oklch(.274 .006 286.033);
+  --color-zinc-900: oklch(.21 .006 285.885);
+  --color-zinc-950: oklch(.141 .005 285.823);
+  --color-neutral-50: oklch(.985 0 0);
+  --color-neutral-100: oklch(.97 0 0);
+  --color-neutral-200: oklch(.922 0 0);
+  --color-neutral-300: oklch(.87 0 0);
+  --color-neutral-400: oklch(.708 0 0);
+  --color-neutral-500: oklch(.556 0 0);
+  --color-neutral-600: oklch(.439 0 0);
+  --color-neutral-700: oklch(.371 0 0);
+  --color-neutral-800: oklch(.269 0 0);
+  --color-neutral-900: oklch(.205 0 0);
+  --color-neutral-950: oklch(.145 0 0);
+  --color-stone-50: oklch(.985 .001 106.423);
+  --color-stone-100: oklch(.97 .001 106.424);
+  --color-stone-200: oklch(.923 .003 48.717);
+  --color-stone-300: oklch(.869 .005 56.366);
+  --color-stone-400: oklch(.709 .01 56.259);
+  --color-stone-500: oklch(.553 .013 58.071);
+  --color-stone-600: oklch(.444 .011 73.639);
+  --color-stone-700: oklch(.374 .01 67.558);
+  --color-stone-800: oklch(.268 .007 34.298);
+  --color-stone-900: oklch(.216 .006 56.043);
+  --color-stone-950: oklch(.147 .004 49.25);
+  --color-black: #000;
+  --color-white: #fff;
   --spacing: .25rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+  --text-xs: .75rem;
+  --text-xs--line-height: calc(1 / .75);
+  --text-sm: .875rem;
+  --text-sm--line-height: calc(1.25 / .875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+  --tracking-tighter: -.05em;
+  --tracking-tight: -.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: .025em;
+  --tracking-wider: .05em;
+  --tracking-widest: .1em;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+  --radius-xs: .125rem;
+  --radius-sm: .25rem;
+  --radius-md: .375rem;
+  --radius-lg: .5rem;
+  --radius-xl: .75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --shadow-2xs: 0 1px #0000000d;
+  --shadow-xs: 0 1px 2px 0 #0000000d;
+  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+  --shadow-2xl: 0 25px 50px -12px #00000040;
+  --inset-shadow-2xs: inset 0 1px #0000000d;
+  --inset-shadow-xs: inset 0 1px 1px #0000000d;
+  --inset-shadow-sm: inset 0 2px 4px #0000000d;
+  --drop-shadow-xs: 0 1px 1px #0000000d;
+  --drop-shadow-sm: 0 1px 2px #00000026;
+  --drop-shadow-md: 0 3px 3px #0000001f;
+  --drop-shadow-lg: 0 4px 4px #00000026;
+  --drop-shadow-xl: 0 9px 7px #0000001a;
+  --drop-shadow-2xl: 0 25px 25px #00000026;
+  --ease-in: cubic-bezier(.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, .2, 1);
+  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
+  --aspect-video: 16 / 9;
+  --default-transition-duration: .15s;
+  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  --default-font-family: var(--font-sans);
+  --default-font-feature-settings: var(--font-sans--font-feature-settings);
+  --default-font-variation-settings: var(--font-sans--font-variation-settings);
+  --default-mono-font-family: var(--font-mono);
+  --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+  --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
 }
 
 .w-4 {
@@ -27,6 +387,37 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 9d35f62cc..0fe26f658 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -2,6 +2,9 @@
 
 exports[`border-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -124,6 +127,9 @@ exports[`border-* 1`] = `
 
 exports[`border-b-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -246,6 +252,9 @@ exports[`border-b-* 1`] = `
 
 exports[`border-e-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -368,6 +377,9 @@ exports[`border-e-* 1`] = `
 
 exports[`border-l-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -490,6 +502,9 @@ exports[`border-l-* 1`] = `
 
 exports[`border-r-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -612,6 +627,9 @@ exports[`border-r-* 1`] = `
 
 exports[`border-s-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -734,6 +752,9 @@ exports[`border-s-* 1`] = `
 
 exports[`border-t-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -856,6 +877,9 @@ exports[`border-t-* 1`] = `
 
 exports[`border-x-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
@@ -978,6 +1002,9 @@ exports[`border-x-* 1`] = `
 
 exports[`border-y-* 1`] = `
 ":root, :host {
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-sm: .125rem;
   --color-red-500: #ef4444;
 }
 
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 559accd02..edf0e4e23 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -1,5 +1,6 @@
 import { parseAtRule } from './css-parser'
 import type { DesignSystem } from './design-system'
+import { enableRemoveUnusedThemeVariables } from './feature-flags'
 import { ThemeOptions } from './theme'
 import { DefaultMap } from './utils/default-map'
 
@@ -402,47 +403,49 @@ export function optimizeAst(ast: AstNode[], designSystem: DesignSystem) {
   }
 
   // Remove unused theme variables
-  next: for (let [parent, declarations] of cssThemeVariables) {
-    for (let declaration of declarations) {
-      let options = designSystem.theme.getOptions(declaration.property)
+  if (enableRemoveUnusedThemeVariables) {
+    next: for (let [parent, declarations] of cssThemeVariables) {
+      for (let declaration of declarations) {
+        let options = designSystem.theme.getOptions(declaration.property)
 
-      if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) {
-        if (declaration.property.startsWith('--animate-')) {
-          let parts = declaration.value!.split(/\s+/)
-          for (let part of parts) usedKeyframeNames.add(part)
-        }
-
-        continue
-      }
-
-      // Remove the declaration (from its parent)
-      let idx = parent.indexOf(declaration)
-      parent.splice(idx, 1)
-
-      // If the parent is now empty, remove it from the AST
-      if (parent.length === 0) {
-        for (let [idx, node] of newAst.entries()) {
-          // Assumption, but right now the `@theme` must be top-level, so we
-          // don't need to traverse the entire AST to find the parent.
-          //
-          // Checking for `rule`, because at this stage the `@theme` is already
-          // converted to a normal style rule `:root, :host`
-          if (node.kind === 'rule' && node.nodes === parent) {
-            newAst.splice(idx, 1)
-            break
+        if (options & (ThemeOptions.STATIC | ThemeOptions.USED)) {
+          if (declaration.property.startsWith('--animate-')) {
+            let parts = declaration.value!.split(/\s+/)
+            for (let part of parts) usedKeyframeNames.add(part)
           }
+
+          continue
         }
 
-        continue next
+        // Remove the declaration (from its parent)
+        let idx = parent.indexOf(declaration)
+        parent.splice(idx, 1)
+
+        // If the parent is now empty, remove it from the AST
+        if (parent.length === 0) {
+          for (let [idx, node] of newAst.entries()) {
+            // Assumption, but right now the `@theme` must be top-level, so we
+            // don't need to traverse the entire AST to find the parent.
+            //
+            // Checking for `rule`, because at this stage the `@theme` is already
+            // converted to a normal style rule `:root, :host`
+            if (node.kind === 'rule' && node.nodes === parent) {
+              newAst.splice(idx, 1)
+              break
+            }
+          }
+
+          continue next
+        }
       }
     }
-  }
 
-  // Remove unused keyframes
-  for (let keyframe of keyframes) {
-    if (!usedKeyframeNames.has(keyframe.params)) {
-      let idx = atRoots.indexOf(keyframe)
-      atRoots.splice(idx, 1)
+    // Remove unused keyframes
+    for (let keyframe of keyframes) {
+      if (!usedKeyframeNames.has(keyframe.params)) {
+        let idx = atRoots.indexOf(keyframe)
+        atRoots.splice(idx, 1)
+      }
     }
   }
 
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 55b91ec39..eb18cd734 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -322,7 +322,11 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        ".prose {
+        ":root, :host {
+          --text-base: 100rem;
+          --text-md--line-height: 101rem;
+        }
+        .prose {
           [class~=lead-base] {
             font-size: 100rem;
             line-height: 201rem;
@@ -558,7 +562,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ":root, :host {
+        --default-font-family: Potato Sans;
+        --default-font-feature-settings: normal;
+        --default-font-variation-settings: normal;
+      }
+      .font-sans {
         font-family: Potato Sans;
       }
       "
@@ -592,7 +601,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ":root, :host {
+        --default-font-family: Potato Sans;
+        --default-font-feature-settings: "cv06";
+        --default-font-variation-settings: normal;
+      }
+      .font-sans {
         font-family: Potato Sans;
         font-feature-settings: "cv06";
       }
@@ -627,7 +641,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ":root, :host {
+        --default-font-family: Potato Sans;
+        --default-font-feature-settings: normal;
+        --default-font-variation-settings: "XHGT" 0.7;
+      }
+      .font-sans {
         font-family: Potato Sans;
         font-variation-settings: "XHGT" 0.7;
       }
@@ -665,7 +684,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ":root, :host {
+        --default-font-family: Potato Sans;
+        --default-font-feature-settings: "cv06";
+        --default-font-variation-settings: "XHGT" 0.7;
+      }
+      .font-sans {
         font-family: Potato Sans;
         font-feature-settings: "cv06";
         font-variation-settings: "XHGT" 0.7;
@@ -705,6 +729,9 @@ describe('default font family compatibility', () => {
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
       ":root, :host {
+        --default-font-family: var(--font-family-sans);
+        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
         --font-sans: Sandwich Sans;
       }
       .font-sans {
@@ -741,7 +768,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ".font-sans {
+      ":root, :host {
+        --default-font-family: Inter, system-ui, sans-serif;
+        --default-font-feature-settings: normal;
+        --default-font-variation-settings: normal;
+      }
+      .font-sans {
         font-family: Inter, system-ui, sans-serif;
       }
       "
@@ -774,7 +806,14 @@ describe('default font family compatibility', () => {
       }),
     })
 
-    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`""`)
+    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
+      ":root, :host {
+        --default-font-family: var(--font-family-sans);
+        --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
+        --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
+      }
+      "
+    `)
   })
 
   test('overriding `fontFamily.mono` sets `--default-mono-font-family`', async () => {
@@ -802,7 +841,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ":root, :host {
+        --default-mono-font-family: Potato Mono;
+        --default-mono-font-feature-settings: normal;
+        --default-mono-font-variation-settings: normal;
+      }
+      .font-mono {
         font-family: Potato Mono;
       }
       "
@@ -836,7 +880,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ":root, :host {
+        --default-mono-font-family: Potato Mono;
+        --default-mono-font-feature-settings: "cv06";
+        --default-mono-font-variation-settings: normal;
+      }
+      .font-mono {
         font-family: Potato Mono;
         font-feature-settings: "cv06";
       }
@@ -871,7 +920,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ":root, :host {
+        --default-mono-font-family: Potato Mono;
+        --default-mono-font-feature-settings: normal;
+        --default-mono-font-variation-settings: "XHGT" 0.7;
+      }
+      .font-mono {
         font-family: Potato Mono;
         font-variation-settings: "XHGT" 0.7;
       }
@@ -909,7 +963,12 @@ describe('default font family compatibility', () => {
     })
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ".font-mono {
+      ":root, :host {
+        --default-mono-font-family: Potato Mono;
+        --default-mono-font-feature-settings: "cv06";
+        --default-mono-font-variation-settings: "XHGT" 0.7;
+      }
+      .font-mono {
         font-family: Potato Mono;
         font-feature-settings: "cv06";
         font-variation-settings: "XHGT" 0.7;
@@ -949,6 +1008,9 @@ describe('default font family compatibility', () => {
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
       ":root, :host {
+        --default-mono-font-family: var(--font-mono);
+        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
         --font-mono: Sandwich Mono;
       }
       .font-mono {
@@ -984,7 +1046,14 @@ describe('default font family compatibility', () => {
       }),
     })
 
-    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`""`)
+    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
+      ":root, :host {
+        --default-mono-font-family: var(--font-family-mono);
+        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
+        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+      }
+      "
+    `)
   })
 })
 
@@ -1110,7 +1179,13 @@ test('merges css breakpoints with js config screens', async () => {
 
   expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline']))
     .toMatchInlineSnapshot(`
-      ".sm\\:flex {
+      ":root, :host {
+        --breakpoint-md: 50rem;
+        --breakpoint-lg: 64rem;
+        --breakpoint-xl: 80rem;
+        --breakpoint-2xl: 96rem;
+      }
+      .sm\\:flex {
         @media (width >= 44rem) {
           display: flex;
         }
@@ -1258,7 +1333,12 @@ test('Prefixes configured in CSS take precedence over those defined in JS config
   )
 
   expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(`
-    ".wat\\:custom {
+    ":root, :host {
+      --wat-color-red: #f00;
+      --wat-color-green: #0f0;
+      --wat-breakpoint-sm: 640px;
+    }
+    .wat\\:custom {
       color: red;
     }
     "
diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts
index b5618de84..e2b9a0ca5 100644
--- a/packages/tailwindcss/src/compat/container-config.test.ts
+++ b/packages/tailwindcss/src/compat/container-config.test.ts
@@ -31,7 +31,14 @@ test('creates a custom utility to extend the built-in container', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -89,7 +96,14 @@ test('allows padding to be defined at custom breakpoints', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -150,7 +164,14 @@ test('allows breakpoints to be overwritten', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -216,7 +237,14 @@ test('padding applies to custom `container` screens', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -279,7 +307,14 @@ test("an empty `screen` config will undo all custom media screens and won't appl
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -345,7 +380,20 @@ test('legacy container component does not interfere with new --container variabl
 
   expect(compiler.build(['max-w-sm'])).toMatchInlineSnapshot(`
     ":root, :host {
+      --container-3xs: 16rem;
+      --container-2xs: 18rem;
+      --container-xs: 20rem;
       --container-sm: 24rem;
+      --container-md: 28rem;
+      --container-lg: 32rem;
+      --container-xl: 36rem;
+      --container-2xl: 42rem;
+      --container-3xl: 48rem;
+      --container-4xl: 56rem;
+      --container-5xl: 64rem;
+      --container-6xl: 72rem;
+      --container-7xl: 80rem;
+      --container-prose: 65ch;
     }
     .max-w-sm {
       max-width: var(--container-sm);
@@ -390,7 +438,14 @@ test('combines custom padding and screen overwrites', async () => {
   })
 
   expect(compiler.build(['container', '!container'])).toMatchInlineSnapshot(`
-    ".\\!container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .\\!container {
       width: 100% !important;
       @media (width >= 40rem) {
         max-width: 40rem !important;
@@ -502,7 +557,14 @@ test('filters out complex breakpoints', async () => {
   })
 
   expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ".container {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .container {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 218a7eae1..9eb65ccb9 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -293,6 +293,9 @@ describe('theme', async () => {
       .variable {
         color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
       }
+      :root, :host {
+        --color-red-500: #ef4444;
+      }
       "
     `)
   })
@@ -376,6 +379,9 @@ describe('theme', async () => {
       .js-variable {
         color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
       }
+      :root, :host {
+        --color-custom-css: rgba(255 0 0 / <alpha-value>);
+      }
       "
     `)
   })
@@ -1416,6 +1422,12 @@ describe('theme', async () => {
         .my-width-2\\.5 {
           width: 0.625rem;
         }
+        :root, :host {
+          --width-1: 0.25rem;
+          --width-1\\/2: 60%;
+          --width-1\\.5: 0.375rem;
+          --width-2_5: 0.625rem;
+        }
         "
       `)
   })
@@ -1467,6 +1479,12 @@ describe('theme', async () => {
         .my-width-2\\.5 {
           width: 0.625rem;
         }
+        :root, :host {
+          --width-1: 0.25rem;
+          --width-1\\/2: 60%;
+          --width-1\\.5: 0.375rem;
+          --width-2_5: 0.625rem;
+        }
         "
       `)
   })
diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts
index ac73d8216..e8f96ee55 100644
--- a/packages/tailwindcss/src/compat/screens-config.test.ts
+++ b/packages/tailwindcss/src/compat/screens-config.test.ts
@@ -46,7 +46,13 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
       'print:items-end',
     ]),
   ).toMatchInlineSnapshot(`
-    ".max-w-screen-sm {
+    ":root, :host {
+      --breakpoint-md: 50rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .max-w-screen-sm {
       max-width: 44rem;
     }
     .sm\\:flex {
@@ -134,7 +140,10 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => {
       'print:items-end',
     ]),
   ).toMatchInlineSnapshot(`
-    ".min-xs\\:flex {
+    ":root, :host {
+      --breakpoint-md: 50rem;
+    }
+    .min-xs\\:flex {
       @media (width >= 30rem) {
         display: flex;
       }
@@ -307,7 +316,14 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => {
       'print:items-end',
     ]),
   ).toMatchInlineSnapshot(`
-    ".mini\\:flex {
+    ":root, :host {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    .mini\\:flex {
       @media (width >= 40rem) {
         display: flex;
       }
@@ -568,7 +584,10 @@ describe('complex screen configs', () => {
         'print:items-end',
       ]),
     ).toMatchInlineSnapshot(`
-      ".min-sm\\:flex {
+      ":root, :host {
+        --breakpoint-md: 48rem;
+      }
+      .min-sm\\:flex {
         @media (width >= 40rem) {
           display: flex;
         }
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 371531c41..d90311b99 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -94,7 +94,11 @@ describe('--spacing(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".foo {
+      ":root, :host {
+        --spacing: .25rem;
+      }
+
+      .foo {
         margin: 1rem;
       }"
     `)
@@ -153,7 +157,11 @@ describe('--theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      ".red {
+      ":root, :host {
+        --color-red-500: red;
+      }
+
+      .red {
         color: red;
       }"
     `)
@@ -189,7 +197,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -206,7 +218,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -223,7 +239,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -240,7 +260,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -257,7 +281,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -274,7 +302,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -291,7 +323,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .75);
           }"
         `)
@@ -308,7 +344,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .75);
           }"
         `)
@@ -325,7 +365,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .75);
           }"
         `)
@@ -342,7 +386,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: color-mix(in oklab, red var(--opacity), transparent);
           }"
         `)
@@ -360,7 +408,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: color-mix(in oklab, red var(--opacity, 50%), transparent);
           }"
         `)
@@ -377,7 +429,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          ":root, :host {
+            --spacing-12: 3rem;
+          }
+
+          .space-on-the-left {
             margin-left: 3rem;
           }"
         `)
@@ -394,7 +450,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          ":root, :host {
+            --spacing-2_5: .625rem;
+          }
+
+          .space-on-the-left {
             margin-left: .625rem;
           }"
         `)
@@ -411,7 +471,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".space-on-the-left {
+          ":root, :host {
+            --spacing-2_5: .625rem;
+          }
+
+          .space-on-the-left {
             margin-left: calc(100vh - .625rem);
           }"
         `)
@@ -428,7 +492,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".radius {
+          ":root, :host {
+            --radius-lg: .5rem;
+          }
+
+          .radius {
             border-radius: .5rem;
           }"
         `)
@@ -446,7 +514,11 @@ describe('theme(…)', () => {
               }
             `),
           ).toMatchInlineSnapshot(`
-            ".default-blur {
+            ":root, :host {
+              --blur: 8px;
+            }
+
+            .default-blur {
               filter: blur(8px);
             }"
           `)
@@ -465,7 +537,12 @@ describe('theme(…)', () => {
               }
             `),
           ).toMatchInlineSnapshot(`
-            ".text {
+            ":root, :host {
+              --text-xs: 1337.75rem;
+              --text-xs--line-height: 1337rem;
+            }
+
+            .text {
               font-size: 1337.75rem;
               line-height: 1337rem;
             }"
@@ -550,7 +627,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .25);
           }"
         `)
@@ -604,7 +685,12 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+            --color-foo: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -622,7 +708,12 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+            --color-foo: oklab(62.7955% .22486 .12584 / .5);
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .25);
           }"
         `)
@@ -641,7 +732,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -658,7 +753,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: oklab(62.7955% .22486 .12584 / .5);
           }"
         `)
@@ -675,7 +774,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-red-500: red;
+          }
+
+          .red {
             color: red;
           }"
         `)
@@ -694,7 +797,11 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".blur {
+          ":root, :host {
+            --blur: 8px;
+          }
+
+          .blur {
             filter: blur(8px);
           }"
         `)
@@ -753,6 +860,11 @@ describe('theme(…)', () => {
           .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] {
             --color: red;
           }
+        }
+
+        :root, :host {
+          --breakpoint-sm: 40rem;
+          --color-red-500: red;
         }"
       `)
     })
@@ -810,7 +922,12 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (width >= 48rem) and (width <= 64rem) {
+        ":root, :host {
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+        }
+
+        @media (width >= 48rem) and (width <= 64rem) {
           .red {
             color: red;
           }
@@ -832,7 +949,12 @@ describe('theme(…)', () => {
           }
         `),
       ).toMatchInlineSnapshot(`
-        "@media (width >= 48rem) and (width < 64rem) {
+        ":root, :host {
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+        }
+
+        @media (width >= 48rem) and (width < 64rem) {
           .red {
             color: red;
           }
@@ -855,7 +977,11 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@media (width >= 48rem) {
+      ":root, :host {
+        --breakpoint-md: 48rem;
+      }
+
+      @media (width >= 48rem) {
         .red {
           color: red;
         }
@@ -876,7 +1002,11 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@container (width > 48rem) {
+      ":root, :host {
+        --breakpoint-md: 48rem;
+      }
+
+      @container (width > 48rem) {
         .red {
           color: red;
         }
@@ -897,7 +1027,11 @@ describe('theme(…)', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@supports (text-stroke: 0.75rem) {
+      ":root, :host {
+        --font-size-xs: .75rem;
+      }
+
+      @supports (text-stroke: 0.75rem) {
         .red {
           color: red;
         }
@@ -1054,7 +1188,11 @@ test('replaces CSS theme() function with values inside imported stylesheets', as
       },
     ),
   ).toMatchInlineSnapshot(`
-    ".red {
+    ":root, :host {
+      --color-red-500: red;
+    }
+
+    .red {
       color: red;
     }"
   `)
@@ -1075,7 +1213,11 @@ test('resolves paths ending with a 1', async () => {
       [],
     ),
   ).toMatchInlineSnapshot(`
-    ".foo {
+    ":root, :host {
+      --spacing-1: .25rem;
+    }
+
+    .foo {
       margin: .25rem;
     }"
   `)
diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts
new file mode 100644
index 000000000..b24550429
--- /dev/null
+++ b/packages/tailwindcss/src/feature-flags.ts
@@ -0,0 +1 @@
+export const enableRemoveUnusedThemeVariables = false
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index f7c2084d6..8478cc39e 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -27,6 +27,7 @@ describe('compiling CSS', () => {
     ).toMatchInlineSnapshot(`
       ":root, :host {
         --color-black: #000;
+        --breakpoint-md: 768px;
       }
 
       @layer utilities {
@@ -172,6 +173,7 @@ describe('compiling CSS', () => {
         --spacing-1\\.5: 1.5px;
         --spacing-2_5: 2.5px;
         --spacing-3\\.5: 3.5px;
+        --spacing-3_5: 3.5px;
         --spacing-foo\\/bar: 3rem;
       }
 
@@ -292,6 +294,7 @@ describe('@apply', () => {
         --color-blue-500: #3b82f6;
         --color-green-200: #bbf7d0;
         --color-green-500: #22c55e;
+        --breakpoint-md: 768px;
         --animate-spin: spin 1s linear infinite;
       }
 
@@ -1147,6 +1150,7 @@ describe('Parsing themes values from CSS', () => {
     ).toMatchInlineSnapshot(`
       ":root, :host {
         --color-red: red;
+        --animate-foo: foo 1s infinite;
         --text-lg: 20px;
       }
 
@@ -1156,6 +1160,12 @@ describe('Parsing themes values from CSS', () => {
 
       .accent-red {
         accent-color: var(--color-red);
+      }
+
+      @keyframes foo {
+        to {
+          opacity: 1;
+        }
       }"
     `)
   })
@@ -1242,6 +1252,12 @@ describe('Parsing themes values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
@@ -1289,6 +1305,12 @@ describe('Parsing themes values from CSS', () => {
 
       .accent-green {
         accent-color: var(--color-green);
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
       }"
     `)
   })
@@ -1382,6 +1404,7 @@ describe('Parsing themes values from CSS', () => {
       ),
     ).toMatchInlineSnapshot(`
       ":root, :host {
+        --inset-shadow-sm: inset 0 2px 4px #0000000d;
         --inset-md: 50px;
       }
 
@@ -1564,6 +1587,12 @@ describe('Parsing themes values from CSS', () => {
         animation: var(--animate-foobar);
       }
 
+      @keyframes foo {
+        to {
+          opacity: 1;
+        }
+      }
+
       @keyframes foobar {
         to {
           opacity: 0;
@@ -1600,6 +1629,7 @@ describe('Parsing themes values from CSS', () => {
     ).toMatchInlineSnapshot(`
       ":root, :host {
         --animate-foo: used 1s infinite;
+        --animate-bar: unused 1s infinite;
       }
 
       .animate-foo {
@@ -1610,6 +1640,12 @@ describe('Parsing themes values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -1640,7 +1676,12 @@ describe('Parsing themes values from CSS', () => {
         ['animate-foo'],
       ),
     ).toMatchInlineSnapshot(`
-      ".animate-foo {
+      ":root, :host {
+        --animate-foo: used 1s infinite;
+        --animate-bar: unused 1s infinite;
+      }
+
+      .animate-foo {
         animation: 1s infinite used;
       }
 
@@ -1648,6 +1689,12 @@ describe('Parsing themes values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -1736,6 +1783,12 @@ describe('Parsing themes values from CSS', () => {
         to {
           opacity: 1;
         }
+      }
+
+      @keyframes unused {
+        to {
+          opacity: 0;
+        }
       }"
     `)
   })
@@ -2000,7 +2053,13 @@ describe('Parsing themes values from CSS', () => {
         ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      ":root, :host {
+        --color-tomato: #e10c04;
+        --color-potato: #ac855b;
+        --color-primary: var(--primary);
+      }
+
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2058,7 +2117,13 @@ describe('Parsing themes values from CSS', () => {
         ['bg-tomato', 'bg-potato', 'bg-primary'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      ":root, :host {
+        --color-tomato: #e10c04;
+        --color-potato: #ac855b;
+        --color-primary: var(--primary);
+      }
+
+      .bg-potato {
         background-color: #ac855b;
       }
 
@@ -2171,7 +2236,11 @@ describe('Parsing themes values from CSS', () => {
         ['bg-potato'],
       ),
     ).toMatchInlineSnapshot(`
-      ".bg-potato {
+      ":root, :host {
+        --color-potato: #efb46b;
+      }
+
+      .bg-potato {
         background-color: #efb46b;
       }"
     `)
diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts
index 020575ce2..8fb0eec6a 100644
--- a/packages/tailwindcss/src/prefix.test.ts
+++ b/packages/tailwindcss/src/prefix.test.ts
@@ -108,6 +108,8 @@ test('CSS variables output by the theme are prefixed', async () => {
   expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(`
     ":root, :host {
       --tw-color-red: #f00;
+      --tw-color-green: #0f0;
+      --tw-breakpoint-sm: 640px;
     }
     .tw\\:text-red {
       color: var(--tw-color-red);
@@ -129,7 +131,12 @@ test('CSS theme functions do not use the prefix', async () => {
 
   expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]']))
     .toMatchInlineSnapshot(`
-      ".tw\\:\\[color\\:theme\\(--color-red\\)\\] {
+      ":root, :host {
+        --tw-color-red: #f00;
+        --tw-color-green: #0f0;
+        --tw-breakpoint-sm: 640px;
+      }
+      .tw\\:\\[color\\:theme\\(--color-red\\)\\] {
         color: #f00;
       }
       .tw\\:text-\\[theme\\(--color-red\\)\\] {
@@ -186,7 +193,12 @@ test('JS theme functions do not use the prefix', async () => {
   )
 
   expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(`
-    ".tw\\:my-custom {
+    ":root, :host {
+      --tw-color-red: #f00;
+      --tw-color-green: #0f0;
+      --tw-breakpoint-sm: 640px;
+    }
+    .tw\\:my-custom {
       color: #f00;
     }
     "
@@ -325,7 +337,12 @@ test('a prefix can be configured via @import prefix(…)', async () => {
     },
   })
 
-  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`""`)
+  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
+    ":root, :host {
+      --tw-color-potato: #7a4724;
+    }
+    "
+  `)
 })
 
 test('a prefix must be letters only', async () => {
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index f02908c21..bb3d4f2a0 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -147,6 +147,7 @@ test('inset', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --spacing-4: 1rem;
+      --inset-shadow-sm: inset 0 1px 1px #0000000d;
       --inset-shadowned: 1940px;
     }
 
@@ -3161,6 +3162,10 @@ describe('container', () => {
     ).toMatchInlineSnapshot(`
       ":root, :host {
         --breakpoint-sm: 40rem;
+        --breakpoint-md: 48rem;
+        --breakpoint-lg: 64rem;
+        --breakpoint-xl: 80rem;
+        --breakpoint-2xl: 96rem;
       }
 
       .container {
@@ -3300,6 +3305,10 @@ describe('container', () => {
     ).toMatchInlineSnapshot(`
       ":root, :host {
         --breakpoint-sm: 40rem;
+        --breakpoint-md: 48rem;
+        --breakpoint-lg: 64rem;
+        --breakpoint-xl: 80rem;
+        --breakpoint-2xl: 96rem;
       }
 
       .container {
@@ -4036,7 +4045,11 @@ test('translate-x', async () => {
       ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-translate-x-\\[var\\(--value\\)\\] {
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .-translate-x-\\[var\\(--value\\)\\] {
       --tw-translate-x: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4160,7 +4173,11 @@ test('translate-y', async () => {
       ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    ".-translate-y-\\[var\\(--value\\)\\] {
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .-translate-y-\\[var\\(--value\\)\\] {
       --tw-translate-y: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -7717,7 +7734,11 @@ test('divide-x with custom default border width', async () => {
       ['divide-x'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-x > :not(:last-child)) {
+    ":root, :host {
+      --default-border-width: 2px;
+    }
+
+    :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));
@@ -7819,7 +7840,11 @@ test('divide-y with custom default border width', async () => {
       ['divide-y'],
     ),
   ).toMatchInlineSnapshot(`
-    ":where(.divide-y > :not(:last-child)) {
+    ":root, :host {
+      --default-border-width: 2px;
+    }
+
+    :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);
@@ -9905,7 +9930,11 @@ test('border with custom default border width', async () => {
       ['border'],
     ),
   ).toMatchInlineSnapshot(`
-    ".border {
+    ":root, :host {
+      --default-border-width: 2px;
+    }
+
+    .border {
       border-style: var(--tw-border-style);
       border-width: 2px;
     }
@@ -13844,6 +13873,7 @@ test('transition', async () => {
     ":root, :host {
       --default-transition-timing-function: ease;
       --default-transition-duration: .1s;
+      --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
       --transition-property-opacity: opacity;
     }
 
@@ -13909,7 +13939,12 @@ test('transition', async () => {
       ['transition', 'transition-all', 'transition-colors'],
     ),
   ).toMatchInlineSnapshot(`
-    ".transition {
+    ":root, :host {
+      --default-transition-timing-function: ease;
+      --default-transition-duration: .1s;
+    }
+
+    .transition {
       transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, .1s);
@@ -15195,6 +15230,8 @@ test('shadow', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+      --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
     }
 
     .shadow-\\[10px_10px\\] {
@@ -15417,6 +15454,8 @@ test('inset-shadow', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --inset-shadow: inset 0 2px 4px #0000000d;
+      --inset-shadow-sm: inset 0 1px 1px #0000000d;
     }
 
     .inset-shadow {
@@ -16407,6 +16446,7 @@ describe('spacing utilities', () => {
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       ":root, :host {
         --spacing-sm: 8px;
+        --container-sm: 256px;
       }
 
       .w-sm {
@@ -16480,7 +16520,13 @@ describe('custom utilities', () => {
     let compiled = build([])
 
     // `foo` is not used yet:
-    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`"@layer utilities;"`)
+    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+      "@layer utilities;
+
+      :root, :host {
+        --example-foo: 123px;
+      }"
+    `)
 
     // `foo` is used, and the CSS variable is emitted:
     compiled = build(['foo'])
@@ -17664,7 +17710,12 @@ describe('custom utilities', () => {
       `
 
       expect(await compileCss(input, ['flex'])).toMatchInlineSnapshot(`
-        ".flex {
+        ":root, :host {
+          --example-foo: red;
+          --color-red-500: red;
+        }
+
+        .flex {
           display: flex;
         }"
       `)
@@ -17757,7 +17808,11 @@ describe('custom utilities', () => {
     `
 
     expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ".tab-github {
+      ":root, :host {
+        --tab-size-github: 8;
+      }
+
+      .tab-github {
         tab-size: 8;
       }"
     `)
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 8348f9400..be374dbd9 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -747,7 +747,15 @@ test('default breakpoints', async () => {
       ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 640px) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-md: 768px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-2xl: 1536px;
+    }
+
+    @media (width >= 640px) {
       .sm\\:flex {
         display: flex;
       }
@@ -807,7 +815,11 @@ test('custom breakpoint', async () => {
       ['10xl:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 5000px) {
+    ":root, :host {
+      --breakpoint-10xl: 5000px;
+    }
+
+    @media (width >= 5000px) {
       .\\31 0xl\\:flex {
         display: flex;
       }
@@ -830,7 +842,13 @@ test('max-*', async () => {
       ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width < 1024px) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width < 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
@@ -879,7 +897,13 @@ test('min-*', async () => {
       ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width >= 640px) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width >= 640px) {
       .min-sm\\:flex {
         display: flex;
       }
@@ -930,7 +954,15 @@ 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) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-xs: 280px;
+    }
+
+    @media (width >= 280px) {
       @media (width < 640px) {
         .min-xs\\:max-sm\\:flex {
           display: flex;
@@ -977,7 +1009,13 @@ 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) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width >= 640px) {
       .sm\\:flex {
         display: flex;
       }
@@ -1033,7 +1071,13 @@ test('min, max and unprefixed breakpoints', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (width < 1024px) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-md: 768px;
+    }
+
+    @media (width < 1024px) {
       .max-lg\\:flex {
         display: flex;
       }
@@ -1412,7 +1456,11 @@ test('not', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    ".not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+    }
+
+    .not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target) {
       display: flex;
     }
 
@@ -1954,7 +2002,11 @@ test('container queries', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@container name (width < 1024px) {
+    ":root, :host {
+      --container-lg: 1024px;
+    }
+
+    @container name (width < 1024px) {
       .\\@max-lg\\/name\\:flex {
         display: flex;
       }
@@ -2106,7 +2158,15 @@ test('variant order', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@media (hover: hover) {
+    ":root, :host {
+      --breakpoint-sm: 640px;
+      --breakpoint-md: 768px;
+      --breakpoint-lg: 1024px;
+      --breakpoint-xl: 1280px;
+      --breakpoint-2xl: 1536px;
+    }
+
+    @media (hover: hover) {
       .group-hover\\:flex:is(:where(.group):hover *), .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
         display: flex;
       }
diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts
index 59c8bdfa2..6bc831056 100644
--- a/packages/tailwindcss/tsup.config.ts
+++ b/packages/tailwindcss/tsup.config.ts
@@ -12,6 +12,9 @@ export default defineConfig([
       'default-theme': 'src/compat/default-theme.ts',
       'flatten-color-palette': 'src/compat/flatten-color-palette.ts',
     },
+    define: {
+      'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'),
+    },
   },
   {
     format: ['cjs'],
@@ -24,5 +27,8 @@ export default defineConfig([
       'default-theme': 'src/compat/default-theme.cts',
       'flatten-color-palette': 'src/compat/flatten-color-palette.cts',
     },
+    define: {
+      'process.env.FEATURES_ENV': JSON.stringify(process.env.FEATURES_ENV ?? 'insiders'),
+    },
   },
 ])
diff --git a/turbo.json b/turbo.json
index 35a3e63a7..643777953 100644
--- a/turbo.json
+++ b/turbo.json
@@ -34,7 +34,8 @@
     },
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["dist/**"]
+      "outputs": ["dist/**"],
+      "env": ["FEATURES_ENV"]
     },
     "lint": {},
     "dev": {