Using string variables as classes

Question

I am using sveltekit with tailwind-css

I want to be able to pass some behavior thru variables to the element

<script>
    export let primary = 'fnt-blue-500';
    export let accent = 'fnt-green-500';
    export let translate_dir = '-translate-x';
    export let translate_amount = 1;
    let translate = translate_dir + '-' + translate_amount;
</script>

<button
    id="1"
    class="flex items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer active:text-white bg-{accent} active:bg-{primary} hover:{translate} active:{translate}"
>
    <slot>Button</slot>
</button>

I tried a templatestring with all classes in them but that didnt work either

let template = `items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer active:text-white bg-${accent} active:bg-${primary} hover:${translate} active:${translate}` 

In the browser the element has this as class:

<button id="1" class="flex items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer active:text-white bg-fnt-green-500 active:bg-fnt-blue-500 hover:-translate-x-1 active:-translate-x-1">Optionen</button>

but the hover and active state still wont work

I dont understand why this is happening, does sombedoy know? Or another way to parse behavior?

Answer 1

1. If you have dynamic dependencies, you have to make the statement reactive in JS, or directly interpolate into the markup.

   $: template = `items-center ...`
   

   <div class="... active:bg-{primary} ..."
   

2. This alone will not work, you generally cannot use "partial" Tailwind names, otherwise they will not be registered and not be part of the generated CSS. See this question.

Answer 2

Svelte handles class interpolation a bit differently from some other frameworks like React.

The way you used the curly braces isn't supported in the Svelte syntax, it doesn't automatically process class strings with dynamic expressions that way.

Instead, you can use Svelte's conditional class logic to dynamically apply classes based on the variables you have;

<button
  id="1"
  class="
    flex items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer
    {`bg-${accent}`} {`active:bg-${primary}`} {`hover:${translate}`} {`active:${translate}`}
  "
>
  <slot>Button</slot>
</button>

This way, we used the curly braces inside the class attribute, but not for direct interpolation of class names, we used them to encapsulate the dynamic class names with the class attribute.