SvelteKit中无法从tailwind.config动态获取Tailwind颜色的问题

我在SvelteKit项目里尝试动态设置Tailwind类，碰到个问题：用函数返回值拼接自定义颜色类的时候，对应的颜色加载不出来。下面是简化后的代码示例：

+page.svelte #

<script>
    const getTeamName = () => {
        return 'team1';
    };
</script>

<div class={`bg-white text-teams-${getTeamName()}`}>Team 1</div>
<div class={`bg-white text-teams-team2`}>Team 2</div>

tailwind.config.cjs #

const config = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
    ],

    theme: {
        extend: {
            colors: {
                teams: {
                    team1: '#e2012d',
                    team2: '#826818',
                }
            }
        }
    },
    plugins: [require('flowbite/plugin')],
};

module.exports = config;

问题现象 #

从截图能看到，直接写死的text-teams-team2正常显示棕黄色，但通过函数拼接的text-teams-team1变成了默认黑色（本来应该是亮红色#e2012d）。有意思的是，如果把getTeamName的返回值改成'team2'，颜色就能正常加载。感觉这和Tailwind能不能检测到类名有关，但拿不准是SvelteKit还是Tailwind的问题。

原因及解决办法 #

这是Tailwind的静态扫描机制导致的：Tailwind在构建时只会静态识别代码里明确写出来的类名，动态拼接出来的text-teams-${getTeamName()}它没法提前解析出具体的text-teams-team1，所以不会生成对应的CSS样式。

有三种解决办法：

1. 提前声明所有可能的类名 #

在代码里把所有可能用到的teams颜色类列出来，让Tailwind能扫描到：

<script>
    const getTeamName = () => {
        return 'team1';
    };
    // 提前列出所有teams颜色类，供Tailwind扫描
    const allTeamClasses = ['text-teams-team1', 'text-teams-team2'];
</script>

<div class={`bg-white text-teams-${getTeamName()}`}>Team 1</div>
<div class={`bg-white text-teams-team2`}>Team 2</div>

2. 动态绑定style属性 #

用Svelte的动态绑定直接设置color样式，绕开Tailwind的类名扫描限制：

<script>
    const teamColors = {
        team1: '#e2012d',
        team2: '#826818'
    };
    const getTeamName = () => {
        return 'team1';
    };
</script>

<div class="bg-white" style={`color: ${teamColors[getTeamName()]}`}>Team 1</div>
<div class="bg-white text-teams-team2">Team 2</div>

3. 配置Tailwind的safelist #

在tailwind.config.cjs里把需要动态使用的类名加入safelist，强制Tailwind生成对应的样式：

const config = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
    ],
    safelist: [
        'text-teams-team1',
        'text-teams-team2'
    ],
    theme: {
        extend: {
            colors: {
                teams: {
                    team1: '#e2012d',
                    team2: '#826818',
                }
            }
        }
    },
    plugins: [require('flowbite/plugin')],
};

module.exports = config;

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