ca7b10e7d3
Closes #16945 This PR changes the `--theme(…)` function now return CSS `var(…)` definitions unless used in places where `var(…)` is not valid CSS (e.g. in `@media (width >= theme(--breakpoint-md))`): ```css /* input */ @theme { --color-red: red; } .red { color: --theme(--color-red); } /* output */ :root, :host { --color-red: red; } .red { color: var(--color-red); } ``` Furthermore, this adds an `--theme(… inline)` option to the `--theme(…)` function to force the resolution to be inline, e.g.: ```css /* input */ @theme { --color-red: red; } .red { color: --theme(--color-red inline); } /* output */ .red { color: red; } ``` This PR also changes preflight and the default theme to use this new `--theme(…)` function to ensure variables are prefixed correctly. ## Test plan - Added unit tests and a test that pulls in the whole preflight under a prefix theme. |
||
|---|---|---|
| .. | ||
| @tailwindcss-browser | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||