Improve sorting candidates containing numbers

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Use `rem` units for breakpoints by default instead of `px` ([#13469](https://github.com/tailwindlabs/tailwindcss/pull/13469))
 
+### Fixed
+
+- Improve sorting candidates containing numbers ([#13507](https://github.com/tailwindlabs/tailwindcss/pull/13507))
+
 ## [4.0.0-alpha.14] - 2024-04-09
 
 ### Fixed

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -18,11 +18,6 @@ exports[`border-* 1`] = `
   border-width: 0;
 }
 
-.border-123 {
-  border-style: var(--tw-border-style);
-  border-width: 123px;
-}
-
 .border-2 {
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -33,6 +28,11 @@ exports[`border-* 1`] = `
   border-width: 4px;
 }
 
+.border-123 {
+  border-style: var(--tw-border-style);
+  border-width: 123px;
+}
+
 .border-\\[12px\\] {
   border-style: var(--tw-border-style);
   border-width: 12px;
@@ -131,11 +131,6 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 0;
 }
 
-.border-b-123 {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 123px;
-}
-
 .border-b-2 {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 2px;
@@ -146,6 +141,11 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 4px;
 }
 
+.border-b-123 {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 123px;
+}
+
 .border-b-\\[12px\\] {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 12px;
@@ -244,11 +244,6 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 0;
 }
 
-.border-e-123 {
-  border-inline-end-style: var(--tw-border-style);
-  border-inline-end-width: 123px;
-}
-
 .border-e-2 {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: 2px;
@@ -259,6 +254,11 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 4px;
 }
 
+.border-e-123 {
+  border-inline-end-style: var(--tw-border-style);
+  border-inline-end-width: 123px;
+}
+
 .border-e-\\[12px\\] {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: 12px;
@@ -357,11 +357,6 @@ exports[`border-l-* 1`] = `
   border-left-width: 0;
 }
 
-.border-l-123 {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 123px;
-}
-
 .border-l-2 {
   border-left-style: var(--tw-border-style);
   border-left-width: 2px;
@@ -372,6 +367,11 @@ exports[`border-l-* 1`] = `
   border-left-width: 4px;
 }
 
+.border-l-123 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 123px;
+}
+
 .border-l-\\[12px\\] {
   border-left-style: var(--tw-border-style);
   border-left-width: 12px;
@@ -470,11 +470,6 @@ exports[`border-r-* 1`] = `
   border-right-width: 0;
 }
 
-.border-r-123 {
-  border-right-style: var(--tw-border-style);
-  border-right-width: 123px;
-}
-
 .border-r-2 {
   border-right-style: var(--tw-border-style);
   border-right-width: 2px;
@@ -485,6 +480,11 @@ exports[`border-r-* 1`] = `
   border-right-width: 4px;
 }
 
+.border-r-123 {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 123px;
+}
+
 .border-r-\\[12px\\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 12px;
@@ -583,11 +583,6 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 0;
 }
 
-.border-s-123 {
-  border-inline-start-style: var(--tw-border-style);
-  border-inline-start-width: 123px;
-}
-
 .border-s-2 {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: 2px;
@@ -598,6 +593,11 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 4px;
 }
 
+.border-s-123 {
+  border-inline-start-style: var(--tw-border-style);
+  border-inline-start-width: 123px;
+}
+
 .border-s-\\[12px\\] {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: 12px;
@@ -696,11 +696,6 @@ exports[`border-t-* 1`] = `
   border-top-width: 0;
 }
 
-.border-t-123 {
-  border-top-style: var(--tw-border-style);
-  border-top-width: 123px;
-}
-
 .border-t-2 {
   border-top-style: var(--tw-border-style);
   border-top-width: 2px;
@@ -711,6 +706,11 @@ exports[`border-t-* 1`] = `
   border-top-width: 4px;
 }
 
+.border-t-123 {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 123px;
+}
+
 .border-t-\\[12px\\] {
   border-top-style: var(--tw-border-style);
   border-top-width: 12px;
@@ -813,13 +813,6 @@ exports[`border-x-* 1`] = `
   border-right-width: 0;
 }
 
-.border-x-123 {
-  border-left-style: var(--tw-border-style);
-  border-right-style: var(--tw-border-style);
-  border-left-width: 123px;
-  border-right-width: 123px;
-}
-
 .border-x-2 {
   border-left-style: var(--tw-border-style);
   border-right-style: var(--tw-border-style);
@@ -834,6 +827,13 @@ exports[`border-x-* 1`] = `
   border-right-width: 4px;
 }
 
+.border-x-123 {
+  border-left-style: var(--tw-border-style);
+  border-right-style: var(--tw-border-style);
+  border-left-width: 123px;
+  border-right-width: 123px;
+}
+
 .border-x-\\[12px\\] {
   border-left-style: var(--tw-border-style);
   border-right-style: var(--tw-border-style);
@@ -958,13 +958,6 @@ exports[`border-y-* 1`] = `
   border-bottom-width: 0;
 }
 
-.border-y-123 {
-  border-top-style: var(--tw-border-style);
-  border-bottom-style: var(--tw-border-style);
-  border-top-width: 123px;
-  border-bottom-width: 123px;
-}
-
 .border-y-2 {
   border-top-style: var(--tw-border-style);
   border-bottom-style: var(--tw-border-style);
@@ -979,6 +972,13 @@ exports[`border-y-* 1`] = `
   border-bottom-width: 4px;
 }
 
+.border-y-123 {
+  border-top-style: var(--tw-border-style);
+  border-bottom-style: var(--tw-border-style);
+  border-top-width: 123px;
+  border-bottom-width: 123px;
+}
+
 .border-y-\\[12px\\] {
   border-top-style: var(--tw-border-style);
   border-bottom-style: var(--tw-border-style);

packages/tailwindcss/src/compile.ts

@@ -2,6 +2,7 @@ import { rule, type AstNode, type Rule } from './ast'
 import { type Candidate, type Variant } from './candidate'
 import { type DesignSystem } from './design-system'
 import GLOBAL_PROPERTY_ORDER from './property-order'
+import { compare } from './utils/compare'
 import { escape } from './utils/escape'
 import type { Variants } from './variants'
 
@@ -87,7 +88,7 @@ export function compileCandidates(
       // Sort by most properties first, then by least properties
       zSorting.properties.length - aSorting.properties.length ||
       // Sort alphabetically
-      (aSorting.candidate < zSorting.candidate ? -1 : 1)
+      compare(aSorting.candidate, zSorting.candidate)
     )
   })