Incompatibility with other Prettier plugins

[reinink]

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.

[jacobwgillespie]

I originally opened issue #26 about prettier-plugin-organize-imports - in that specific case, I'm able to work around the incompatibility for now by monkey-patching prettier-plugin-tailwindcss so that each overlapping parser uses the preprocess function from prettier-plugin-organize-imports, like so:

// merged-prettier-plugin.js

const tailwind = require('prettier-plugin-tailwindcss')
const organizeImports = require('prettier-plugin-organize-imports')

const combinedFormatter = {
  ...tailwind,
  parsers: {
    ...tailwind.parsers,
    ...Object.keys(organizeImports.parsers).reduce((acc, key) => {
      acc[key] = {
        ...tailwind.parsers[key],
        preprocess(code, options) {
          return organizeImports.parsers[key].preprocess(code, options)
        },
      }
      return acc
    }, {}),
  },
}

module.exports = combinedFormatter

// .prettierrc.js

module.exports = {
  plugins: [require('./merged-prettier-plugin.js')],
  ...
}

This works for now because, from what I can tell, prettier-plugin-tailwindcss doesn't set a preprocessor, and prettier-plugin-organize-imports does all of its work in the preprocessor.

Looking forward to whatever eventual fix removes the need for the patch!

[ianjamieson]

Might be a bit of an edge case. But I am using Laravel and subsequently Blade template files.

So that prettier runs on these files I am using @shufo/prettier-plugin-blade. But as this issue suggests, Tailwind classes are not sorted when run with this plugin.

[RobbieTheWagner]

Seems this one might be incompatible as well https://github.com/withastro/prettier-plugin-astro

[sandraroz]

I'm in a vue 3 project where we use pug and the plugin is not really working with my current setup. I'm also using vetur as a vscode extension that is set to format everything with prettier (html, pug, etc).

Something strange is happening because if I add new lines or extra tabs, the formatter will kick in on save and do its job. However it does not format the order of tailwind classes, even in regular html template tags.

The only time I got the tailwind order to work was by doing the npx prettier --write ./some/file.vue. This only worked in a regular html template tag, not pug.

I tried removing the dependency for the prettier pug plugin and testing it out and it still does not order classes. Is it conflicting with something else?

	"dependencies": {
		"core-js": "^3.8.3",
		"ionicons": "^6.0.1",
		"vue": "^3.2.13",
		"vue-i18n": "^9.2.0-beta.30",
		"vue-router": "^4.0.3",
		"vuex": "^4.0.0"
	},
	"devDependencies": {
		"@babel/core": "^7.12.16",
		"@babel/eslint-parser": "^7.12.16",
		"@prettier/plugin-pug": "^1.19.2",
		"@vue/cli-plugin-babel": "~5.0.0-rc.2",
		"@vue/cli-plugin-eslint": "~5.0.0-rc.2",
		"@vue/cli-plugin-router": "~5.0.0-rc.2",
		"@vue/cli-plugin-vuex": "~5.0.0-rc.2",
		"@vue/cli-service": "~5.0.0-rc.2",
		"@vue/eslint-config-airbnb": "^6.0.0",
		"autoprefixer": "^10.4.2",
		"eslint": "^7.32.0",
		"eslint-plugin-import": "^2.25.3",
		"eslint-plugin-vue": "^8.0.3",
		"eslint-plugin-vuejs-accessibility": "^1.1.0",
		"postcss": "^8.4.5",
		"prettier": "^2.5.1",
		"prettier-plugin-tailwindcss": "^0.1.7",
		"pug": "^3.0.2",
		"pug-plain-loader": "^1.1.0",
		"sass": "^1.32.7",
		"sass-loader": "^12.0.0",
		"tailwindcss": "^3.0.18"
	}

[dacodekid]

@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).

[darylknight]

Subscribing to this. Working with Craft CMS, it's disappointing to see this is incompatible with prettier-plugin-twig-melody.

[RobbieTheWagner]

@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?

[doubled3264]

