tailwindlabs
Classes with custom variable names are not sorted
What version of prettier-plugin-tailwindcss are you using?
0.6.11
What version of Tailwind CSS are you using?
4.1.3
What version of Node.js are you using?
v23.6.1
What package manager are you using?
npm
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/DPP55XQUZZ
Describe your issue
Tailwind with custom variable names are not sorted correctly. For example, if the following color variable is defined:
@theme {
--color-primary-600: var(--color-blue-600);
}
Classes containing -primary-600 are moved to the front of the list. So this:
m-10 text-4xl font-extrabold text-gray-800 hover:text-primary-600
Becomes this:
hover:text-primary-600 m-10 text-4xl font-extrabold text-gray-800
See the example above. I am not sure why the "Tidy" button isn't working there, but if I format this locally, this issue occurs.
Hello @sboerrigter, I had the same issue. Turns out that with Tailwind CSS v4, you need to add this option to your Prettier config so that Prettier knows where to find your Tailwind configuration stylesheet:
// .prettierrc
{
"tailwindStylesheet": "./resources/css/app.css"
}
You can find more about this in the documentation.
Hope this helps! 😊
Hello @sboerrigter, I had the same issue. Turns out that with Tailwind CSS v4, you need to add this option to your Prettier config so that Prettier knows where to find your Tailwind configuration stylesheet:
// .prettierrc { "tailwindStylesheet": "./resources/css/app.css" }You can find more about this in the documentation.
Hope this helps! 😊
It works! Thank you. 😊
@sboerrigter Without a reproduction repo I can't really triage this. But it's quite likely the above. You need to specify your stylesheet in your Prettier config file.
If it doesn't work after doing that please provide a repro and @-mention me again on this issue and I'll take another look.
