TailwindCSS CLI v4.3.0正在生成样板类

前端开发 2026-07-09

更新：原因已确认，二进制文件与源文件放在同一文件夹中，因此它在自我扫描时发现了自身内部的所有字符串。

在Linux上运行CLI时，我会得到大量的样板类。这种情况无论是否使用 --optimize都会发生。

根据那些非常友好且有帮助的回答，它的结果应该与 Tailwind Playground 相同。

mkdir tailwind-project 
cd tailwind-project 
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64 
echo '@import "tailwindcss";' > input.css
echo '<!DOCTYPE html><title>a</title><link rel="stylesheet" href="output.css"><body class="bg-blue-500 flex items-center justify-center h-screen"><h1 class="text-white text-4xl font-bold">It works!</h1>' > index.html 
./tailwindcss-linux-x64 -i input.css -o output.css --optimize
grep "color-stone" output.css

如果grep找到color-stone，说明出了问题。这与Playground Tailwind的结果不符，也与npm tailwind-cli的结果不一致

我已将输出贴在 Pastebin

为了让你理解我所说的“样板类”，我指的是像color-stone-50、color-stone-100、color-stone-300等这样的颜色类，它们在我的HTML文件中并不存在，也不会在Playground里生成。或者如果按文件大小来算，playground里约有400行代码（全为制表符缩进），而我的输出文件却约4k行。

好吧。

通过npm安装后再用npm运行时，我们的

mkdir tailwind-npm
cd tailwind-npm
npm init -y
echo '@import "tailwindcss";' > input.css
npm install tailwindcss @tailwindcss/cli
echo

然后执行 npx @tailwindcss/cli -i input.css -o output.css --watch

得到的output.css文件共有188行；如果移除watch并加入 --optimize，则为292行。

我不明白为什么会这样。这种不一致其实让我很困扰。

解决方案

直到v4.3.0

在v4.3.0版本之前，自动源检测默认不会排除独立可执行文件自身。因此如果你在v4.3.0及更早版本中使用独立CLI，并将其放在项目目录内，就需要像使用 @source not 或 .gitignore 那样手动忽略它，正如 rozsazoltan的早前回答所建议，尽管这并非专门针对CLI文件。