mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
98c279d1fb
Closes #14960 When we moved to the `--spacing` multiples scale, we seemingly overlooked a bail that caused us to use non-numerical values as a spacing multiple. This caused the `-translate-x-full` and `-translate-y-full` utilities to treat `full` as a valid multiple in our spacing scale and created invalid CSS: ```css .-translate-x-full { --tw-translate-x: calc(var(--spacing) * -x-full); --tw-translate-y: calc(var(--spacing) * -x-full); translate: var(--tw-translate-x) var(--tw-translate-y); } ``` ## Test plan I reproduced the issue in our Vite playground and then created a failing test case. It requires a `--spacing` `@theme` variable to be defined so I've added this as a test case now in the unit tests. I also audited all places that are using `calc()` and wrapping some numbers. In doing so I found a few other broken cases: - `-translate-x-full` - `-translate-y-full` - `-space-x-full` - `-space-y-full` - `-inset-full` I validated that the fix indeed works and no longer creates broken CSS definitions for these cases: <kbd><img width="1405" alt="Screenshot 2024-11-11 at 19 33 51" src="https://github.com/user-attachments/assets/99072112-9ed4-4456-bad8-5679679e7198"></kbd> --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>