求助：SvelteKit+Tailwind CSS中变量传类名hover/active失效

问题重现 #

我用SvelteKit搭配Tailwind CSS开发，想通过变量给元素传递状态样式，代码如下：

<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>

也试过用模板字符串拼接类名：

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}` 

浏览器里元素的类名显示完全正确：

<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>

但hover和active状态的样式就是不生效。

原因分析 #

Tailwind CSS的JIT（即时编译）模式会在构建阶段扫描项目中所有完整的类名，只有能被静态识别的类才会生成对应的CSS规则。你用变量拼接的类名（比如hover:${translate}）在构建时是动态的，Tailwind无法提前识别这些完整类名，所以不会生成对应的hover/active状态样式代码——哪怕浏览器里类名显示正确，也没有对应的CSS规则支撑样式生效。

解决方法 #

方法1：预定义所有可能的类名 #

把所有可能用到的状态类提前写在代码的注释或隐藏元素里，让Tailwind能扫描到。比如在组件中添加：

<!-- 让Tailwind扫描到这些类，确保生成对应CSS -->
<!-- hover:-translate-x-1 hover:-translate-x-2 active:-translate-x-1 active:-translate-x-2 active:bg-fnt-blue-500 bg-fnt-green-500 -->
<script>
    // 原脚本代码不变
</script>

这样Tailwind就会生成这些类的CSS规则，动态拼接的类名就能正常生效。

方法2：使用CSS变量结合Tailwind #

用CSS变量传递动态值，Tailwind支持在工具类中直接使用CSS变量：

<script>
    export let primary = 'rgb(59, 130, 246)'; // 直接传入颜色RGB值
    export let accent = 'rgb(34, 197, 94)';
    export let translateAmount = '-1rem'; // 直接传入位移值
</script>

<style>
    .custom-btn {
        --primary-color: {primary};
        --accent-color: {accent};
        --translate-x: {translateAmount};
    }
</style>

<button
    class="custom-btn flex items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer active:text-white bg-[var(--accent-color)] active:bg-[var(--primary-color)] hover:translate-x-[var(--translate-x)] active:translate-x-[var(--translate-x)]"
>
    <slot>Button</slot>
</button>

这种方式不依赖静态扫描，通过CSS变量动态传递值，灵活性更高。

方法3：拆分静态与动态类，用Svelte动态绑定 #

把静态类和动态类分开，用Svelte的class:语法或对象式绑定处理动态状态：

<script>
    export let primary = 'bg-fnt-blue-500';
    export let accent = 'bg-fnt-green-500';
    export let translateAmount = 1;
</script>

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

或者用对象式绑定更清晰：

<button
    class="flex items-center justify-center py-2 pl-1 pr-1 shadow-inner duration-200 hover:cursor-pointer active:text-white"
    class={{
        [accent]: true,
        [`active:${primary}`]: true,
        [`hover:-translate-x-${translateAmount}`]: true,
        [`active:-translate-x-${translateAmount}`]: true
    }}
>
    <slot>Button</slot>
</button>

这种方式确保动态类的核心前缀是静态可扫描的，只要translateAmount的可能值被Tailwind识别，就能正常生成样式。

内容的提问来源于stack exchange，提问作者Tjark Hüter