Tailwind CSS花括号替换失效：Svelte动态颜色不渲染如何解决？

Tailwind CSS是静态扫描编译的工具，它只会识别代码里写死的静态类名。你用bg-{color}-600这种动态拼接的类名，Tailwind在构建阶段没法解析出具体的颜色值，自然不会生成对应的CSS样式规则——哪怕最终DOM上显示了正确的类名，也没有样式能生效。

如果要实现支持任意颜色值（比如十六进制、RGB、HSL甚至颜色单词），最直接高效的方式是用内联样式绑定，完全绕开Tailwind的静态扫描限制：

<script lang="ts">
    export let color: string;
</script>

<div 
    id="solus" 
    class="absolute overflow-hidden h-96 w-96 rounded-full blur-3xl"
    style:background-color={color}
/>

不管你传入"#ff4444"、"rgb(255, 68, 68)"、"hsl(0, 100%, 60%)"还是"purple"，这个组件都能正确渲染对应的背景色。

补充：如果只想用Tailwind预定义色系 #

要是你只需要支持Tailwind自带的色系（比如传"red"对应bg-red-600），可以用以下方法：

方法1：提前暴露所有可能用到的类名 #

在组件里加一个隐藏元素，把所有需要用到的Tailwind颜色类写进去，让Tailwind编译时能扫描到：

<!-- 仅用于让Tailwind扫描类名，不会显示在页面上 -->
<div class="hidden bg-red-600 bg-blue-600 bg-green-600 bg-yellow-600"></div>

<script lang="ts">
    export let color: string;
</script>

<div 
    id="solus" 
    class="absolute overflow-hidden h-96 w-96 rounded-full blur-3xl"
    class:bg-{color}-600
/>

但这种方式只能支持你提前写好的颜色，没法覆盖任意自定义颜色。

方法2：用CSS变量映射Tailwind主题色 #

在全局CSS里定义变量，结合Tailwind的主题系统：

/* 全局样式文件（比如app.css） */
:root {
    --dynamic-bg: theme('colors.red.600');
}

然后在组件里动态设置这个变量：

<script lang="ts">
    export let color: string;
    // 从Tailwind主题里获取对应颜色值，找不到就直接用传入的自定义颜色
    import { theme } from 'tailwindcss';
    const bgValue = theme(`colors.${color}.600`) ?? color;
</script>

<div 
    id="solus" 
    class="absolute overflow-hidden h-96 w-96 rounded-full blur-3xl"
    style:--dynamic-bg={bgValue}
    class="bg-[var(--dynamic-bg)]"
/>

这种方式兼顾了Tailwind预定义色系和自定义颜色的需求。

内容的提问来源于stack exchange，提问作者zelpha_343