eslint-plugin-tailwindcss: [BUG] Prettier class order don't match with eslint-plugin-tailwindcss

There is no need for a Prettier plugin if this ESLint plugin is installed. But if you still want to use both, you can disable a ESLint rule that sorts class names:

// .eslintrc
module.exports = {
  extends: [
    "...",
    "plugin:tailwindcss/recommended",
  ],
  rules: {
    "...": "...",
    "tailwindcss/classnames-order": "off"
  }
};

Note that what prettier-plugin-tailwindcss does is outside the scope of Prettier:

Prettier only prints code. It does not transform it. This is to limit the scope of Prettier. Let’s focus on the printing and do it really well!

Here are a few examples of things that are out of scope for Prettier:

• Turning single- or double-quoted strings into template literals or vice versa.
• Using + to break long string literals into parts that fit the print width.
• Adding/removing {} and return where they are optional.
• Turning ?: into if-else statements.
• Sorting/moving imports, object keys, class members, JSX keys, CSS properties or anything else. Apart from being a transform rather than just printing (as mentioned above), sorting is potentially unsafe because of side effects (for imports, as an example) and makes it difficult to verify the most important correctness goal.

Here it conflicts both ways, brandPrimary is a custom color

prettier outline-brandPrimary p-2

eslint-config-tailwindcss p-2 outline-brandPrimary

I’ll look if i can find an example with no custom themes

+1 conflicting mx-2 flex vs flex mx-2