tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

Don't create bare spacing utilities with invalid multiples (#14962 )

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>

2024-11-11 13:45:37 -05:00

.github

Add CODEOWNERS file (#14701 )

2024-10-17 09:05:44 -04:00

crates

Prepare v4.0.0-alpha.32 (#14954 )

2024-11-11 11:05:22 -05:00

integrations

Remove input borders by default (#14929 )

2024-11-08 15:29:41 -05:00

packages

Don't create bare spacing utilities with invalid multiples (#14962 )