Group Custom Classes, Utilities, and Variants Near Related Tailwind Classes When Using Prettier Plugin

[mustafa-soylemez]

Hi,

I'm using the Prettier plugin for Tailwind CSS, and I'm running into an issue where all my custom classes, utilities, and variants are being sorted to the top after formatting.

What I'd like instead is to have them appear next to related core classes. For example:

A custom padding utility like pad-custom should be ordered near other padding classes like p-4 or pt-2.

A custom variant like toggle: should appear next to active: or hover:.

A full custom class like flex-center should ideally stay close to other flex classes, instead of being pushed to the very top.

Is there a way to control the sorting behavior of the plugin to group custom values near similar Tailwind classes/variants?

Thanks!

[rozsazoltan]

• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/v0.6.14/src/sorting.ts#L151-L193 (sortClassList call reorderClasses)
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/v0.6.14/src/sorting.ts#L51-L66 (reorderClasses call getClassOrder)
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/v0.6.14/src/config.ts#L313 (getClassOrder call design.getClassOrder)
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/v0.6.14/src/config.ts#L259 (design use TailwindCSS API)
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/v0.6.14/src/config.ts#L213-L221 (Get TailwindCSS API)
• https://github.com/tailwindlabs/tailwindcss/blob/v4.1.11/packages/tailwindcss/src/sort.ts#L4-L30 (getClassOrder from TailwindCSS)

Assuming you're using the prettier-plugin-tailwindcss plugin for this, we can understand from how it works that it relies on TailwindCSS's own internal sorting logic. So you don't have the ability to influence it - unless you fork the relevant repository or repositories and customize the logic yourself.

[RobinMalfait]

Sorting of utilities happens based on the properties being used, so your pad-custom and flex-center should already be close to the padding utilities and flex utilities. E.g.: https://play.tailwindcss.com/BQmGf20sOB

For variants, we keep the internal order, custom defined variants will be sorted at the end.