Conflict with other Prettier plugins, specifically prettier-plugin-tailwind

[denis-sokolov]

Your Environment

• Prettier version: 2.4.1
• node version: 16.13.0
• package manager: [email protected], [email protected]
• IDE: VScode

Describe the bug

When used with prettier-plugin-tailwind, that plugin does not format tailwind. The two conflict and this one takes precedence solely based on the alphabetic order of the plugin names. There is an issue open with more details in prettier-plugin-tailwind. It seems to be a limitation in Prettier plugin API.

If someone uses this with a conflicting plugin that happens to be alphabetically earlier than this one, then this one will stop working. Hopefully this issue helps someone understand their problem. Perhaps add a mention of this to Readme?

To Reproduce

1. npm install prettier-plugin-tailwind
2. npm install @trivago/prettier-plugin-sort-imports
3. Run prettier --write .
4. Imports are sorted, Tailwind class names are not sorted.

Expected behavior

Imports are sorted, Tailwind class names are sorted.

[pascalrogalla]

Same Issue with the official tailwindlabs/prettier-plugin-tailwindcss
tailwindlabs/prettier-plugin-tailwindcss#31

[takakikasuga]

This issue has been revealed other github issue, the official tailwindlabs/prettier-plugin-tailwindcss.

According to the under the link, the comment suggest that fix the「prettier.config.js」file and then result in the work, can work both 「prettier-plugin-sort-imports」 and 「prettier-plugin-tailwindcss」libraries　🚀

The suggestion in prettier-plugin-tailwindcss:
tailwindlabs/prettier-plugin-tailwindcss#31 (comment)

so,
I wanna know this solution is good practice for working both prettier libs, and in this settings, does it have the potential for bugs?

thank you, and for developing good sorts plugin!!!

Trivago teams is the best working in developers market☀️

again,
Thank you from the bottom of my heart💡

【My Settings: prettier.config.js】

const pluginSortImports = require('@trivago/prettier-plugin-sort-imports')
const pluginTailwindcss = require('prettier-plugin-tailwindcss')

/**
 * @refs  https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734
 */
/** @type {import("prettier").Parser}  */
const bothParser = {
  ...pluginSortImports.parsers.typescript,
  parse: pluginTailwindcss.parsers.typescript.parse,
}

/** @type {import("prettier").Plugin}  */
const mixedPlugin = {
  parsers: {
    typescript: bothParser,
  },
}

module.exports = {
  plugins: [mixedPlugin],
  semi: false,
  singleQuote: true,
  printWidth: 140,
  importOrder: ['(^react$|^react/(.*)$)', '(^next$|^next/(.*)$)', '<THIRD_PARTY_MODULES>', '^~/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
}

[abhay-agarwal]

The above solution doesn't work for me. In my Vue SFC files it still doesn't sort the tailwind css

[RobbieTheWagner]

It also does not work for me in a Next.js app, but it seems like your config is for Next?

[allenchuang]

following along, have the same problem. seems like whichever gets imported first in the plugins array will trigger on save but not both.

{
  "importOrder": [
    "^react(.*)",
    "antd/(.*)",
    "<THIRD_PARTY_MODULES>",
    "@/(.*)",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ]
}