Incompatibility with other Prettier plugins

[cmalard]

tailwindlabs/prettier-plugin-tailwindcss#31

Workaround: tailwindlabs/prettier-plugin-tailwindcss#31 (comment)

[NiklasPor]

Interesting, didn't know that a workaround actually exists.

[cmalard]

It is not actually, or failed to understand how Prettier manages it ^^"
After few hours on it, I've just the feeling that we are fighting against Prettier will that do not want to do anything related to sort through it ^^"

[cmalard]

Waiting for angular-eslint/angular-eslint#1066, I went for a dirty solution 🙈
-> I run Prettier multiple times, one for each plugin 😅

It doesn't work in IDEs that runs Prettier with all plugins at the same time, so I'm relying on husky & lint-staged to run it automatically before committing (I was already using them to run Prettier, ESLint & other stuff).

• package.json

  "scripts": {
    ...
    "prettier": "prettier . --ignore-unknown --write --plugin=prettier-plugin-organize-attributes && prettier . --ignore-unknown --write --plugin=prettier-plugin-tailwindcss",
    "prettier:check": "prettier . --ignore-unknown --check --plugin=prettier-plugin-organize-attributes && prettier . --ignore-unknown --check --plugin=prettier-plugin-tailwindcss",
  },
  "lint-staged": {
    "*": [
      "prettier --cache --ignore-unknown --write --plugin=prettier-plugin-organize-attributes",
      "prettier --cache --ignore-unknown --write --plugin=prettier-plugin-tailwindcss"
    ],
    "*.{ts,js,html}": "eslint --cache --fix"
  },

• and I've added this config to my .prettierrc

  {
    ....
    "plugins": ["prettier-plugin-tailwindcss"], // depends which one you prefer to run in your team's IDEs
    "pluginSearchDirs": ["./node_modules"], // seams mandatory, I added it here to not repeat it in each above commands
  }

[matchai]

This issue has since been addressed by prettier-plugin-tailwind.
You can refer to their README for configuration to get it working correctly:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins