support for prefix? (not the responsive kind)

[vesper8]

In my projects I mix bootstrap with tailwind so as per recommendations I configured my tailwind.config.js to use a prefix: tw-

I've noticed that Headwind doesn't sort my tailwind classes, I mean it will do some alphabetical sorting but it won't apply the nice sorting that is meant to be provided

For example

bg-red-500 container mx-auto text-white

gets sorted to

container mx-auto text-white bg-red-500

but

tw-bg-red-500 container tw-mx-auto tw-text-white

doesn't get sorted to

container tw-mx-auto tw-text-white tw-bg-red-500

instead it gets sorted to

container tw-bg-red-500 tw-mx-auto tw-text-white

Could you possibly add support for using a prefix please ?https://tailwindcss.com/docs/configuration/#prefix

Or if it's already possible, I think it should be made clearer how to set the configuration in order to have it work with a prefix

If you need to test with prefixes this tool is handy https://github.vue.tailwind-prefix.cbass.dev/

Thanks!

[vesper8]

@langfeld @heybourn thank you very much for adding this!

Can we use it yet? I see that the latest available version in VSCode is 1.6.5 which was added 2 months ago.. do you have to tag a new release?

And will this pick up the tailwind prefix from the tailwind.config.js file or do we have to specify it manually?

[alesso-x]

The PR merged solved the issue, you just need to add headwind.customTailwindPrefix to your settings. This issue can be closed.

{
  "headwind.customTailwindPrefix": "tw-"
}

[vesper8]

@alesso-x Hello.. I wanted to say that I did add "headwind.customTailwindPrefix": "tw-" to my settings but it still isn't working.

It will order tw-bg-red-500 container tw-mx-auto tw-text-white to container tw-bg-red-500 tw-mx-auto tw-text-white

But it should be ordering it to container tw-mx-auto tw-text-white tw-bg-red-500

It basically is ignoring the prefixed tailwind classes.. am I missing something?