[BUG] classnames-order: Mismatch with prettier-plugin-tailwindcss with officialSorting enabled

[lensbart]

When running this plugin and then the official Prettier plugin, I see the following mismatches:

1. • ESLint
     unselectable absolute box-content cursor-pointer select-none rounded-full p-1.5 text-center transition-colors transition-transform duration-300
   • Prettier
     unselectable transition-colors transition-transform absolute box-content cursor-pointer select-none rounded-full p-1.5 text-center duration-300
2. • ESLint
     border-transparent before:border-transparent before:border-l-blue-mid before:border-t-blue-mid after:border-t-blue-subtle after:border-l-blue-subtle dark:before:border-transparent dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40
   • Prettier
     dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40 border-transparent before:border-transparent before:border-l-blue-mid before:border-t-blue-mid after:border-t-blue-subtle after:border-l-blue-subtle dark:before:border-transparent
3. • ESLint
     absolute -right-1 -top-4 cursor-pointer rounded-tr-sm rounded-bl-sm py-2 px-2.5 text-sm text-neutral-750 opacity-0 transition-opacity group-hover:opacity-50 group-hover:hover:opacity-100 theme-contrast:text-black
   • Prettier
     opacity-0 transition-opacity group-hover:opacity-50 group-hover:hover:opacity-100 absolute -right-1 -top-4 cursor-pointer rounded-tr-sm rounded-bl-sm py-2 px-2.5 text-sm text-neutral-750 theme-contrast:text-black
4. • ESLint
     relative flex cursor-pointer items-center justify-center pb-2 pt-2 text-yellow-darker/50 transition-colors hover:text-yellow-darker dark:text-yellow-strong/70 dark:hover:text-yellow-strong
   • Prettier
     text-yellow-darker/50 transition-colors dark:text-yellow-strong/70 relative flex cursor-pointer items-center justify-center pb-2 pt-2 hover:text-yellow-darker dark:hover:text-yellow-strong
5. • ESLint
     relative flex cursor-pointer items-center justify-center pb-2 pt-2 text-yellow-darker/50 transition-colors hover:text-yellow-darker dark:text-yellow-strong/70 dark:hover:text-yellow-strong
   • Prettier
     text-yellow-darker/50 transition-colors dark:text-yellow-strong/70 relative flex cursor-pointer items-center justify-center pb-2 pt-2 hover:text-yellow-darker dark:hover:text-yellow-strong
6. • ESLint
     group transition-colors relative my-0 -mx-1.5 block rounded px-1.5 pt-3.5 pb-4 duration-150 hover:text-black active:top-0 dark:hover:text-white
   • Prettier
     transition-colors group relative my-0 -mx-1.5 block rounded px-1.5 pt-3.5 pb-4 duration-150 hover:text-black active:top-0 dark:hover:text-white
7. • ESLint
     pointer-events-none fixed left-0 top-0 h-screen w-screen bg-neutral-70 opacity-70 theme-contrast:bg-white dark:bg-gray-780
   • Prettier
     opacity-70 pointer-events-none fixed left-0 top-0 h-screen w-screen bg-neutral-70 theme-contrast:bg-white dark:bg-gray-780
8. • ESLint
     border-transparent before:border-t-blue-subtle before:border-l-blue-subtle after:border-t-blue-subtle after:border-l-blue-subtle dark:before:border-t-blue-dark/40 dark:before:border-l-blue-dark/40 dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40
   • Prettier
     dark:before:border-t-blue-dark/40 dark:before:border-l-blue-dark/40 dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40 border-transparent before:border-t-blue-subtle before:border-l-blue-subtle after:border-t-blue-subtle after:border-l-blue-subtle
9. • ESLint
     border-none bg-blue-subtle text-black dark:bg-blue-dark/40 dark:text-blue-strong
   • Prettier
     dark:bg-blue-dark/40 border-none bg-blue-subtle text-black dark:text-blue-strong
10. • ESLint
      m-3 inline-block h-4 w-4 rounded-full transition-transform
    • Prettier
      transition-transform m-3 inline-block h-4 w-4 rounded-full

Using the latest versions of both plugins:

• eslint-plugin-tailwindcss@3.5.0
• prettier-plugin-tailwindcss@0.1.11

[mryechkin]

I'm seeing this as well with the latest version - it was working fine before the last release

[francoismassart]

I just tested it with

npm i eslint-plugin-tailwindcss@3.6.0-beta.1

and I get the same ordering from eslint that from prettier

like in https://play.tailwindcss.com/9LSmUqgqlf?layout=horizontal after using "Tidy 🌟 " button

[francoismassart]

Should be fixed in the latest release 3.6.0

Make sure to:

1. Update the eslint-plugin-tailwindcss package
2. Restart your editor
3. Report any issue on this repo