Incompatibility with prettier-plugin-tailwindcss

[jeannen]

Hey!

When used with prettier-plugin-tailwindcss module, it makes it stop working. The attributes are properly organized, but the class names inside the class attribute don't move.

Would be nice to fix it, we can't use the module otherwise (or have to choose one or the other) :(

I tried on a brand new project using the lastest versions.

Here is the prettier config:

{
    "trailingComma": "all",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "bracketSameLine": false,
    "printWidth": 1000,
    "vueIndentScriptAndStyle": true,
    "singleAttributePerLine": false,
    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-attributes"],
    "attributeGroups": ["^(:|v-)is$", "^v-for$", "^v-(if|else-if|else|show|cloak)$", "^v-(once|pre|memo)$", "^:?id$", "^:?key$", "^:?ref$", "^(v-)?slot$", "^#", "^v-model$", "^v-(?!bind|on|html|text)", "^class$", "^(v-bind)?:class$", "^((v-bind)?:)?(?!data-|v-|:|@|#)", "$DEFAULT", "^((v-bind)?:)?data-", "^v-bind$", "^v-on", "^@", "^v-html$", "^v-text$"]
}

If I remove prettier-plugin-organize-attributes, the tailwind one works.

[dolpox]

Refer to prettier-plugin-tailwindcss documentation.

The prettier-plugin-tailwindcss must come last.

// .prettierrc

{
  // ..
  "plugins": [
   "prettier-plugin-organize-attributes",
    "prettier-plugin-tailwindcss" // MUST come last
  ]
}