[Prettier Plugin] Different prettier/prettier eslint rule sorting behavior and results on Windows and Linux emitting warnings on the other OS

[sceee]

Versions used:

• "tailwindcss": "^4.0.0-alpha.13"
• "prettier-plugin-tailwindcss": "^0.5.13"
• "prettier": "^3.2.5"
• "eslint": "^8.57.0"

I have a very simple vue 3 component:

<template>
  <div class="flex justify-center">
    <div class="mb-3 mt-5"></div>
  </div>
</template>

I use the following prettier config:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "singleQuote": true,
  "semi": false,
  "printWidth": 160
}

and the following eslint config:

module.exports = {
  root: true,
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  plugins: ['no-only-tests'],
}

When I lint the file on Windows (German), I receive no warning.

But when I lint the same file on Linux (English), I receive the following warning:
warning Replace b-3·mt-5witht-5·mb-3 prettier/prettier

Also, on Linux, VS Code emits the warning:

But as we can see, it just markes b-3 mt-5 so it cuts of the m from the mb-3.
If I let eslint fix the warning on Linux, it creates mt-5 mb-3.

However, then the mt-5 mb-3 is reported as warning on Windows. And on Windows, it would fix it again and create mb-3 mt-5.

So it seems there is no configuration possible that is usable on both OS.

Is there a solution to this other than ignoring the warnings?
To me, it seems this is a bug in tailwindlabs/prettier-plugin-tailwindcss.

Update:

I debugged into this and came to the following result:

• Linting on Linux:
  In the sortClassList(['mb-3', 'mt-5'], {...}) function, the classNamesWithOrder is set to this:
  

• Linting on Windows:
  In the sortClassList(['mb-3', 'mt-5'], {...}) function, the classNamesWithOrder is set to this:
  

As we can see, the numbers assigned to the classes differ and therefore, the order flips later in the code:

• Class mb-3 gets assigned 1n on Linux and 3n on Windows.
• Class mt-5 gets assigned 0n on Linux and 4n on Windows
  Notice, mb3 gets the higher value on Linux whereas mt-5 gets the higher value on Windows.

Unfortunately I did not manage to debug further down into this as I think the code relevant for this is getClassOrder

tailwindcss/packages/tailwindcss/src/sort.ts

Line 4 in 0060508

export function getClassOrder(design: DesignSystem, classes: string[]): [string, bigint | null][] {

and I did not have a non-minified build of tailwindcss v4.

I guess the issue lies somewhere in the AST generation of compileCandidates (

tailwindcss/packages/tailwindcss/src/compile.ts

Line 8 in 0060508

export function compileCandidates(

).

Does anyone have an idea where the error could be buried?

[ryan1969manus]

Hello, @sceee
I can see your post please see below and follow the step-by-step information.

The issue you’re experiencing with prettier-plugin-tailwindcss and ESLint giving different warnings on Windows and Linux is indeed peculiar. It’s possible that this behavior is due to differences in how each operating system handles line endings or other environment-specific configurations.

Here are some steps you can take to troubleshoot and potentially resolve the issue:

Ensure Consistent Line Endings: Make sure that your project uses consistent line endings across both Windows and Linux. You can enforce this by setting git to handle line endings consistently or by configuring your editor to use a specific line ending type.
Check for Plugin Conflicts: Ensure that there are no conflicts between the versions of prettier, eslint, and prettier-plugin-tailwindcss you are using. Sometimes, discrepancies between plugin versions can cause unexpected behavior.
Synchronize Configurations: Verify that your .eslintrc and prettier configurations are synchronized and that there are no overrides that might cause different behaviors on different systems.
Use eslint-config-prettier: If you haven’t already, consider using eslint-config-prettier to turn off all ESLint rules that are unnecessary or might conflict with Prettier
Check for Open Issues: Look for any open issues on the prettier-plugin-tailwindcss GitHub repository that might be related to your problem. If you find one, you can contribute to the discussion or at least track the progress of the issue.

Report the Bug: If after checking you don’t find any related issues, consider reporting this behavior as a bug to the prettier-plugin-tailwindcss repository. Provide detailed information about your environment and configuration to help maintainers reproduce the issue.
Temporary Workaround: As a temporary workaround, you can ignore the specific warning by using ESLint’s /* eslint-disable */ directive for the affected lines until a permanent fix is available.
Remember to keep all your dependencies up to date, as fixes for such issues are often released in newer versions.

I hope my suggestion is helpful for you.

[sceee]

Thanks but unfortunately none of the recommended suggestions helped as I'm already using LF line endings on all systems.

[sceee]

Was already fixed with tailwindlabs/prettier-plugin-tailwindcss#264