[BUG] Class sorting fails with Tailwind 3.2

[gregsullivan]

Upgrading to Tailwind 3.2 causes class sorting to no longer work:

• Custom class names are still moved to the beginning
• Tailwind classes are not sorted in any way

To Reproduce

Upgrade to Tailwind 3.2

Expected behavior

Class names would continue to be sorted when using Tailwind 3.2.

Environment

• OS: macOS
• Softwares + version used:
  • tailwindcss: 3.2.1
  • eslint-plugin-tailwindcss: 3.6.2

eslint config file or live demo

If you are unable to trivially reproduce the problem, I would be happy to create a repository with a minimal reproduction of the bug.

---

Thanks for all of your work on this plugin!

[francoismassart]

👋🏻
I’m on holiday ATM but next task will be to fix both classnames ordering and check support of the new features of Tailwind CSS v3.2.0 🙂
In the meantime, you can disable the rule and optionally replace the ordering by the prettier plugin.

[gregsullivan]

My apologies for bothering you during your holiday!

I haven't needed to disable the rule, as it doesn't have any negative effect when left on—it just isn't triggered except by custom classes being anywhere but the beginning of the class list. (I can't use Prettier in my case, as I'm using your plugin for class sorting in PHP templates as part of a WordPress theme, and my understanding is that Prettier won't support that use case for the foreseeable future, if ever.)

I'm comfortable waiting for a future release and updating then to reenable class sorting.

Thanks again!

[vedmant]

I have the same issue, I was doing some manipulation with configuration and sorting started to work for a moment, but then it stopped again.

Update: Looks like downgrading to 3.4.4 makes it work, but it works much slower in this case. Still is better to have it working even if it's slow and sorting is a bit different.

[boompikachu]

Mine works in release version 3.5.2

[francoismassart]

I've been working on this, in the last few days but I'm struggling with some edge cases like when I'm using the typography plugin. Running the same simple code in prettier-plugin-tailwindcss internally generates 88 rules on which is based the ordering...
But the same code on eslint-plugin-tailwindcss generates 123 rules which ruins the ordering process.

UPDATE caused by a different version of a node_modules 😅

[gregsullivan]

Happy to see your update regarding node_modules! The 0.5.8 release of Tailwind Typography reduces the number of generated rules when using a simple prose class, so that might explain what happened there.

Thanks again for all your work on this!

[francoismassart]

@gregsullivan , @vedmant , @boompikachu , @patrikholcak

I just published a new beta version which should support Tailwind CSS up to 3.2.3 as well as fixed ordering for older Tailwind CSS version.

Could you try it out via:

1. npm i -D eslint-plugin-tailwindcss@3.7.0-beta.0
2. Test it on your own projects
3. Share your feedback in the comments ?

MR: #176

Thank you for your feedback

[gregsullivan]

Class names are now being sorted as expected—thanks very much for all of your work on this!

[francoismassart]

Version 3.7.0 has been released and it should fix the issue

npm i -D eslint-plugin-tailwindcss
or
npm i -D eslint-plugin-tailwindcss@3.7.0

If the issue persists, please open a new ticket.

Cheers.