Class sorting is not working when arbitrary value is used

[snax4a]

Hi,

I noticed that plugin is not sorting classes of the element if there is at least one arbitrary value.

This will not be sorted because of w-[200px] class used

<div className="px-5 w-[200px] py-6 justify-center flex flex-col"></div>

This works:

<div className="px-5 py-6 justify-center flex flex-col"></div>

[leoriviera]

I've just come across this issue too. Any way to fix it or work around it?

[ruridge]

Still no word on how to resolve this?

[sina-salahshour]

I think the problem is caused because the extension sorts the classes based on an array of string(so it doesn't match dynamic tailwind classes), i think i would be better to use regex instead and include the arbitrary values alos.

headwind/package.json

Lines 57 to 66 in ae5d26f

	"headwind.defaultSortOrder": {
	"type": "array",
	"default": [
	"container",
	"decoration-slice",
	"decoration-clone",
	"box-border",
	"box-content",
	"block",
	"inline-block",

headwind/src/utils.ts

Lines 37 to 41 in ae5d26f

	classArray = sortClassArray(
	classArray,
	sortOrderClone,
	options.shouldPrependCustomClasses
	);

it would also be much less code. currently there are 5216 lines only for specifying tailwind class names (with the dynamic ones missing)