如何在CSS中使用PurgeCSS优化Tailwind项目_通过PurgeCSS删除未使用Tailwind类-css教程-PHP中文网

如何在CSS中使用PurgeCSS优化Tailwind项目_通过PurgeCSS删除未使用Tailwind类

P粉602998670

发布： 2025-11-25 20:22:40

原创

857人浏览过

启用 Tailwind 内置 Purge 功能可删除未使用类，减小 CSS 文件体积。在 tailwind.config.js 中配置 purge 选项指定文件路径，如 HTML、JS、Vue、React 文件，构建时仅保留用到的类。生产环境启用 purge，开发环境关闭以保持热重载速度。通过 package.json 设置 build 和 dev 脚本区分环境。注意避免动态拼接类名导致样式丢失，可用 safelist 保留特定类。正确配置后，输出文件可从几百 KB 减至几十 KB，显著提升性能。

如何在css中使用purgecss优化tailwind项目_通过purgecss删除未使用tailwind类

在使用 Tailwind CSS 构建项目时，会生成一个非常庞大的 CSS 文件，包含所有可用的实用类。但在实际项目中，只用到其中一小部分。如果不处理，会导致页面加载变慢、性能下降。通过 PurgeCSS 可以自动删除未使用的 Tailwind 类，显著减小文件体积。

启用 Tailwind 的 Purge 功能（推荐方式）

Tailwind v1.4+ 内置了对 PurgeCSS 的支持，无需单独安装 PurgeCSS。只需在 tailwind.config.js 中配置 purge 选项，指定需要扫描的文件路径。

支持 HTML、JS、Vue、React 等模板文件
Tailwind 会在构建时分析这些文件中出现的类名
仅保留被使用的类，其余全部移除

示例配置：

module.exports = {
  purge: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

登录后复制

构建命令与环境区分

Purge 只应在生产环境中启用，开发时关闭以保证热重载速度。

立即学习“前端免费学习笔记（深入）”；

Jenni AI

使用最先进的 AI 写作助手为您的写作增光添彩。

查看详情

在 package.json 中设置脚本：

"scripts": {
  "build": "TAILWIND_MODE=build tailwindcss build -i ./src/input.css -o ./dist/output.css",
  "dev": "tailwindcss watch -i ./src/input.css -o ./dist/output.css"
}

登录后复制