No description
Find a file
Philipp Spiess 98c279d1fb
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) 2024-11-11 13:45:37 -05:00
patches Add standalone CLI (#14270) 2024-09-02 15:23:46 +02:00
playgrounds Don't create bare spacing utilities with invalid multiples (#14962) 2024-11-11 13:45:37 -05:00
scripts Fix integration tests on Windows (#14824) 2024-10-30 11:26:29 +00:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Don't create bare spacing utilities with invalid multiples (#14962) 2024-11-11 13:45:37 -05:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Update @playwright/test 1.48.0 → 1.48.2 (patch) (#14876) 2024-11-05 16:56:53 +01:00
pnpm-lock.yaml Fix lockfile 2024-11-11 13:50:42 +01:00
pnpm-workspace.yaml Revert lightningcss change (#14919) 2024-11-08 09:58:00 -05:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
rust-toolchain.toml Bring back rust-toolchain.toml (#14585) 2024-10-03 14:37:24 +00:00
turbo.json Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


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.