Tailwind formatter orders classes differently than Prettier

[jashaj]

Tailwind classes are ordered differently in Vue files when I format with this plugin compared to running prettier. What's causing the difference?

Tailwind formatter:

<div class="mt-8 mb-2 flex items-center">
  <button class="my-2 w-full p-2 btn btn-primary" @click="router.back()">Cancel</button>
</div>

Prettier:

<div class="mb-2 mt-8 flex items-center">
  <button class="btn btn-primary my-2 w-full p-2" @click="router.back()">Cancel</button>
</div>

Versions:

• prettier: 3.0.3
• prettier-plugin-tailwindcss: 0.5.6
• tailwindcss: 3.3.3
• Tailwind Formatter: 2.0.8
• WebStorm: 2023.2.3

.prettierrc.json:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Moving the contents of .prettier.json to the package.json did not fix the issue.

[WalrusSoup]

Prettier has better access to class order under the hood. it natively calls tailwindcss, and can access generate rules which has access to the actual rules. As far as im understanding, these come from the compiler that has access to the classes which are actually used. Currently, this one is guessing the order that they appear in, so it's not as narrowed down unfortunately.

Ultimately, though, i think that we opt to put the custom ones in the back and they opt to push it into the front.

I'd love if we could call the tailwindcss executable and get the generated rules as JSON via the CLI or something, but I'd have to add that to the tailwind library and im super unfamiliar with how it works structurally.

[jashaj]

Thanks for the explanation and sorry for the late response. I'll close this issue as it seems to be a huge effort while prettier can also format my code on save.