3xl: ends up in front of xl and 2xl

[octref]

What version of prettier-plugin-tailwindcss are you using?

v0.5.10

What version of Tailwind CSS are you using?

v3.3.3

What version of Node.js are you using?

For example: v12.0.0

pnpm

For example: npm, Yarn

macOS

For example: macOS, Windows

Reproduction URL

In one TSX file, format the code below:

<div className="3xl:grid-cols-6 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"></div>

Describe your issue

I'm expecting 3xl to be at the end, but it would be formatted to be in the beginning.

[thecrypticace]

Can you share your tailwind config? This looks like you don't have a 3xl breakpoint in your project.

[adamwathan]

Hey! As @thecrypticace this sounds like a configuration issue, if you check out this Play and hit the "Tidy" button (which uses the Prettier plugin under the hood) you'll see it gets sorted correctly:

https://play.tailwindcss.com/UUvh7PqQQE

My guess is maybe the plugin isn't picking up your Tailwind configuration. Make sure you've specified your config path if it's in a non-guessable location:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/?tab=readme-ov-file#customizing-your-tailwind-config-path

Going to close this one as we can't reproduce it, but don't hesitate to post a question in our discussion forum if you are still running into issues and need help 👍