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 https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/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:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734

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?