Incompatibility with other Prettier plugins

To make this plugin work we had to use private Prettier APIs that can only be used by a single plugin at once. This means this plugin is incompatible with other Prettier plugins that are using the same APIs.

This GitHub issue will serve as a place to keep track of which Prettier plugins are incompatible — and hopefully we’ll eventually find some workarounds, or even a proper long term solution. 👍

Known incompatibilities

• @trivago/prettier-plugin-sort-imports
• prettier-plugin-organize-imports
• prettier-plugin-svelte (see below)
• prettier-plugin-twig-melody

prettier-plugin-svelte

We’ve bundled the prettier-plugin-svelte directly into prettier-plugin-tailwindcss, so if you’d like to use this plugin with Svelte, just uninstall prettier-plugin-svelte and everything should work as expected.

Workarounds

While I have not tested it yet, @Mattinton provided one possible workaround in this comment.

[reinink]

Hey folks! 👋

So just an update on the Prettier plugin compatibility situation. We’ve just released a new beta version of prettier-plugin-tailwindcss which improves (or at least we hope it does 😅) compatibility with specific other Prettier plugins, including:

• prettier-plugin-svelte
• prettier-plugin-astro
• @trivago/prettier-plugin-sort-imports
• prettier-plugin-organize-imports

We’ve taken a new approach with our Prettier plugin where we no longer bundle any third-party Prettier plugins (including the Svelte plugin — more on that below). And, through a safe list, we’ve explicitly added support for the above plugins which currently have known incompatibilities.

We’ve done this by automatically detecting if one of these plugins is installed and enabled in your project, and if it is, we do some magic behind the scenes in our plugin to make sure these plugins still work.

The one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you’ll need to explicitly disable the pluginSearchDirs option, and define each of your Prettier plugins in the plugins array:

// .prettierrc
{
  // ..
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ],
  "pluginSearchDirs": false
}

For Svelte users, we no longer bundle the prettier-plugin-svelte plugin within our plugin, so you’ll need install and enable it using the instructions above.

For Astro users, this new release supports prettier-plugin-astro, which you can install in the same way.

We’ve released this updated plugin as a beta version since we’re not 100% sure on this approach quite yet, and would really appreciate your help testing it out. You can install it using the beta tag:

npm install prettier-plugin-tailwindcss@beta

Let me know how it goes! 💪

[rwwagner90]

@rwwagner90 It’s not that this plugin is incompatible with prettier-plugin-astro, but this plugin only works with a few extensions (such as vue, html, etc).

Would it be possible to add astro support?