prettier-plugin-tailwindcss VS postcss-nested

You can use the Tailwind Prettier plugin to automate this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss. I'm not sure if it would support the precise grouping and sorting you prefer, but it may be worth it anyway!

For years, I've been prettier's biggest fan... Introducing it to every codebase at a new role, instantly adding it to any new repository, installing additional plugins such as tailwind or xml and of course, ensuring the "Format on save" option is switched on.

prettier-plugin-tailwindcss: A plugin for Prettier that sorts your Tailwind CSS classes. It organizes Tailwind utility classes in a specific order to maintain consistency across the project.

Thats it! Still have problems? Check out the official prettier-plugin-tailwindcss documentation.

For additional configuration options like sorting classes in non-standard attributes, visit the prettier-plugin-tailwindcss documentation.

To automatically sort TailwindCSS classes when using Prettier, you can follow this documentation.

Since this was a problem that many people had already encountered, there was already a solution. The first thing I found was Tailwind's official Prettier plugin, which ensures that class names are always ordered according to a certain rule. Best of all, it's auto-correcting, so I don't accidentally miss something or commit a different order.

It's not as if the correct order for the rules is mysterious. It's implemented in the Tailwind compiler. Tools like prettier-plugin-tailwindcss, which automatically sorts the class names in your HTML code to match the order in which Tailwind generates them in your CSS output, use a public API in Tailwind to get this order.

Other than that, you can get Prettier sorting your classes with the Tailwind Prettier plugin. And one more quality-of-life extension that might help your eye sores from a long list of classes is Tailwind Fold.

And we have to make sure that it runs before the nesting plugin, otherwise it will not work at all due to an issue when using both plugins together.

postcss-nested

What you're describing is nesting, which is currently in the proposal stages for CSS. That being said, nesting has long been a feature in many preprocessors, such as sass and less. You can also use this PostCSS plugin if you only want the nesting and nothing else.

My PostCSS Config contains postcss-preset-env already which should support for CSS nesting. I also installed postcss-nested & postcss-css-variables, just in case.

PostCSS Nested - so I can use Sass-like nesting.

A quick example that demonstrates what I've said would be the postcss nesting plugin: https://github.com/postcss/postcss-nested