如何在Svelte Kit+Tailwind v4构建时移除未使用的颜色？

在我的Svelte Kit + Tailwind v4项目中执行pnpm build脚本时，构建产物会包含所有Tailwind默认颜色变量，但我仅使用了一个自定义颜色。Tailwind v4采用无配置模式，我尝试过查阅资料和咨询AI都没找到解决方案。

我的app.css配置如下：

@import 'tailwindcss';

@theme {
    --color-brand-red: #f00;
}

@utility container {
    padding-inline: 1rem;
    margin-inline: auto;
}

package.json相关配置：

"scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "prepare": "svelte-kit sync || echo ''",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "format": "prettier --write .",
        "lint": "prettier --check . && eslint ."
    },
    "devDependencies": {
        "@eslint/compat": "^1.2.5",
        "@eslint/js": "^9.18.0",
        "@sveltejs/adapter-auto": "^4.0.0",
        "@sveltejs/kit": "^2.16.0",
        "@sveltejs/vite-plugin-svelte": "^5.0.0",
        "@tailwindcss/vite": "^4.0.0",
        "eslint": "^9.18.0",
        "eslint-config-prettier": "^10.0.1",
        "eslint-plugin-svelte": "^2.46.1",
        "globals": "^15.14.0",
        "prettier": "^3.4.2",
        "prettier-plugin-svelte": "^3.3.3",
        "prettier-plugin-tailwindcss": "^0.6.11",
        "svelte": "^5.0.0",
        "svelte-check": "^4.0.0",
        "tailwindcss": "^4.0.0",
        "typescript": "^5.0.0",
        "typescript-eslint": "^8.20.0",
        "vite": "^6.0.0"
    },
    "pnpm": {
        "onlyBuiltDependencies": [
            "esbuild"
        ]
    },
    "dependencies": {
        "lucide-svelte": "^0.475.0"
    }

执行pnpm build后生成的CSS文件包含大量未使用的默认颜色变量，文件大小达28KB。请问能否通过修改app.css来移除所有未使用的颜色？

可以通过修改app.css中的主题定义方式，完全替换Tailwind的默认颜色集合，而不是在默认基础上扩展自定义颜色。具体操作如下：

将原@theme中的单独颜色变量定义，改为用--color: {}语法重新定义整个颜色主题，这样会覆盖默认的颜色系统，只保留你需要的自定义颜色：

@import 'tailwindcss';

@theme {
    --color: {
        brand-red: #f00;
        // 这里只添加你实际需要的颜色，默认颜色不会被包含
    };
}

@utility container {
    padding-inline: 1rem;
    margin-inline: auto;
}

原理说明 #

Tailwind v4中，直接定义--color-xxx属于扩展默认主题，默认的颜色变量依然会被保留并打包到产物中。而使用--color: {}语法是完全替换整个颜色主题，此时Tailwind不会生成任何默认颜色变量，只会包含你在这个对象中定义的颜色。

这样修改后，重新执行pnpm build，生成的CSS文件就只会包含你定义的--color-brand-red变量，默认颜色会被完全移除，文件大小会显著降低。

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