[BUG] Sorting classes does not work the same way as Tailwind's sort order

Describe the bug The docs for this plugin state that it uses “order process from the official prettier-plugin-tailwindcss”. However, while trying this plugin out for the first time today, most of the examples given on that page are not sorted the same way using this plugin:

---

Tailwind docs:

Actual Results: <div class="flex h-24 p-3 ml-4 text-gray-700 border-2 border-gray-300 shadow-md"></div>

---

Tailwind Docs:

Actual Results: <div class="scale-125 opacity-50 hover:opacity-75 hover:scale-150"></div>

---

Tailwind Docs:

Actual Results: <div class="grid grid-cols-2 lg:grid-cols-4 sm:grid-cols-3"></div>

---

Is my end somehow set up wrong? Or is this plugin not actually meant to use the tailwind class order?

My .eslint.rc config file:

{
	"plugins": ["tailwindcss"],
	"extends": ["plugin:tailwindcss/recommended"]
}

Expected behavior This plugin should be sorting classes in the same way listed in the Tailwind docs.

Environment (please complete the following information):

• OS: MacOS
• “eslint”: “^8.22.0”,
• “eslint-plugin-tailwindcss”: “^3.6.0”,
• VSCode 1.70.2

[francoismassart]

@darylknight , @cmalard , @markflorkowski , @locona , @sawirricardo

Sorry for the long waiting period, I mostly work on this during my free time 😅

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

[locona]

@darylknight here https://github.com/3-shake/3design-ui/pull/803