Sort and break classes based on alternative conditions

[ac-lait]

Hello, we would like to take formatting another step, and make tailwind classes more readable, for our team.

We are looking for a solution, where it's possible to add break rules. For controlling when classes should break, as an example we would love to break after a maximum of 6 classes. And of course taking the sort order in consideration as it should not break inconvenient.

Together with a grouping option. grouping tailwinds classes on each line with break rule in mind. So the end result would look closer to this code example.

<div
    class="
      container-row 
      bg-green-600 
      rounded-[3px]
      p-5 lg:p-0 lg:mt-11 
      lg:h-11
    ">
    <div
      class="
    col-span-4 lg:col-span-3 
    flex items-center 
    mb-8 lg:mb-0 lg:pl-8
      ">
    <p class="text-white lg:font-bold">Some text</p>
  </div>
</div>

I Hope it's understandable, and maybe you can help us achieve, the wanted formatting.

Best Regards Andreas