主页 / coding / 问题 / 79438289
Accepted
Justin
Asked: 2025-02-14 11:27:18 +0800 CST

如何在构建过程中删除未使用的颜色？

  • 772

当我在 svelte kit tailwind 项目中使用 Tailwind v4 运行build脚本时，它会添加每一种 tailwind 颜色。我只使用一种 tailwind 颜色，所以我想删除它们。

我花了很多时间在网上搜索并询问 LLM，但没有人能回答无需配置的 tailwind v4 的问题。

这是我的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 文件：

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);

等等。这个文件有 28kb，我使用的独特的顺风类很少。

我搜索了他们的官方文档，似乎只有针对 v2 的文档。有没有办法编辑我的文档app.css以删除所有未使用的颜色？谢谢。

tailwind-css

2 个回答

  1. 我明白了。添加：

    --color-*: initial;

    高于自定义颜色

    https://tailwindcss.com/docs/theme#overriding-the-default-theme

    • 1
  2. Best Answer

    我之前没有使用 Vite 的测试

    这个问题之所以让我感兴趣，是因为 TailwindCSS 根本不包括未使用的变量和类。因此，如果目标是删除“未使用的”变量，我相信这个问题早就解决了。TailwindCSS v4 中有一个错误导致它们仍然存在，但很快就修复了，可能是在 v4.0.5 中。

    它在 CLI 和 PostCSS 中确实运行良好。我在本机转换期间对此进行了更深入的研究。请参阅：

    --color-*: initial，为什么这是一个半成品解决方案

    我很惊讶地发现 Vite 中尚未解决该问题。这可能就是您提出这个问题的原因。我认为您提供的答案实际上并没有解决问题；它只是隐藏了它。您的解决方案有效地禁用了默认类，但如果您仍然添加 20 种颜色并且最终只使用 3 种，则构建仍将包含所有 20 种颜色。

    确保压缩的解决方法：PurgeCSS

    我认为报告这个错误是值得的。同时，使用 PurgeCSS 插件确保从输出中删除所有未使用的变量和类。

    依赖项
    npm install tailwindcss @tailwindcss/vite postcss @fullhuman/postcss-purgecss
    配置

    vite.config.js

    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss'

// Custom PostCSS plugin to remove comments
const removeCommentRules = (root: any) => {
  root.walkComments((comment: any) => {
    comment.remove()
  })
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(), // I know you're using Svelte, so naturally, replace the relevant configurations, but the important part is really just PurgeCSS.
    tailwindcss(),
  ],
  css: {
    postcss: {
      plugins: [
        purgeCSSPlugin({
          content: [
            './**/*.html',
            './**/*.js',
            './**/*.jsx',
            './**/*.ts',
            './**/*.tsx',
          ],
          defaultExtractor: content => content.match(/[\w-/:.\[\]\(\)_\[\]]+(?<!:)/g) || [],
          variables: true,  // Remove unused CSS variables
          keyframes: true,  // Remove unused animations
          fontFace: true,   // Remove unused font faces
        }),
        removeCommentRules,
      ]
    }
  }
})

    样式.css

    @import 'tailwindcss';

/* ... */
    测试
    npm run build

    结果从 18KB 降到了 4KB。如果您不需要输出中的其他部分，则可以进一步优化，如链接的 TailwindCSS 到 nativeCSS 帖子中所述。

    测试步骤

    • 禁用自动源检测source(none)-> 结果不太好（未使用的变量为 18kb）
    • 使用自动源检测排除文件和目录.gitignore-> 结果不太好（未使用的变量为 18kb）
    • 使用@tailwindcss/postcss插件而不是更兼容的 vite 插件 -> 结果不太好（未使用的变量为 18kb）
    • 使用@tailwindcss/postcss插件和purgecss-> 不推荐用于 Vue 项目，无需 Vite 即可工作（由于 Vue 导致的特定错误；它可能在原生 JavaScript Vite 项目中起作用；但我们有一个来自 TailwindCSS 的 Vite 特定插件并非巧合。）
    • 使用@tailwindcss/vite插件并purgecss->成功（4kb，无未使用的变量）

    v4 相关内容

    为什么使用 Vite 时无法从 TailwindCSS 中排除文件？

    使用 时@tailwindcss/vite，Tailwind 使用 Vite 模块图扫描代码中的类名，而不是文件系统 huelistics（不使用 时@tailwindcss/vite）。因此，这些其他类名可能会出现在某些编译代码中。

    tailwindlabs/tailwindcss PR #16425一旦进入，您就可以切换到 Vite 中的基于文件的扫描。

    感谢@Wongjn！

    • 1

相关问题