Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

work-break typo (and also a sort order suggestion) #14715

Closed
aaronadamsCA opened this issue Oct 18, 2024 · 1 comment
Closed

work-break typo (and also a sort order suggestion) #14715

aaronadamsCA opened this issue Oct 18, 2024 · 1 comment

Comments

@aaronadamsCA
Copy link
Contributor

What version of Tailwind CSS are you using?

v4.0.0-alpha.28

Reproduction URL

https://play.tailwindcss.com/AU8RQ3P1UP

Describe your issue

The only true bug in this bug report is this word-break typo that's been lurking since the start of v4:

tailwindcss/packages/tailwindcss/src/property-order.ts

Lines 170 to 176 in b701ed6

'text-overflow',
'hyphens',
'white-space',
'text-wrap',
'overflow-wrap',
'work-break',

But instead of just fixing that, what I actually want to bring up is the sort order itself, which feels a bit off:

<div class="text-balance bg-linear-to-b from-red-500 to-blue-500 p-8 text-base leading-7 text-white">Balance</div>
<div class="text-pretty bg-linear-to-b from-red-500 to-blue-500 p-8 text-base leading-7 text-white">Pretty</div>

I feel like these six properties should move further down the sort order to be with the rest of the text properties.
@thecrypticace thecrypticace mentioned this issue Oct 24, 2024
Closed
@adamwathan adamwathan mentioned this issue Oct 24, 2024
Merged
adamwathan added a commit that referenced this issue Oct 24, 2024
@adamwathan
Sort text wrapping utilities with typography utilities (#14787)
1eab49d 
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>
@RobinMalfait
Copy link
Member

Hey! This should be fixed by #14787, and is available in the latest alpha release.

You can already try it by using npm install tailwindcss@next.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix word-break typo tailwindlabs/tailwindcss
2 participants
@aaronadamsCA @RobinMalfait