Tailwind转原生CSS输出含未使用类与变量的问题排查

你遇到的情况是因为Tailwind默认未开启精准摇树优化——它会把完整的默认工具类、基础样式变量全量打包，哪怕你只用到少数类。不管用CLI还是PostCSS集成，只要没正确配置，都会出现这个问题。

问题复现 #

你的输入文件：

• input.css:

@import "tailwindcss";

• 页面HTML:

<div class="text-center text-red-500 font-bold text-[2rem] lg:text-[4rem] lg:text-left md:hover:first:text-blue-500 space-y-6">
  Hello, World!
</div>

默认构建后输出的output.css有2763行，充斥着未使用的工具类（比如.pointer-events-auto、.not-sr-only）和多余CSS变量。

解决步骤 #

1. 配置Tailwind的content选项（核心）

创建或修改tailwind.config.js，指定Tailwind需要扫描的文件路径，让它自动识别你实际用到的类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 替换成你项目实际的HTML/JS/TS文件路径
    "./src/**/*.{html,js,ts,jsx,tsx}",
    "./index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这个配置会让Tailwind遍历指定文件，只生成你用到的类和对应变量。

2. 使用生产环境构建命令

• 用Tailwind CLI的话，加上--minify参数（同时开启摇树和压缩）：

tailwindcss -i input.css -o output.css --minify

• 用PostCSS的话，确保PostCSS配置正确引用Tailwind，并且执行生产环境构建命令（比如npm run build，而非开发环境的watch命令）。

3. 验证效果

配置完成后重新构建，输出的CSS会大幅精简：

• 只包含你用到的类：text-center、text-red-500、font-bold，以及对应的响应式（lg:）、伪类（md:hover:first:）变体
• CSS变量仅保留用到的--color-red-500、--color-blue-500、--font-weight-bold等，多余变量会被移除
• 必要的基础样式（比如box-sizing: border-box）会保留，这是Tailwind的核心基础，不属于冗余内容

补充说明 #

默认出现的未使用内容，是Tailwind默认base和utilities层的完整集合——没有content配置时，Tailwind无法识别你用到哪些类，只能全量输出。只要正确配置content，摇树优化就会自动生效，只保留你实际需要的CSS。

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