plugin not work when i use @apply on .scss file ? :(

[JamesIves]

Seem to be having problems when parsing Angular HTML files too

[nunocasteleira]

I don't know if it is also related to this, but I can't have prettier-plugin-tailwindcss working alongside @tailwindcss/forms. It says it doesn't find it.

[joshmedeski]

@nunocasteleira this issue is related to prettier plugins conflicting with each other.

If your system can't find @tailwindcss/forms try reinstalling it with npm install @tailwindcss/forms.

If you continue to have problems open an issue on the forms repo.

[nunocasteleira]

If your system can't find @tailwindcss/forms try reinstalling it with npm install @tailwindcss/forms.

Yes, but the problem arises when prettier-plugin-tailwindcss is installed. If I uninstall it, I'm able to run prettier (with @tailwind/forms also installed), whereas it fails with prettier plugin tailwindcss added to my package.json.

[joshmedeski]

@nunocasteleira Can you share your prettier config file with us?

[christiaansnoei]

Might be a bit of an edge case. But I am using Laravel and subsequently Blade template files.

So that prettier runs on these files I am using @shufo/prettier-plugin-blade. But as this issue suggests, Tailwind classes are not sorted when run with this plugin.

Did you find a way to get this working?

[nunocasteleira]

@joshmedeski I have a very minimal prettierrc, it's a Vue project:

{
  "endOfLine": "lf",
  "singleQuote": true,
  "printWidth": 120
}

[joshmedeski]

@nunocasteleira I'm stumped. I don't know why @tailwindcss/forms has any relationship with prettier-plugin-tailwindcss.

[nunocasteleira]

I can share the repo if you want.

…

On 21 Apr 2022, 22:01 +0100, Josh Medeski ***@***.***>, wrote: @nunocasteleira I'm stumped. I don't know why @tailwindcss/forms has any relationship with prettier-plugin-tailwindcss. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[scott-lc]

Also appears to be incompatible with prettier-plugin-jsdoc.

My prettier config:

{
  "$schema": "http://json.schemastore.org/prettierrc",
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "printWidth": 100,
  "quoteProps": "consistent",
  "singleQuote": true,
  "trailingComma": "none",
  "useTabs": false,

  "overrides": [
    {
      "files": ["**/*.html"],
      "options": {
        "singleQuote": false,
        "tabWidth": 2
      }
    }
  ]
}

[tianyingchun]

what's progress of this issue, i run into this issue, it will break pluginprettier-plugin-organize-imports,

[joshmedeski]

No one has taken ownership to fix this issue.

For now, I suggest everyone expect prettier-plugin-tailwindcss can only be used on its own right now, your other prettier plugins aren't compatible.

After reviewing prettier/prettier#10261 it seems like this plugin is highjacking the typescript parser and so any other plugin that also wants to interact with the same parser they are ignored. If someone understands this please feel free to experiment with rewriting this plugin so other plugins continue to work as expected.

[MusicOnline]

Both prettier-plugin-style-order and prettier-plugin-css-order do not work with prettier-plugin-tailwindcss.

[joshmedeski]

If you want a workaround, you could use the prettier --config flag and have two different configs (using the sharing configurations patter for consistent formatting).

This solution won't work with your IDE on saving, but it could work with a lint-stage solution.

prettier --config ./.prettierrc.tailwind.js --write .
prettier --config ./.prettierrc.other.js --write .

It's not a pretty solution, but I think it's possible for those that strongly want multiple plugin support.

I, personally, have decided to use the tailwind prettier plugin on its own for now to avoid adding this much complexity to my projects.

[reinink]

@sameeranand1 Done: #102 🤙

This has been released as 0.2.0-beta.3.

[reinink]

Hello everyone, another update, we've just released v0.2.0, which includes all these plugin compatibility fixes.

You can install it using npm:

npm install prettier-plugin-tailwindcss@latest

We've also updated the readme to list all the Prettier plugins that we've added explicit support for:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

With all this complete, I am going to close this issue as resolved. Thanks to everyone here for sharing information about incompatible plugins with us! 🙏

[mreduar]

So with this release already available is it still necessary to edit the .prettierrc file? I tried without editing but it doesn't work.

// .prettierrc
{
  // ..
  "plugins": [
    "@prettier/plugin-pug",
    "prettier-plugin-organize-attributes",
    "prettier-plugin-tailwindcss" // It does not work if I put it here
  ],
  "pluginSearchDirs": false
}

and if I put prettier-plugin-tailwindcss last it doesn't work either.

[reinink]

@mreduar Hey, yes, you still to disable the pluginSearchDirs and list all your plugins in the plugins array, putting Tailwind CSS last (as per the readme).

If it's not working there is probably something else wrong. Feel free to create a minimal reproduction and we can have a closer look 👍

[blooddrunk]

Looking forward for this to be compatible with @ianvs/prettier-plugin-sort-imports

[bryanbarrios]

Hey @blooddrunk, this workaround worked for me:

const tailwindPlugin = require('prettier-plugin-tailwindcss');
const sortImportsPlugin = require('@ianvs/prettier-plugin-sort-imports');

module.exports = {
  parsers: {
    typescript: {
      ...tailwindPlugin.parsers.typescript,
      preprocess: sortImportsPlugin.parsers.typescript.preprocess,
    },
  },
  options: {
    ...sortImportsPlugin.options,
  },
};

Related to this answer.

[ramblehead]

Another breaking plugin is prettier-plugin-jsdoc

[reinink]

@ramblehead Hey! So we actually already have support for prettier-plugin-jsdoc, see here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

[reinink]

@blooddrunk @bryanbarrios Just a heads up that we've also added support for @ianvs/prettier-plugin-sort-imports: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.2.3

[joejcox]

Thank you @reinink 👏

For anyone struggling, this works with pnpm:

plugins: [
    require.resolve('@trivago/prettier-plugin-sort-imports'),
    require('prettier-plugin-tailwindcss'),
],

Beautiful thanks! This worked for me (Next 13, pnpm)

[aervxa]

@reinink

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.

Isn't working with Prettier v3
'Prettier for VSCode' extension just completely stops formatting .svelte files

Adding prettier-plugin-svelte back and reloading VSCode formats both .svelte files and Tailwind class names

.prettierrc

{
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

[thecrypticace]

@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.

This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

[aurelienbobenrieth]

It is still not working for me:
.prettierrc.cjs

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  singleQuote: false,

  plugins: [
    "prettier-plugin-packagejson",
    "prettier-plugin-jsdoc",
    "@trivago/prettier-plugin-sort-imports",
    // Must be loaded last
    "prettier-plugin-tailwindcss",
  ],

  // prettier-plugin-tailwindcss
  tailwindAttributes: ["classProp"],

  // @trivago/prettier-plugin-sort-imports
  // https://github.com/trivago/prettier-plugin-sort-imports#usage
  importOrder: ["^#styles(.*)$", "<THIRD_PARTY_MODULES>", "^#(.*)$", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderGroupNamespaceSpecifiers: true,
};

package.json

"devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "prettier": "3.1.0",
    "prettier-plugin-jsdoc": "^1.1.1",
    "prettier-plugin-packagejson": "^2.4.6",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "tailwindcss": "^3.3.5",
    "typescript": "5.2.2",
    "vite": "^5.0.0",
  },

Based on : https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

🤔

[jeannen]

Seems like it's not working when used with "prettier-plugin-organize-attributes"

[aervxa]

@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.

This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

The issue was a problem with my VSCode, all worked after restart