[Prettier Plugin] Incompatible with @ianvs/prettier-plugin-sort-imports when using prettier.config.js

[chrissantamaria]

👋 I noticed that, despite being listed as a compatible plugin in the README, @ianvs/prettier-plugin-sort-imports is incompatible with prettier-plugin-tailwindcss. With the Tailwind plugin listed last in the plugins array (as instructed in the README), it still takes precedence over the sort plugin and effectively disables it.

Notably, this only occurs when using a JS-based prettier.config.js file (where plugins are require'd) rather than a JSON-based .prettierrc. I suspect this is due to the require changing how plugins are loaded, but I'm not familiar with the internals of either plugin to be sure.

Some alternatives I tried:

• using @trivago/prettier-plugin-sort-imports instead - this has the same issue
• using a different package manager - npm v8.18, Yarn v1.22 and pnpm v8.3 all have the same issue
• using prettier-plugin-tailwindcss v0.2.3, as this was the first version to officially support @ianvs/prettier-plugin-sort-imports - no luck
• creating a custom plugin combining aspects of both - this actually did work, but is far from elegant

I've created a minimal reproduction repo to demonstrate my particular setup a bit more clearly.

If this is expected functionality, it may be a good idea to make a note of the differences between prettier.config.js and .prettierrc in prettier-plugin-tailwindcss's README (especially given that it shows examples using both).

Happy to open a GitHub issue if that's easier, though I used a discussion since that was advised before a bug is confirmed. Happy to clarify any details - thanks!

[kyrregjerstad]

@chrissantamaria did you ever find a good workaround for this?

[chrissantamaria]

should be fixed in tailwindlabs/prettier-plugin-tailwindcss#158!