Consider using `loadDesignSystem` from `@tailwindcss/node`

Hey again 👋

[@tailwindcss/node](https://npmx.dev/package/@tailwindcss/node) package has `__unstable__loadDesignSystem` export which has a lot of nice functionality.

For example to sort classes the *official* way, you can have as little code as this:

```ts
import { __unstable__loadDesignSystem as loadDesignSystem } from '@tailwindcss/node'

const designSystem = await loadDesignSystem('@import "tailwindcss";', { base: process.cwd() })

export default function sortClassName(className: string) {
const classNames = [...new Set(className.trim().split(/\s+/).filter(Boolean))]

return designSystem
.getClassOrder(classNames)
.map(([name, order], index) => ({ index, name, order }))
.sort((a, b) => {
if (a.order === null && b.order === null) {
return a.index - b.index
}

if (a.order === null) {
return -1
}

if (b.order === null) {
return 1
}

if (a.order === b.order) {
return a.index - b.index
}

return a.order < b.order ? -1 : 1
})
.map(({ name }) => name)
.join(' ')
}
```

This will sort string by tailwind classes and unknown ones.

Just wanted to share.

I was building a cli tool to sort my classes but found out about eslint plugins and decided to use them instead.

Additionally I also found [eslint-plugin-tailwind-canonical-classes](https://npmx.dev/package/eslint-plugin-tailwind-canonical-classes) which is a great example of `loadDesignSystem` usage with [synckit](https://npmx.dev/package/synckit) worker (to enable async for `loadDesignSystem` in eslint).

Personally I don't have time to roll eslint class order plugin with `loadDesignSystem` and `synckit` but maybe it will give you inspiration to give it a shot or a way to simplify your rules! 🙌