Won't sort classes in .svelte files

[mrsylvestre]

What version of prettier-plugin-tailwindcss are you using?
0.8.0

What version of Tailwind CSS are you using?
^4.3.0

What version of Node.js are you using?
24.13.1

What package manager are you using?
pnpm

What operating system are you using?
Linux (Ubuntu 24 LTS)

Reproduction URL
Tried making a StackBlitz but it would never sort any files (.svelte, .html, .ts)... If you want to repro, reach out to me I can jump on a call and showcase as needed.
https://stackblitz.com/edit/sveltejs-kit-template-default-tvdhiybv?file=src%2Froutes%2F%2Bpage.svelte

Describe your issue

I cannot get tailwind classes to get sorted in .svelte files, but it will work fine with .html or even .ts files (using tv())

[Lihu0]

I am facing the same issue both on old projects and on a new created project.

Reproduction steps:

1. Create a plain Svelte project with npm create vite@latest my-app -- --template svelte-ts.
2. Run cd my-app and npm install.
3. Run npm install tailwindcss @tailwindcss/vite.
4. Add @tailwindcss/vite to the Vite configuration (./vite.config.ts) .

import { svelte } from "@sveltejs/vite-plugin-svelte";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [svelte(), tailwindcss()],
});

6. Add @import "tailwindcss"; to the CSS file (./src/app.css).

@import "tailwindcss";

7. Install Prettier and Prettier plugins: npm i -D prettier prettier-plugin-svelte prettier-plugin-tailwindcss
8. Add the plugins to .prettierrc

{
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

9. Create a test Svelte file in ./Test.svelte.

<div class="bg-red-500 p-4 flex text-white gap-2 items-center justify-between hover:bg-blue-500 sm:p-2">
  Test
</div>

10. Run npx prettier --write Test.svelte
11. Expected: class order changes. Actual bug: file stays unchanged.

[tokmo]

Work with "prettier-plugin-svelte": "3.5.2" but no with 4.1.0

[ImSuperlative]

It seems like this was fixed in PR #462

[RobinMalfait]

Hey! This should be fixed by #462, and will be available in the next release.

You can already try it by using the insiders build: npm install prettier-plugin-tailwindcss@insiders

In case of your reproduction @Lihu0, the result should look like this after installing the insiders version:

diff --git a/my-app/src/App.svelte b/my-app/src/App.svelte
index 509839d..430da88 100644
--- a/my-app/src/App.svelte
+++ b/my-app/src/App.svelte
@@ -1,5 +1,5 @@
 <div
-  class="bg-red-500 p-4 flex text-white gap-2 items-center justify-between hover:bg-blue-500 sm:p-2"
+  class="flex items-center justify-between gap-2 bg-red-500 p-4 text-white hover:bg-blue-500 sm:p-2"
 >
   Test
 </div>

[DarthGigi]

Is there an ETA on when the next release happens? It has been a few days

[nekename]

I thought I was going insane! Good to know this will be fixed soon. Is there an ETA on the next release?

Edit: had to think I was going doubly insane. denoland/deno#35577

[migig]

This is a major bug - the plugin has become useless for svelte users.

It was fixed in May - would someone please publish it?

Thank you!

[DarthGigi]

I've already migrated to oxfmt and it does everything and faster. Might be an option to look into for your projects as well

[RestartB]

looks like it's now released in v0.8.1 - https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.8.1

[nekename]

looks like it's now released in v0.8.1 - https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.8.1

Finally

[lonix1]

Can anyone who upgraded to the latest version confirm whether the fix actually works?

(For me, it still doesn't sort classes in .svelte files.)

[nula1337]

Can anyone who upgraded to the latest version confirm whether the fix actually works?

(For me, it still doesn't sort classes in .svelte files.)

For me upgrading to 0.8.1 and changing the prettier.config.js to this fixed it:

/** @type {import("prettier").Config} */
const config = {
	useTabs: true,
	singleQuote: true,
	trailingComma: 'none',
	printWidth: 100,
	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
	tailwindStylesheet: './src/routes/layout.css',
	tailwindFunctions: ['cn', 'clsx', 'tv']
};

export default config;