How can I override styles with incline classes with SvelteKit

If I have something like

<h1 class="bg-green-800= bg-blue-400">Welcome to SvelteKit</h1>

The bg-green-800 class gets applied. It seems like classes are applied alphabetically, and not in the order in which they are defined.

This prevents me from doing a component that allows me to override styles, comething like this:

<script>
	let className = '';
	export { className as class };
	export let label = 'Click me!';
</script>

<button class="bg-red-500 {className}">{label}</button>

It seems to be a problem with SvelteKit, because in this playground it works ok

[alexanderniebuhr]

@opensas thanks for your report. Actually I can’t reproduce it myself. Can you please add more information or give a minimal repro.

[dansvel]

i dont understand why you want to overide it and not just like this

<script>
    export let className = 'bg-red-500';
    export let label = 'Click me!';
</script>

<button class="{className}">{label}</button>