^{Originally posted by sceee April 12, 2024}
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.

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 https://github.com/tailwindlabs/tailwindcss/blob/0060508c6e769346d10870abacc94c42852f497e/packages/tailwindcss/src/sort.ts#L4 and I did not have a non-minified build of tailwindcss v4.

I guess the issue lies somewhere in the AST generation of compileCandidates ( https://github.com/tailwindlabs/tailwindcss/blob/0060508c6e769346d10870abacc94c42852f497e/packages/tailwindcss/src/compile.ts#L8 ).