Svelte conditional classes with class: directive doesnt get compiled in v4

[JuchokJuk]

I found that v4 beta doesnt compile classnames in svelte class: directive, but v3 does.

Im using v4.0.0-beta.4 with vite (sveltekit), issue also presist in Tailwind Play https://play.tailwindcss.com/SqaTjcf7MZ

[philipp-spiess]

@JuchokJuk Hey! This works right now for me when i try it with the @tailwindcss/vite extension. Do you have a project where this doesn't work or only the Tailwind Play? Play doesn't support Svelte at all, it only scans HTML class fields.

Support for that was added a while ago but it's possible there's a bug in the implementation: #13274

[JuchokJuk]

@philipp-spiess Hi, yes I have project where its not working (minimal example: https://github.com/JuchokJuk/tw-class)

It works only if tailwind already compiled classnames from class: directive. For example If I typed them in class attr before. Try restart dev server to see bug

[JuchokJuk]

I tried to swap sveltekit() and tailwindcss() plugins in vite.config.ts and it resolved my issue. Working setup looks like this:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

It would be nice to have this higlighted in docs