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.

https://github.com/heybourn/headwind/blob/ae5d26f7ec9b1923705abca3a85b8be4fc3904ad/package.json#L57-L66

https://github.com/heybourn/headwind/blob/ae5d26f7ec9b1923705abca3a85b8be4fc3904ad/src/utils.ts#L37-L41

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