[BUG] Wrong sort order for custom screens sizes

[clementoriol]

Describe the bug
I have the following tailwind config that extends the screens size to add an "xs" screen size :

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...,
  theme: {
    extend: {
      screens: {
        xs: '480px',
      },
    },
  },
};

This new screen size gets sorted last, eg:

sm:text-3xl md:text-4xl xs:text-2xl

This cause specificity issues and results in the wrong styles being applied in large screens.

To Reproduce
Steps to reproduce the behavior:

1. Add a new 'xs' screen size of '480px' in the tailwind config
2. Add a xs:text-2xl sm:text-3xl md:text-4xl somewhere in the project
3. Run eslint --fix and see the wrong sort order being applied

Expected behavior
The screen-size modifiers should be sorted by size (small -> large) OR the order should be configurable

Environment (please complete the following information):

• OS: macOS 13.3
• Softwares + version used:
  • esplint-plugin-tailwindcss 3.15.1
  • tailwindcss 3.4.1
  • VSCode 1.88.1
  • Nodejs 20.9.0
  • pnpm 8.12.0