Skip to content

Commit d1fd645

Browse files
Proposal: Allow overwriting static utilities that have a namespace (#18056)
This PR attempts to move static utilities that are overwriteable by a theme value to be a fallback rather than a conflicting implementation. The idea is to allow a theme value to take presedence over that static utility _and cause it not to generate_. For example, when overwriting the `--radius-full` variant, it should ensure that the default `rounded-full` no longer emits the `calc(infinity * 1px)` declaration: ```ts expect( await compileCss( css` @theme { --radius-full: 99999px; } @tailwind utilities; `, ['rounded-full'], ), ).toMatchInlineSnapshot(` ":root, :host { --radius-full: 99999px; } .rounded-full { border-radius: var(--radius-full); }" `) ``` This allows anyone who wants `--radius-full` to be a CSS variable to simply define it in their theme: ```css @theme { /* Make `--radius-full` a CSS variable without the utility generating two CSS classes */ --radius-full: calc(infinity * 1px); } ``` The idea is to extend this pattern across all functional utilities that also have static utilities that can collide with the namespace. This gives users more control over what they want as CSS variables when the defaults don't work for them, allowing them to resolve #16639 and #15115 in user space. You may now find yourself thinking "but Philipp, why would someone want to be able to overwrite `--animate-none`. `none` surely always will mean no animation" and I would agree [but it's already possible right now anyways so this is not a new behavior! This PR just cleans up the generated output.](https://play.tailwindcss.com/StnQqm4V2e) --------- Co-authored-by: Robin Malfait <[email protected]>
1 parent 340b59d commit d1fd645

File tree

3 files changed

+972
-163
lines changed

3 files changed

+972
-163
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1919
- Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905))
2020
- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
2121
- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
22+
- Prevent duplicate CSS when overwriting a static utility with a theme key ([#18056](https://github.com/tailwindlabs/tailwindcss/pull/18056))
2223

2324
## [4.1.13] - 2025-09-03
2425

0 commit comments

Comments
 (0)