Add :host rule to @theme layer (#15975)

Resolves #15799 Resolves #14478 Part-of #15005 Adds a `:host` selector for the `@theme` layer. This is necessary for the `@theme` layer to work correctly in shadow DOM. Also updates the snapshots for the tests that were affected by this change (in a separate commit). ## Test plan Tested via the Vite playground: <img width="1121" alt="Screenshot 2025-01-29 at 15 06 49" src="https://github.com/user-attachments/assets/a7908135-5ff8-472f-a053-d2c6d5c81e1b" /> Additionally made sure that `@property` defaults also work across Firefox, Chrome, and Safari (the `@property` definition from the root is pulled in) and added a UI spec. --------- Co-authored-by: Philipp Spiess <hello@philippspiess.com>
2025-12-08 21:36:08 +00:00 · 2025-01-29 17:20:29 +01:00 · 2025-01-29 17:20:29 +01:00 · 9fef2bde50
commit 9fef2bde50
parent 924dd69bdb
18 changed files with 315 additions and 276 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Find utilities when using the Angular class shorthand syntax ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
 - Find utilities when using functions inside arrays ([#15974](https://github.com/tailwindlabs/tailwindcss/pull/15974))
 - Ensure that `@tailwindcss/browser` does not pollute the global namespace ([#15978](https://github.com/tailwindlabs/tailwindcss/pull/15978))
+- Ensure CSS theme variables are available within shadow roots ([#15975](https://github.com/tailwindlabs/tailwindcss/pull/15975))
 - Fix crash when project lives in the `/` directory ([#15988](https://github.com/tailwindlabs/tailwindcss/pull/15988))
 - Ensure `@custom-variant` has a non-empty selector list  ([#16009](https://github.com/tailwindlabs/tailwindcss/pull/16009))
 - _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@ -370,7 +370,7 @@ describe.each([

      await fs.expectFileToContain('project-a/dist/out.css', [
        css`
-          :root {
+          :root, :host {
          }
        `,
      ])
--- a/packages/@tailwindcss-postcss/src/snapshots/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/snapshots/index.test.ts.snap
@ -2,7 +2,7 @@

 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 "@layer theme {
-  :root {
+  :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;
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@ -280,7 +280,7 @@ test('runs `Once` plugins in the right order', async () => {
  )

  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: red;
    }

@ -297,7 +297,7 @@ test('runs `Once` plugins in the right order', async () => {
    }"
  `)
  expect(after).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: red;
    }

--- a/packages/tailwindcss/src/snapshots/index.test.ts.snap
+++ b/packages/tailwindcss/src/snapshots/index.test.ts.snap
@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-":root {
+":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;
--- a/packages/tailwindcss/src/snapshots/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/snapshots/utilities.test.ts.snap
@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

 exports[`border-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -126,7 +126,7 @@ exports[`border-* 1`] = `
 `;

 exports[`border-b-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -251,7 +251,7 @@ exports[`border-b-* 1`] = `
 `;

 exports[`border-e-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -376,7 +376,7 @@ exports[`border-e-* 1`] = `
 `;

 exports[`border-l-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -501,7 +501,7 @@ exports[`border-l-* 1`] = `
 `;

 exports[`border-r-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -626,7 +626,7 @@ exports[`border-r-* 1`] = `
 `;

 exports[`border-s-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -751,7 +751,7 @@ exports[`border-s-* 1`] = `
 `;

 exports[`border-t-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -876,7 +876,7 @@ exports[`border-t-* 1`] = `
 `;

 exports[`border-x-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
@ -1001,7 +1001,7 @@ exports[`border-x-* 1`] = `
 `;

 exports[`border-y-* 1`] = `
-":root {
+":root, :host {
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-sm: .125rem;
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@ -322,7 +322,7 @@ describe('theme callbacks', () => {

    expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
      .toMatchInlineSnapshot(`
-        ":root {
+        ":root, :host {
          --text-base: 100rem;
          --text-md--line-height: 101rem;
        }
@ -391,7 +391,7 @@ describe('theme overrides order', () => {
    })

    expect(compiler.build(['bg-red', 'bg-blue'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-blue: blue;
      }
      .bg-blue {
@ -477,7 +477,7 @@ describe('theme overrides order', () => {
        'hover-bg-slate-600',
      ]),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-slate-100: #000100;
        --color-slate-300: #000300;
        --color-slate-400: #100400;
@ -562,7 +562,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-font-family: Potato Sans;
        --default-font-feature-settings: normal;
        --default-font-variation-settings: normal;
@ -601,7 +601,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-font-family: Potato Sans;
        --default-font-feature-settings: "cv06";
        --default-font-variation-settings: normal;
@ -641,7 +641,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-font-family: Potato Sans;
        --default-font-feature-settings: normal;
        --default-font-variation-settings: "XHGT" 0.7;
@ -684,7 +684,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-font-family: Potato Sans;
        --default-font-feature-settings: "cv06";
        --default-font-variation-settings: "XHGT" 0.7;
@ -728,7 +728,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":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);
@ -768,7 +768,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-font-family: Inter, system-ui, sans-serif;
        --default-font-feature-settings: normal;
        --default-font-variation-settings: normal;
@ -807,7 +807,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-sans'])).toMatchInlineSnapshot(`
-      ":root {
+      ":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);
@ -841,7 +841,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-mono-font-family: Potato Mono;
        --default-mono-font-feature-settings: normal;
        --default-mono-font-variation-settings: normal;
@ -880,7 +880,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-mono-font-family: Potato Mono;
        --default-mono-font-feature-settings: "cv06";
        --default-mono-font-variation-settings: normal;
@ -920,7 +920,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-mono-font-family: Potato Mono;
        --default-mono-font-feature-settings: normal;
        --default-mono-font-variation-settings: "XHGT" 0.7;
@ -963,7 +963,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --default-mono-font-family: Potato Mono;
        --default-mono-font-feature-settings: "cv06";
        --default-mono-font-variation-settings: "XHGT" 0.7;
@ -1007,7 +1007,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":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);
@ -1047,7 +1047,7 @@ describe('default font family compatibility', () => {
    })

    expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
-      ":root {
+      ":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);
@ -1179,7 +1179,7 @@ test('merges css breakpoints with js config screens', async () => {

  expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline']))
    .toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-md: 50rem;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 80rem;
@ -1333,7 +1333,7 @@ test('Prefixes configured in CSS take precedence over those defined in JS config
  )

  expect(compiler.build(['wat:custom'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --wat-color-red: #f00;
      --wat-color-green: #0f0;
      --wat-breakpoint-sm: 640px;
--- a/packages/tailwindcss/src/compat/container-config.test.ts
+++ b/packages/tailwindcss/src/compat/container-config.test.ts
@ -31,7 +31,7 @@ test('creates a custom utility to extend the built-in container', async () => {
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -96,7 +96,7 @@ test('allows padding to be defined at custom breakpoints', async () => {
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -164,7 +164,7 @@ test('allows breakpoints to be overwritten', async () => {
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -237,7 +237,7 @@ test('padding applies to custom `container` screens', async () => {
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -307,7 +307,7 @@ test("an empty `screen` config will undo all custom media screens and won't appl
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -379,7 +379,7 @@ test('legacy container component does not interfere with new --container variabl
  })

  expect(compiler.build(['max-w-sm'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --container-3xs: 16rem;
      --container-2xs: 18rem;
      --container-xs: 20rem;
@ -438,7 +438,7 @@ test('combines custom padding and screen overwrites', async () => {
  })

  expect(compiler.build(['container', '!container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -557,7 +557,7 @@ test('filters out complex breakpoints', async () => {
  })

  expect(compiler.build(['container'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@ -85,7 +85,7 @@ test('max-w-screen', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@ -293,7 +293,7 @@ describe('theme', async () => {
      .variable {
        color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
      }
-      :root {
+      :root, :host {
        --color-red-500: #ef4444;
      }
      "
@ -379,7 +379,7 @@ describe('theme', async () => {
      .js-variable {
        color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
      }
-      :root {
+      :root, :host {
        --color-custom-css: rgba(255 0 0 / <alpha-value>);
      }
      "
@ -1422,7 +1422,7 @@ describe('theme', async () => {
        .my-width-2\\.5 {
          width: 0.625rem;
        }
-        :root {
+        :root, :host {
          --width-1: 0.25rem;
          --width-1\\/2: 60%;
          --width-1\\.5: 0.375rem;
@ -1479,7 +1479,7 @@ describe('theme', async () => {
        .my-width-2\\.5 {
          width: 0.625rem;
        }
-        :root {
+        :root, :host {
          --width-1: 0.25rem;
          --width-1\\/2: 60%;
          --width-1\\.5: 0.375rem;
@ -3136,7 +3136,7 @@ describe('addUtilities()', () => {
          }
        }
      }
-      :root {
+      :root, :host {
      }"
    `,
    )
--- a/packages/tailwindcss/src/compat/screens-config.test.ts
+++ b/packages/tailwindcss/src/compat/screens-config.test.ts
@ -46,7 +46,7 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
      'print:items-end',
    ]),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-md: 50rem;
      --breakpoint-lg: 64rem;
      --breakpoint-xl: 80rem;
@ -140,7 +140,7 @@ test('JS config `screens` extend CSS `--breakpoint-*`', async () => {
      'print:items-end',
    ]),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-md: 50rem;
    }
    .min-xs\\:flex {
@ -316,7 +316,7 @@ test('JS config `screens` overwrite CSS `--breakpoint-*`', async () => {
      'print:items-end',
    ]),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
@ -584,7 +584,7 @@ describe('complex screen configs', () => {
        'print:items-end',
      ]),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-md: 48rem;
      }
      .min-sm\\:flex {
@ -656,7 +656,7 @@ test('JS config `screens` can overwrite default CSS `--breakpoint-*`', async ()
  expect(
    compiler.build(['min-sm:flex', 'min-md:flex', 'min-lg:flex', 'min-xl:flex', 'min-2xl:flex']),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
    }
    "
  `)
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@ -72,7 +72,7 @@ describe('--spacing(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing: .25rem;
      }

@ -94,7 +94,7 @@ describe('--spacing(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing: .25rem;
      }

@ -157,7 +157,7 @@ describe('--theme(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red-500: red;
      }

@ -197,7 +197,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -218,7 +218,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -239,7 +239,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -260,7 +260,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -281,7 +281,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -302,7 +302,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -323,7 +323,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -344,7 +344,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -365,7 +365,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -386,7 +386,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -408,7 +408,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -429,7 +429,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --spacing-12: 3rem;
          }

@ -450,7 +450,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --spacing-2_5: .625rem;
          }

@ -471,7 +471,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --spacing-2_5: .625rem;
          }

@ -492,7 +492,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --radius-lg: .5rem;
          }

@ -514,14 +514,14 @@ describe('theme(…)', () => {
              }
            `),
          ).toMatchInlineSnapshot(`
-          ":root {
-            --blur: 8px;
-          }
+            ":root, :host {
+              --blur: 8px;
+            }

-          .default-blur {
-            filter: blur(8px);
-          }"
-        `)
+            .default-blur {
+              filter: blur(8px);
+            }"
+          `)
        })

        test('theme(fontSize.xs[1].lineHeight)', async () => {
@ -537,7 +537,7 @@ describe('theme(…)', () => {
              }
            `),
          ).toMatchInlineSnapshot(`
-            ":root {
+            ":root, :host {
              --text-xs: 1337.75rem;
              --text-xs--line-height: 1337rem;
            }
@ -626,7 +626,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -684,7 +684,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
            --color-foo: red;
          }
@ -707,7 +707,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
            --color-foo: oklab(62.7955% .22486 .12584 / .5);
          }
@ -731,7 +731,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -752,7 +752,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -773,7 +773,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --color-red-500: red;
          }

@ -796,7 +796,7 @@ describe('theme(…)', () => {
            }
          `),
        ).toMatchInlineSnapshot(`
-          ":root {
+          ":root, :host {
            --blur: 8px;
          }

@ -861,7 +861,7 @@ describe('theme(…)', () => {
          }
        }

-        :root {
+        :root, :host {
          --breakpoint-sm: 40rem;
          --color-red-500: red;
        }"
@ -921,7 +921,7 @@ describe('theme(…)', () => {
          }
        `),
      ).toMatchInlineSnapshot(`
-        ":root {
+        ":root, :host {
          --breakpoint-md: 48rem;
          --breakpoint-lg: 64rem;
        }
@ -948,7 +948,7 @@ describe('theme(…)', () => {
          }
        `),
      ).toMatchInlineSnapshot(`
-        ":root {
+        ":root, :host {
          --breakpoint-md: 48rem;
          --breakpoint-lg: 64rem;
        }
@ -976,7 +976,7 @@ describe('theme(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-md: 48rem;
      }

@ -1001,7 +1001,7 @@ describe('theme(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-md: 48rem;
      }

@ -1026,7 +1026,7 @@ describe('theme(…)', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --font-size-xs: .75rem;
      }

@ -1187,7 +1187,7 @@ test('replaces CSS theme() function with values inside imported stylesheets', as
      },
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: red;
    }

@ -1212,7 +1212,7 @@ test('resolves paths ending with a 1', async () => {
      [],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-1: .25rem;
    }

--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@ -25,7 +25,7 @@ describe('compiling CSS', () => {
        ['flex', 'md:grid', 'hover:underline', 'dark:bg-black'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-black: #000;
        --breakpoint-md: 768px;
      }
@ -133,7 +133,7 @@ describe('compiling CSS', () => {
        ],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-1_5: 1.5rem;
        --spacing-2_5: 2.5rem;
      }
@ -245,7 +245,7 @@ describe('@apply', () => {
        }
      `),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red-200: #fecaca;
        --color-red-500: #ef4444;
        --color-blue-500: #3b82f6;
@ -608,7 +608,7 @@ describe('important', () => {
        ['animate-spin!'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --animate-spin: spin 1s linear infinite;
      }

@ -646,7 +646,7 @@ describe('sorting', () => {
        ['pointer-events-none', 'flex', 'p-1', 'px-1', 'pl-1'].sort(() => Math.random() - 0.5),
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-1: .25rem;
      }

@ -709,7 +709,7 @@ describe('sorting', () => {
        ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-0: 0px;
        --spacing-2: .5rem;
        --spacing-4: 1rem;
@ -771,7 +771,7 @@ describe('sorting', () => {
        ].sort(() => Math.random() - 0.5),
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-1: 1px;
        --spacing-2: 2px;
        --spacing-3: 3px;
@ -992,7 +992,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red-500'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red-500: red;
      }

@ -1015,7 +1015,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red-500'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red-500: #f10;
      }

@ -1040,7 +1040,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red-500', 'accent-blue-500'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red-500: red;
        --color-blue-500: #00f;
      }
@ -1069,7 +1069,7 @@ describe('Parsing themes values from CSS', () => {
        ['w-1/2', 'w-75%'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --width-1\\/2: 75%;
        --width-75\\%: 50%;
      }
@ -1105,7 +1105,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red', 'text-lg'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-red: red;
        --animate-foo: foo 1s infinite;
        --text-lg: 20px;
@ -1159,7 +1159,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --text-sm: 13px;
        --color-green: #0f0;
      }
@ -1206,7 +1206,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --text-sm: 13px;
        --color-green: #0f0;
      }
@ -1242,7 +1242,7 @@ describe('Parsing themes values from CSS', () => {
        ['accent-red', 'accent-blue', 'accent-green', 'text-sm', 'text-md'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-green: #0f0;
      }

@ -1270,7 +1270,7 @@ describe('Parsing themes values from CSS', () => {
        ['font-bold', 'font-sans', 'font-serif', 'font-body'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --font-weight-bold: bold;
        --font-body: Inter;
      }
@ -1309,7 +1309,7 @@ describe('Parsing themes values from CSS', () => {
        ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --inset-shadow-sm: inset 0 2px 4px #0000000d;
        --inset-md: 50px;
      }
@ -1420,7 +1420,7 @@ describe('Parsing themes values from CSS', () => {
        ],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --text-color-potato: brown;
        --text-underline-offset-potato: 4px;
        --text-indent-potato: 6px;
@ -1485,7 +1485,7 @@ describe('Parsing themes values from CSS', () => {
        ['animate-foo', 'animate-foobar'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --animate-foobar: foobar 1s infinite;
      }

@ -1516,7 +1516,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-tomato', 'bg-potato'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-tomato: #e10c04;
      }

@ -1566,7 +1566,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-potato'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-potato: #c794aa;
      }

@ -1596,7 +1596,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-tomato', 'bg-potato', 'bg-avocado'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-tomato: #e10c04;
      }

@ -1647,7 +1647,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-tomato', 'bg-potato', 'bg-primary'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-tomato: #e10c04;
        --color-potato: #ac855b;
        --color-primary: var(--primary);
@ -1684,7 +1684,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-tomato', 'bg-potato', 'bg-primary'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-tomato: #e10c04;
        --color-potato: #ac855b;
        --color-primary: var(--primary);
@ -1780,7 +1780,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-potato'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-potato: #ac855b;
      }

@ -1803,7 +1803,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-potato'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-potato: #efb46b;
      }

@ -1872,7 +1872,7 @@ describe('Parsing themes values from CSS', () => {
        ['bg-potato', 'bg-tomato'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-potato: #ac855b;
        --color-tomato: tomato;
      }
@ -1919,7 +1919,7 @@ describe('Parsing themes values from CSS', () => {
    )

    expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-orange: orange;
      }

@ -1965,7 +1965,7 @@ describe('Parsing themes values from CSS', () => {
    )

    expect(optimizeCss(build(['text-red', 'text-orange'])).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --color-orange: orange;
      }

--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@ -478,7 +478,7 @@ async function parseCss(
      // Keep a reference to the first `@theme` rule to update with the full
      // theme later, and delete any other `@theme` rules.
      if (!firstThemeRule && !(themeOptions & ThemeOptions.REFERENCE)) {
-        firstThemeRule = styleRule(':root', node.nodes)
+        firstThemeRule = styleRule(':root, :host', node.nodes)
        replaceWith([firstThemeRule])
      } else {
        replaceWith([])
--- a/packages/tailwindcss/src/prefix.test.ts
+++ b/packages/tailwindcss/src/prefix.test.ts
@ -106,7 +106,7 @@ test('CSS variables output by the theme are prefixed', async () => {

  // Prefixed utilities are generated
  expect(compiler.build(['tw:text-red'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --tw-color-red: #f00;
      --tw-color-green: #0f0;
      --tw-breakpoint-sm: 640px;
@ -131,19 +131,19 @@ test('CSS theme functions do not use the prefix', async () => {

  expect(compiler.build(['tw:[color:theme(--color-red)]', 'tw:text-[theme(--color-red)]']))
    .toMatchInlineSnapshot(`
-    ":root {
-      --tw-color-red: #f00;
-      --tw-color-green: #0f0;
-      --tw-breakpoint-sm: 640px;
-    }
-    .tw\\:\\[color\\:theme\\(--color-red\\)\\] {
-      color: #f00;
-    }
-    .tw\\:text-\\[theme\\(--color-red\\)\\] {
-      color: #f00;
-    }
-    "
-  `)
+      ":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\\)\\] {
+        color: #f00;
+      }
+      "
+    `)

  compiler = await compile(css`
    @theme reference prefix(tw) {
@ -193,7 +193,7 @@ test('JS theme functions do not use the prefix', async () => {
  )

  expect(compiler.build(['tw:my-custom'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --tw-color-red: #f00;
      --tw-color-green: #0f0;
      --tw-breakpoint-sm: 640px;
@ -300,7 +300,7 @@ test('a prefix can be configured via @import prefix(…)', async () => {

  expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom']))
    .toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --tw-color-potato: #7a4724;
      }
      .tw\\:bg-potato {
@ -338,7 +338,7 @@ test('a prefix can be configured via @import prefix(…)', async () => {
  })

  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --tw-color-potato: #7a4724;
    }
    "
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@ -145,7 +145,7 @@ test('inset', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadow-sm: inset 0 1px 1px #0000000d;
      --inset-shadowned: 1940px;
@ -295,7 +295,7 @@ test('inset-x', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -382,7 +382,7 @@ test('inset-y', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -469,7 +469,7 @@ test('start', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -556,7 +556,7 @@ test('end', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -644,7 +644,7 @@ test('top', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -731,7 +731,7 @@ test('right', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -818,7 +818,7 @@ test('bottom', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -905,7 +905,7 @@ test('left', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --inset-shadowned: 1940px;
    }
@ -1444,7 +1444,7 @@ test('margin', async () => {
      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -1498,7 +1498,7 @@ test('mx', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -1584,7 +1584,7 @@ test('my', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -1670,7 +1670,7 @@ test('mt', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -1756,7 +1756,7 @@ test('ms', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -1842,7 +1842,7 @@ test('me', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -1928,7 +1928,7 @@ test('mr', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -2014,7 +2014,7 @@ test('mb', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -2100,7 +2100,7 @@ test('ml', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -2173,7 +2173,7 @@ test('margin sort order', async () => {
      ['mb-4', 'me-4', 'mx-4', 'ml-4', 'ms-4', 'm-4', 'mr-4', 'mt-4', 'my-4'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -2477,7 +2477,7 @@ test('aspect-ratio', async () => {
      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --aspect-video: 16 / 9;
    }

@ -2531,7 +2531,7 @@ test('size', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -2624,7 +2624,7 @@ test('width', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --width-xl: 36rem;
    }
@ -2730,7 +2730,7 @@ test('min-width', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --container-xl: 36rem;
    }
@ -2806,7 +2806,7 @@ test('max-width', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
      --container-xl: 36rem;
    }
@ -2881,7 +2881,7 @@ test('height', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -2983,7 +2983,7 @@ test('min-height', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -3075,7 +3075,7 @@ test('max-height', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -3160,7 +3160,7 @@ describe('container', () => {
        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-sm: 40rem;
        --breakpoint-md: 48rem;
        --breakpoint-lg: 64rem;
@ -3303,7 +3303,7 @@ describe('container', () => {
        ['w-1/2', 'container', 'max-w-[var(--breakpoint-sm)]'],
      ),
    ).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --breakpoint-sm: 40rem;
        --breakpoint-md: 48rem;
        --breakpoint-lg: 64rem;
@ -3500,7 +3500,7 @@ test('flex-basis', async () => {
      ['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --container-xl: 36rem;
    }

@ -3604,7 +3604,7 @@ test('border-spacing', async () => {
      ['border-spacing-1', 'border-spacing-[123px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-1: .25rem;
    }

@ -3655,7 +3655,7 @@ test('border-spacing-x', async () => {
      ['border-spacing-x-1', 'border-spacing-x-[123px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-1: .25rem;
    }

@ -3704,7 +3704,7 @@ test('border-spacing-y', async () => {
      ['border-spacing-y-1', 'border-spacing-y-[123px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-1: .25rem;
    }

@ -4045,7 +4045,7 @@ test('translate-x', async () => {
      ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
    }

@ -4173,7 +4173,7 @@ test('translate-y', async () => {
      ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
    }

@ -5113,7 +5113,7 @@ test('perspective', async () => {
      ['perspective-normal', 'perspective-dramatic', 'perspective-none', 'perspective-[456px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --perspective-dramatic: 100px;
      --perspective-normal: 500px;
    }
@ -5199,7 +5199,7 @@ test('cursor', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --cursor-custom: url("/my-cursor.png");
    }

@ -5751,7 +5751,7 @@ test('scroll-m', async () => {
      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -5794,7 +5794,7 @@ test('scroll-mx', async () => {
      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -5837,7 +5837,7 @@ test('scroll-my', async () => {
      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -5880,7 +5880,7 @@ test('scroll-ms', async () => {
      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -5923,7 +5923,7 @@ test('scroll-me', async () => {
      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -5966,7 +5966,7 @@ test('scroll-mt', async () => {
      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6009,7 +6009,7 @@ test('scroll-mr', async () => {
      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6052,7 +6052,7 @@ test('scroll-mb', async () => {
      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6095,7 +6095,7 @@ test('scroll-ml', async () => {
      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6138,7 +6138,7 @@ test('scroll-p', async () => {
      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6173,7 +6173,7 @@ test('scroll-px', async () => {
      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6208,7 +6208,7 @@ test('scroll-py', async () => {
      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6243,7 +6243,7 @@ test('scroll-ps', async () => {
      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6278,7 +6278,7 @@ test('scroll-pe', async () => {
      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6313,7 +6313,7 @@ test('scroll-pt', async () => {
      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6348,7 +6348,7 @@ test('scroll-pr', async () => {
      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6383,7 +6383,7 @@ test('scroll-pb', async () => {
      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6418,7 +6418,7 @@ test('scroll-pl', async () => {
      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -6599,7 +6599,7 @@ test('columns', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --container-3xs: 16rem;
      --container-7xl: 80rem;
    }
@ -7467,7 +7467,7 @@ test('gap', async () => {
      ['gap-4', 'gap-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -7494,7 +7494,7 @@ test('gap-x', async () => {
      ['gap-x-4', 'gap-x-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -7523,7 +7523,7 @@ test('gap-y', async () => {
      ['gap-y-4', 'gap-y-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -7552,7 +7552,7 @@ test('space-x', async () => {
      ['space-x-4', 'space-x-[4px]', '-space-x-4'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -7595,7 +7595,7 @@ test('space-y', async () => {
      ['space-y-4', 'space-y-[4px]', '-space-y-4'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing-4: 1rem;
    }

@ -7732,7 +7732,7 @@ test('divide-x with custom default border width', async () => {
      ['divide-x'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --default-border-width: 2px;
    }

@ -7838,7 +7838,7 @@ test('divide-y with custom default border width', async () => {
      ['divide-y'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --default-border-width: 2px;
    }

@ -7971,7 +7971,7 @@ test('accent', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -8086,7 +8086,7 @@ test('caret', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -8199,7 +8199,7 @@ test('divide-color', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -8863,7 +8863,7 @@ test('rounded', async () => {
      ['rounded', 'rounded-full', 'rounded-none', 'rounded-sm', 'rounded-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-sm: .125rem;
      --radius: .25rem;
    }
@ -8919,7 +8919,7 @@ test('rounded-s', async () => {
      ['rounded-s', 'rounded-s-full', 'rounded-s-none', 'rounded-s-sm', 'rounded-s-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -8982,7 +8982,7 @@ test('rounded-e', async () => {
      ['rounded-e', 'rounded-e-full', 'rounded-e-none', 'rounded-e-sm', 'rounded-e-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9045,7 +9045,7 @@ test('rounded-t', async () => {
      ['rounded-t', 'rounded-t-full', 'rounded-t-none', 'rounded-t-sm', 'rounded-t-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9112,7 +9112,7 @@ test('rounded-r', async () => {
      ['rounded-r', 'rounded-r-full', 'rounded-r-none', 'rounded-r-sm', 'rounded-r-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9179,7 +9179,7 @@ test('rounded-b', async () => {
      ['rounded-b', 'rounded-b-full', 'rounded-b-none', 'rounded-b-sm', 'rounded-b-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9246,7 +9246,7 @@ test('rounded-l', async () => {
      ['rounded-l', 'rounded-l-full', 'rounded-l-none', 'rounded-l-sm', 'rounded-l-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9313,7 +9313,7 @@ test('rounded-ss', async () => {
      ['rounded-ss', 'rounded-ss-full', 'rounded-ss-none', 'rounded-ss-sm', 'rounded-ss-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9371,7 +9371,7 @@ test('rounded-se', async () => {
      ['rounded-se', 'rounded-se-full', 'rounded-se-none', 'rounded-se-sm', 'rounded-se-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9429,7 +9429,7 @@ test('rounded-ee', async () => {
      ['rounded-ee', 'rounded-ee-full', 'rounded-ee-none', 'rounded-ee-sm', 'rounded-ee-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9487,7 +9487,7 @@ test('rounded-es', async () => {
      ['rounded-es', 'rounded-es-full', 'rounded-es-none', 'rounded-es-sm', 'rounded-es-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9545,7 +9545,7 @@ test('rounded-tl', async () => {
      ['rounded-tl', 'rounded-tl-full', 'rounded-tl-none', 'rounded-tl-sm', 'rounded-tl-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9605,7 +9605,7 @@ test('rounded-tr', async () => {
      ['rounded-tr', 'rounded-tr-full', 'rounded-tr-none', 'rounded-tr-sm', 'rounded-tr-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9665,7 +9665,7 @@ test('rounded-br', async () => {
      ['rounded-br', 'rounded-br-full', 'rounded-br-none', 'rounded-br-sm', 'rounded-br-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9725,7 +9725,7 @@ test('rounded-bl', async () => {
      ['rounded-bl', 'rounded-bl-full', 'rounded-bl-none', 'rounded-bl-sm', 'rounded-bl-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --radius-none: 0px;
      --radius-full: 9999px;
      --radius-sm: .125rem;
@ -9928,7 +9928,7 @@ test('border with custom default border width', async () => {
      ['border'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --default-border-width: 2px;
    }

@ -10089,7 +10089,7 @@ test('bg', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -10702,7 +10702,7 @@ test('from', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -10921,7 +10921,7 @@ test('via', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -11150,7 +11150,7 @@ test('to', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -11700,7 +11700,7 @@ test('fill', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -11821,7 +11821,7 @@ test('stroke', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -12074,7 +12074,7 @@ test('p', async () => {
      ['p-1', 'p-4', 'p-99', 'p-big', 'p-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12115,7 +12115,7 @@ test('px', async () => {
      ['px-1', 'px-99', 'px-2.5', 'px-big', 'px-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12156,7 +12156,7 @@ test('py', async () => {
      ['py-1', 'py-4', 'py-99', 'py-big', 'py-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12197,7 +12197,7 @@ test('pt', async () => {
      ['pt-1', 'pt-4', 'pt-99', 'pt-big', 'pt-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12238,7 +12238,7 @@ test('ps', async () => {
      ['ps-1', 'ps-4', 'ps-99', 'ps-big', 'ps-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12279,7 +12279,7 @@ test('pe', async () => {
      ['pe-1', 'pe-4', 'pe-99', 'pe-big', 'pe-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12320,7 +12320,7 @@ test('pr', async () => {
      ['pr-1', 'pr-4', 'pr-99', 'pr-big', 'pr-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12361,7 +12361,7 @@ test('pb', async () => {
      ['pb-1', 'pb-4', 'pb-99', 'pb-big', 'pb-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12402,7 +12402,7 @@ test('pl', async () => {
      ['pl-1', 'pl-4', 'pl-99', 'pl-big', 'pl-[4px]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --spacing-big: 100rem;
    }
@ -12594,7 +12594,7 @@ test('font', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":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;
    }
@ -12811,7 +12811,7 @@ test('placeholder', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -12936,7 +12936,7 @@ test('decoration', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -13131,7 +13131,7 @@ test('animate', async () => {
      ['animate-spin', 'animate-none', 'animate-[bounce_1s_infinite]', 'animate-not-found'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --animate-spin: spin 1s linear infinite;
    }

@ -13207,7 +13207,7 @@ test('filter', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --blur-xl: 24px;
      --drop-shadow: 0 1px 1px #0000000d;
      --drop-shadow-xl: 0 9px 7px #0000001a;
@ -13522,7 +13522,7 @@ test('backdrop-filter', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --blur-xl: 24px;
    }

@ -13865,7 +13865,7 @@ test('transition', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":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;
@ -13934,7 +13934,7 @@ test('transition', async () => {
      ['transition', 'transition-all', 'transition-colors'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --default-transition-timing-function: ease;
      --default-transition-duration: .1s;
    }
@ -14082,7 +14082,7 @@ test('ease', async () => {
      ['ease-in', 'ease-out', 'ease-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --ease-in: cubic-bezier(.4, 0, 1, 1);
      --ease-out: cubic-bezier(0, 0, .2, 1);
    }
@ -14311,7 +14311,7 @@ test('leading', async () => {
      ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --leading-tight: 1.25;
      --leading-6: 1.5rem;
    }
@ -14362,7 +14362,7 @@ test('tracking', async () => {
      ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --tracking-normal: 0em;
      --tracking-wide: .025em;
    }
@ -14591,7 +14591,7 @@ test('outline', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -14985,7 +14985,7 @@ test('text', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --spacing: .25rem;
      --color-red-500: #ef4444;
      --text-sm: .875rem;
@ -15223,7 +15223,7 @@ test('shadow', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":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;
@ -15447,7 +15447,7 @@ test('inset-shadow', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
      --inset-shadow: inset 0 2px 4px #0000000d;
      --inset-shadow-sm: inset 0 1px 1px #0000000d;
@ -15674,7 +15674,7 @@ test('ring', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -15930,7 +15930,7 @@ test('inset-ring', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -16179,7 +16179,7 @@ test('ring-offset', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --color-red-500: #ef4444;
    }

@ -16357,7 +16357,7 @@ describe('spacing utilities', () => {
    let compiled = build(['px-1', 'px-4'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-4: 1rem;
      }

@ -16378,7 +16378,7 @@ describe('spacing utilities', () => {
    let compiled = build(['px-1', 'px-4'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-4: 1rem;
      }

@ -16398,7 +16398,7 @@ describe('spacing utilities', () => {
    let compiled = build(['px-0.25', 'px-1.5', 'px-2.75', 'px-0.375', 'px-2.50', 'px-.75'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing: 4px;
      }

@ -16439,7 +16439,7 @@ describe('spacing utilities', () => {
    let compiled = build(['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --spacing-sm: 8px;
        --container-sm: 256px;
      }
@ -17416,7 +17416,7 @@ describe('custom utilities', () => {
      `

      expect(await compileCss(input, ['example-12'])).toMatchInlineSnapshot(`
-        ":root {
+        ":root, :host {
          --spacing: 4px;
        }

@ -17664,7 +17664,7 @@ describe('custom utilities', () => {
    `

    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --tab-size-github: 8;
      }

@ -17708,7 +17708,7 @@ describe('custom utilities', () => {
    `

    expect(await compileCss(input, ['tab-github'])).toMatchInlineSnapshot(`
-      ":root {
+      ":root, :host {
        --tab-size-github: 8;
      }

--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@ -747,7 +747,7 @@ test('default breakpoints', async () => {
      ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 1024px;
@ -815,7 +815,7 @@ test('custom breakpoint', async () => {
      ['10xl:flex'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-10xl: 5000px;
    }

@ -842,7 +842,7 @@ test('max-*', async () => {
      ['max-lg:flex', 'max-sm:flex', 'max-md:flex'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-lg: 1024px;
      --breakpoint-md: 768px;
@ -897,7 +897,7 @@ test('min-*', async () => {
      ['min-lg:flex', 'min-sm:flex', 'min-md:flex'],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-lg: 1024px;
      --breakpoint-md: 768px;
@ -954,7 +954,7 @@ 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(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-lg: 1024px;
      --breakpoint-md: 768px;
@ -1009,7 +1009,7 @@ 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(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-lg: 1024px;
      --breakpoint-md: 768px;
@ -1071,7 +1071,7 @@ test('min, max and unprefixed breakpoints', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-lg: 1024px;
      --breakpoint-md: 768px;
@ -1456,7 +1456,7 @@ test('not', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
    }

@ -2002,7 +2002,7 @@ test('container queries', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --container-lg: 1024px;
    }

@ -2158,7 +2158,7 @@ test('variant order', async () => {
      ],
    ),
  ).toMatchInlineSnapshot(`
-    ":root {
+    ":root, :host {
      --breakpoint-sm: 640px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 1024px;
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@ -639,6 +639,45 @@ test('explicit duration and ease utilities are respected when overriding transit
  expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s')
 })

+test('shadow DOM has access to variables', async ({ page }) => {
+  await render(
+    page,
+    html`
+      <script type="text/javascript">
+        class Component extends HTMLElement {
+          constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+          }
+
+          connectedCallback() {
+            this.shadowRoot.innerHTML =
+              '<style>' +
+              document.querySelector('style').textContent +
+              '</style>' +
+              '<div class="flex gap-2" id="x">' +
+              '  <div>one</div>' +
+              '  <div>two</div>' +
+              '</div>'
+          }
+        }
+
+        customElements.define('my-component', Component)
+      </script>
+
+      <my-component id="shadow"></my-component>
+    `,
+  )
+
+  let gap = await page.evaluate(() => {
+    let shadowRoot = document.querySelector('#shadow')!.shadowRoot!
+    let x = shadowRoot.querySelector('#x')!
+    return window.getComputedStyle(x).getPropertyValue('gap')
+  })
+
+  expect(gap).toBe('8px')
+})
+
 // ---

 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')
@ -673,14 +712,13 @@ async function render(page: Page, content: string, extraCss: string = '') {
  // mouse to before running the tests.
  content = `<div id="mouse-park" class="size-12"></div>${content}`

-  await page.setContent(content)
-
  let scanner = new Scanner({})
  let candidates = scanner.scanFiles([{ content, extension: 'html' }])

-  await page.addStyleTag({
-    content: optimizeCss(build(candidates)),
-  })
+  let styles = optimizeCss(build(candidates))
+
+  content = `<style type="text/css">${styles}</style>${content}`
+  await page.setContent(content)

  await page.locator('#mouse-park').hover()