Sort text wrapping utilities with typography utilities (#14787)

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 <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Don't convert underscores in the first argument to `var()` and `theme()` to spaces ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776), [#14781](https://github.com/tailwindlabs/tailwindcss/pull/14781))
+- Sort text alignment and wrapping utilities with typography utilities ([#14787](https://github.com/tailwindlabs/tailwindcss/pull/14787))
+- Sort line height and letter spacing utilities before text color utilities ([#14787](https://github.com/tailwindlabs/tailwindcss/pull/14787))
 
 ## [4.0.0-alpha.29] - 2024-10-23
 

packages/tailwindcss/src/property-order.ts

@@ -155,7 +155,6 @@ export default [
   '--tw-divide-y-reverse',
   'divide-style',
   'divide-color',
-  '--tw-divide-opacity',
 
   'place-self',
   'align-self',
@@ -171,14 +170,6 @@ export default [
 
   'scroll-behavior',
 
-  'text-overflow',
-  'hyphens',
-  'white-space',
-
-  'text-wrap',
-  'overflow-wrap',
-  'work-break',
-
   'border-radius',
   'border-start-radius', // Not real
   'border-end-radius', // Not real
@@ -215,10 +206,7 @@ export default [
   'border-bottom-color',
   'border-left-color',
 
-  '--tw-border-opacity',
-
   'background-color',
-  '--tw-bg-opacity',
 
   'background-image',
   '--tw-gradient-position',
@@ -263,24 +251,29 @@ export default [
 
   'font-family',
   'font-size',
+  'line-height',
   'font-weight',
+  'letter-spacing',
+  'text-wrap',
+  'overflow-wrap',
+  'word-break',
+  'text-overflow',
+  'hyphens',
+  'white-space',
+
+  'color',
   'text-transform',
   'font-style',
   'font-stretch',
   'font-variant-numeric',
-  'line-height',
-  'letter-spacing',
-  'color',
-  '--tw-text-opacity',
   'text-decoration-line',
   'text-decoration-color',
   'text-decoration-style',
   'text-decoration-thickness',
   'text-underline-offset',
   '-webkit-font-smoothing',
 
-  'placeholder-color', // Not real
-  '--tw-placeholder-opacity',
+  'placeholder-color',
 
   'caret-color',
   'accent-color',
@@ -301,7 +294,6 @@ export default [
   '--tw-inset-shadow-color',
   '--tw-inset-ring-shadow',
   '--tw-inset-ring-color',
-  '--tw-ring-opacity',
   '--tw-ring-offset-width',
   '--tw-ring-offset-color',