No description
d643d79f4b
Resolves #14772. This PR fixes an issue where utilities like `ps-2` were sorted earlier in the generated CSS than `px-3`, causing `ps-2` to not override `px-3` as expected. This happened because `px-3` uses `padding-left` and `padding-right`, and `ps-2` uses `padding-inline-start`, and in `property-order.ts` we sort those properties as follows: ```js ... 'padding', 'padding-inline', 'padding-block', 'padding-inline-start', 'padding-inline-end', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', ... ``` Since `padding-left` and `padding-right` both appear later than `padding-inline-start`, the `px-3` utility is sorted later in the CSS since all of its properties are later in the sort order than all of properties in `ps-2`. To fix this, I'm using our internal `--tw-sort` property to tell Tailwind to sort the `px-3` utility as if it used `padding-inline` to ensure that it's sorted earlier in the CSS. This PR applies this same fix for the `padding` utilities, `scroll-margin` utilities, and `scroll-padding` utilities. No changes have been made to the `margin` utilities because we were already handling this correctly there. Here you can see that `pl-2` overrides `px-6` as you'd expect: <img width="1041" alt="image" src="https://github.com/user-attachments/assets/fb330536-2131-4de8-a584-62edf380148f"> …and now with the change in this PR, `ps-2` also overrides `px-6` as you'd expect: <img width="1043" alt="image" src="https://github.com/user-attachments/assets/c6799416-9c80-4fd5-bce4-ea1e4da53968"> --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
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.