ClassList feature instead of having to add multiple class directives

[rayl0]

I have using svelte from 2 years now, and I am very happy with it's state of development. I am really excited for the release of svelte 5.

In svelte it's very easy to add conditional styling with the class directive.
<h1 class:bold={some conditional statement}></h1>

However when there is a need to toggle multiple class, one has to write it like this.
<h1 class:bold={active} class:green={active} class:center={active}></h1>

It works, but feels a little weird, and there is the issue of syntax highlighting and linting, when the class names become crazy.
For example, in the code below, I am using tailwindcss's dynamic classes
<h1 class:text-[15rem]={active}></h1>

Sorry, I couldn't find better examples, but hopefully this is enough get my point across.

A potential solution, one that is used in solidjs is by exposing a classList attribute.
<h1 classList={{ bold: active, green: active, center: active, "text-[15rem]": active }}></h1>

Or alternatively, allow multiple classes in a single class directive.
<h1 class:bold|green|center={active}></h1>

[shawnlong636]

Just another svelte user here throwing in my 10 cents. I like the idea of being able to set multiple classes in a single directive. Personally, though, I don't think the classList is any cleaner than individual class atrtributes. If anything, just adding support for something like this would be better.

<h1 class:bold|green|center={active}></h1>

[brunnerh]

See this issue:

• Allow multiple classes in class: directive #7170