Skip to content

Commit da2da51

Browse files
authored
Resolve values in functional utilities based on @theme options (#15623)
This PR fixes an issue where functional utilities configured via CSS don't resolve the values correctly. We always fully resolved the values as-if a `@theme inline` was used. We used to compile the following code: ```css @theme { --tab-size-github: 8; } @Utility tab-* { tab-size: --value(--tab-size); } ``` Into: ```css :root { --tab-size-github: 8; } .tab-github { tab-size: 8; } ``` But it should be referencing the variable instead: ```css :root { --tab-size-github: 8; } .tab-github { tab-size: var(--tab-size-github); } ``` However, if you used `@theme inline reference`, it should inline the value: ```css @theme inline reference { --tab-size-github: 8; } @Utility tab-* { tab-size: --value(--tab-size); } ``` This will now correctly compile to: ```css .tab-github { tab-size: 8; } ```
1 parent d2fbdf5 commit da2da51

File tree

3 files changed

+227
-55
lines changed

3 files changed

+227
-55
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Add missing `main` and `browser` fields for `@tailwindcss/browser` ([#15594](https://github.com/tailwindlabs/tailwindcss/pull/15594))
1313
- Ensure namespace reset with escaped `*` (e.g.: `--color-\*: initial;`) ([#15603](https://github.com/tailwindlabs/tailwindcss/pull/15603))
14+
- Resolve values in functional utilities based on `@theme` options ([#15623](https://github.com/tailwindlabs/tailwindcss/pull/15623))
1415
- _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596))
1516

1617
## [4.0.0-beta.9] - 2025-01-09

0 commit comments

Comments
 (0)