[V4] Custom defined utility classes aren't sorted correctly via prettier-plugin-tailwindcss

[ivenuss]

Custom declared utility classes aren't sorted properly via auto sort plugin prettier-plugin-tailwindcss using CLI command prettier --write ..

For example custom color bg-mint-500 always ends up as the first option even though it should be next to text-orange-500.

This behaviour applies on CLI command and TW VSCode extension as well.

When I try to reproduce this same behaviour in TW playground, it gets sorted correctly -> <div class="border bg-mint-500 text-xl text-orange-500"></div>

(^ color is linked properly and is registred by TW extension)

Reproduction

1. Define custom color
2. Create element with this custom color
3. Run prettier format prettier --write .

/* app.css */
@import 'tailwindcss';

@theme {
	--color-mint-500: oklch(0.72 0.11 178);
}

<div class="bg-mint-500 border text-xl text-orange-500"></div>

Package versions

"prettier": "^3.5.1",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.0.6",

[philipp-spiess]

Hey! Did you configure prettier to look at your Tailwind CSS configuration? See this part in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#specifying-your-tailwind-stylesheet-path

[ivenuss]

Thanks. I had not configured the tailwindStylesheet path.

It would be worth of mentioning in the upgrade guide or even here.