Ordering of shorthand classes to match syntax

[goosewobbler]

It would be nice if headwind ordering of the margin and padding classnames could match the syntax of the CSS rule, e.g. for margin:

/* vertical | horizontal */
margin: 0.25rem 0;

/* top | horizontal | bottom */
margin: 1rem auto 2rem; 

/* top | right | bottom | left */
margin: 0.5rem 1rem 0 auto;

Current and expected ordering behaviour for the above tailwind classnames:

/* vertical | horizontal */
Current:
mx-0 my-1

Expected:
my-1 mx-0

/* top | horizontal | bottom */
Current: 
mx-auto mt-4 mb-8

Expected:
mt-4 mx-auto mb-8

/* top | right | bottom | left */
Current:
mt-2 mb-0 ml-auto mr-4

Expected:
mt-2 mr-4 mb-0 ml-auto

There are other shorthand properties which would benefit from similar, namely border, font and background:

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

[praveenperera]

You can customize the ordering using the headwind.sortTailwindClasses property, check the README.

Long term the classes will probably be ordered from how they appear in the tailwind.css file

[goosewobbler]

Thanks, I should have looked closer at the documentation before raising this. I'll close it...