mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
3e9cf87adf
Discovered while triaging #17556 This PR improves the `color-mix(...)` polyfill to ensure it works when a theme key links to another theme key via a `var(...)` call. Imagine this setup: ```css @theme { --color-red: var(--color-red-500); --color-red-500: oklch(63.7% 0.237 25.331); } @source inline("text-red/50"); ```` Since `--color-red` will link to `--color-red-500` _which is also a known theme variable_, we can inline the value of `--color-red-500` into the fallback now: ```css .text-red\\/50 { color: var(--color-red); } @supports (color: color-mix(in lab, red, red)) { .text-red\\/50 { color: color-mix(in oklab, var(--color-red) 50%, transparent); } } ``` This will allow for slightly less confusing behavior. The code added also handles recursive definitions where a color is linking to another color that is again linking to the first one (by adding a `Set` to keep track of already seen variable names). ## Test plan - Added unit test
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.