Order of top/right/bottom/left broke after upgrading from tailwindcss 3.2.7 to 3.3.1

[kachkaev]

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

v0.2.6

What version of Tailwind CSS are you using?

v3.3.1

What version of Node.js are you using?

v18.15.0

What package manager are you using?

pnpm

What operating system are you using?

macOS

Reproduction URL

kachkaev/website#7

Describe your issue

I am using tailwindcss and prettier-plugin-tailwindcss in a side project that does automatic dependency updates with Renovate. When the bot updated tailwindcss, prettier --check failed in CI. For some reason, the order of top / right / bottom / left (user-defined, usually clockwise) changed to bottom / left / right / top (alphabetical). I would be less surprised by this if the change was caused by an update of prettier-plugin-tailwindcss, but either way, I find it a bit confusing and potentially wrong. Here is a diff I have got by running prettier --write: kachkaev/website@eb01256. I find before more attractive and clear than after.

Feel free to close this issue if the change is intended. I must have missed the CHANGELOG item somewhere then. Still new to Tailwind!

[thecrypticace]

Hey! Thanks for using Tailwind CSS ❤️!

While this is technically an intentional change (general sorting of utilities) — we're going to update things to they're listed clockwise instead because TRBL does make just a lot more sense. :D

I'm going to keep this issue open until we've made and merged that change.

The relevant entry in the changelog is this one — in the Tailwind CSS repo:

Sort class lists deterministically for Prettier plugin (tailwindlabs/tailwindcss#10672)

[seanogdev]

I'm also seeing similar issues when using this plugin alongside Tailwind v3.3, the recommendations it gives are now incorrect & jumbled up see above

EDIT: Thanks for clarifying @thecrypticace, too fast for me :D

[probablykasper]

@thecrypticace Isn't clockwise sorting a bit inconvenient when Tailwind also has xy? For example, if the sorting is clockwise ltrb, it has to be reordered if you replace tb with x

[thecrypticace]

You make a good point. Adam was thinking the same thing too. We're still working towards making decisions on this actually which is why we haven't merged the PR for this yet.

[chiptus]

maybe a config parameter? I actually don't care about which method, just for it to be consistent. we can't update the plugin rn because it reformats so many files.

[anantakrishna]

When the bot updated tailwindcss, prettier --check failed in CI. … I would be less surprised by this if the change was caused by an update of prettier-plugin-tailwindcss

So, is it true that the plugin gets the utilities order from the main tailwindcss package? Just to be sure.

[seanogdev]

Hey @thecrypticace, no rush on this, but just wondering if any headway was made on the decision around this. We'd love to upgrade to tailwind v3.3 but we need to hold off until the prettier plugin is compatible with it.

[reinink]

Hey folks!

As you have noticed, the way we handle sorting in Tailwind CSS changed a little in v3.3. Technically it actually changed prior to v3.3 when we added deterministic sorting to Tailwind CSS (see tailwindlabs/tailwindcss#10382), however when we made that change we forgot to update the Prettier plugin integration in Tailwind CSS to also use this new sorting. We corrected this in v3.3 (see tailwindlabs/tailwindcss#10672) so it was consistent.

This particular issue prompted a lot of internal discussion, and we actually even had a PR open to make some future changes here (see tailwindlabs/tailwindcss#10947), however ultimately we could not come to a consensus on a "one true correct way" of sorting related classes, so we decided to put this change on hold for now. We may revisit this in the future (maybe for Tailwind CSS v4 🤔), but for now we've decided to just leave things as they are.

I totally appreciate that how Tailwind does it's sorting may not be how everyone would want it done — it's clearly a subjective thing if you read through some of the feedback we received in tailwindlabs/tailwindcss#10947 (see the tweet polls).

I also appreciate that it's annoying when we make changes to Tailwind CSS that cause the sorting of classes to change in your projects — it creates unnecessary diff noise. This is honestly one of the main reasons why we are being really careful not to make yet another change here until we're 100% confident in our new sorting rules.

My recommendation is to run Prettier against your whole project to make all these changes at once to minimize this diff noise. That's what I did on my projects.

I am going to close this issue for now, as this is ultimately not an issue with the Prettier sorting plugin itself, since all the sorting logic technically lives in Tailwind CSS (although I very much understand why it was posted here because it's very related).

Hope that all makes sense 🙏