[Prettier Plugin] Failes to sort classes in .svelte files?

[gihrig]

I have installed prettier-plugin-tailwindcss and it works as expected to sort utility classes in .html files, but does nothing in .svelte files.

npx prettier --write ./src as well as VSCode 'format on save' works as expected for line indents in all files. This command sorts Tailwind utility class order in .html files, but not in .svelte files.

There is a demo application at https://github.com/gihrig/format-demo-svelte.

The demo application was created following Install Tailwind CSS with SvelteKit and Sorting Tailwind CSS Classes Automatically with Prettier.

I'm working with macOS 10.14.6 (Mojave).

Any workarounds, corrections or suggestions would be most appreciated.

[gihrig]

The problem is not actually the .svelte extension. It's "custom classes" with variable expansion.

e.g. class="mx-auto mb-0 mt-[var(--column-margin-top)] max-w-[var(--column-width)]"

When the CSS variables are removed, class sort works as expected.

Also Confirmed with Headwind VSCode extension

I'll dig a bit deeper and open a new issue as appropriate

[DaveKeehl]

I just installed prettier-plugin-tailwindcss in a SvelteKit project and I'm also experiencing no class sorting on save. Has there been any update?

[gihrig]

@DaveKeehl I did experience this problem again in a new project.
I was able to get class sorting working, I think by strictly following the README at the prettier-plugin-tailwindcss project.

If that doesn't solve your issue, let me know and I'll dig deeper to see what I can offer.

[DaveKeehl]

@gihrig It works now. I had forgotten to specify pluginSearchDirs: false and to include prettier-plugin-svelte in the plugins array.