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