Classes with custom variable names are not sorted

[sboerrigter]

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.

[spicrd]

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! 😊

[vafanassieff]

I have the same issue with a pnpm monorepo.

[isRyanSu]

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. 😊