Custom Screen Breakpoints Order Causes Unexpected Override Due to Alphabetical Sorting

[liuhuakawaii]

Description:

When using custom screen breakpoint names with non-alphabetical size progression, the generated CSS media queries appear to be ordered alphabetically rather than by actual breakpoint values. This leads to unexpected overrides between breakpoints.

Steps to Reproduce:

Define custom screens in tailwind.config.js:

screens: {
  xs: '1024px',
  sm: '1280px',
  xmd: '1366px',
  md: '1400px',
  lg: '1600px',
  xl: '1920px'
}

Use conflicting utilities across breakpoints:

<div class="xs:h-[28px] sm:h-[30px] md:h-[30px] lg:h-[36px] lg:py-2">

Observe compiled CSS order:

/* lg:1600px (generated earlier due to 'l' < 'x' in alphabetical order) */
@media (min-width: 1600px) {
  .lg\:h-\[36px\] { height: 36px; }
}

/* xs:1024px (generated later) */
@media (min-width: 1024px) {
  .xs\:h-\[28px\] { height: 28px; }
}

Expected Behavior:

Breakpoints should cascade based on their actual numeric values regardless of name. At 1920px:

lg:h-[36px] should override xs:h-[28px]

lg:py-2 works correctly because there's no conflicting utility

Actual Behavior:

xs:h-[28px] overrides lg:h-[36px] at 1920px because its media query appears later in CSS

Utilities work correctly only when breakpoint names happen to be alphabetically ordered (e.g., sm < md < lg)

Investigation Findings:

Renaming lg to wlg changes the CSS order, confirming alphabetical sorting

Documentation mentions alphabetical ordering (Reference):

"Breakpoints are sorted alphabetically [...] this means [...] breakpoints with longer names will come after shorter ones"

Feature Request:
Provide a mechanism to explicitly define media query generation order, either through:

Array-based screen configuration

screens: [
  { name: 'xs', value: '1024px' },
  { name: 'sm', value: '1280px' },
  // ...etc
]

Priority number system

Automatic value-based sorting