No description
1eab49d0b1
This PR implements some changes to the way we sort typography utilities, inspired by #14715. Prior to this PR, utilities like `text-balance`, `break-words`, and `text-center` were sorted very early, even before things like border utilities: ```html <div class="text-balance break-words border-2 border-blue-500 text-center indent-5 text-2xl font-medium capitalize leading-6 tracking-tight text-red-500 underline"></div> ``` This PR changes the sort order to co-locate these with other typography utilities which feels a lot more natural: ```html <div class="border-2 border-blue-500 text-center indent-5 text-2xl leading-6 font-medium tracking-tight text-balance break-words text-red-500 capitalize underline"></div> ``` I've also made some small adjustments to how other typography properties are sorted based on pairing with @reinink and just deciding what felt the most intuitive to us and matched the order we'd likely type things in manually. To test this change I temporarily added a new test to `sort.test.ts` to make sure the classes were sorted in the expected order: ```js [ // Input 'text-red-500 text-center capitalize text-2xl break-words text-balance underline font-medium tracking-tight leading-6 indent-5', // Expected 'text-center indent-5 text-2xl leading-6 font-medium tracking-tight text-balance break-words text-red-500 capitalize underline', ], ``` Didn't keep the test around because there's no real logic to test here (it just matches the order in the `property-order.ts` file) and we don't have any other tests like this. I've also made some minor unrelated changes here like deleting legacy properties from `property-order.ts` that are never used, and fixing a typo where we wrote `work-break` instead of `word-break`. --------- 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.