[Feature request] classnames order, group by responsive variant

[francoismassart]

Right now the ordering in applied in this order:

1. Affected property (e.g. flex, padding...)
2. Responsive variant (e.g. sm:, md:, lg:...)
3. Theme variant (e.g. dark:...)
4. State variant (e.g. hover:, disabled:...)

e.g. <div class="p-4 sm:p-6 lg:p-8 rounded sm:rounded-lg lg:rounded-2xl">...</div>

While I like this approach, some user might prefer grouping by responsive variant first like so:

1. Responsive variant (e.g. sm:, md:, lg:...)
2. Affected property (e.g. flex, padding...)
3. Theme variant (e.g. dark:...)
4. State variant (e.g. hover:, disabled:...)

e.g. <div class="p-4 rounded sm:p-6 sm:rounded-lg lg:p-8 lg:rounded-2xl">...</div>

Both looks fine to me, I would add an optional parameter groupByResponsive set to false in order to keep using current order rules by default.

What do you think about this feature ?

[iraklisg]

IMHO grouping by responsive variant first is the way to go
Please have a look on this thread as well https://threadreaderapp.com/thread/1399473267606528005.html
As Adam Wathan proposes:

Group responsive classes together by screen size, following the same order that the classes would override each other in

However, having an optional parameter groupByResponsive could be proven helpful and make this plugin less opinionated.

[francoismassart]

I added this issue after reading the thread 😉

[NatanCieplinski]

I would also add the optional groupByResponsive parameter. I think in general a plugin should be as less opinionated as possible

[thebuilder]

Awesome - Was just thinking that this would be a good feature to have, and if it can be opt in, even better.