TailwindCSS CLI v4.3.0生成冗余类问题及原因定位

更新说明 #

已确定问题原因是二进制文件与源文件处于同一目录，导致CLI扫描自身并提取其中所有字符串。

问题现象 #

在Linux上运行TailwindCSS 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相关内容则说明异常，该结果与Tailwind在线Playground及npm版Tailwind CLI的输出均不一致。

冗余样式详情 #

所谓样板类，指的是color-stone-50、color-stone-100、color-stone-300等未在HTML文件中使用、且不会在Playground中生成的颜色类。从文件行数来看，Playground仅生成约400行代码，而本地二进制版本生成的输出文件却有4000行。我已将输出内容发布至Pastebin。

npm版CLI对比情况 #

通过npm安装并运行CLI的步骤如下：

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

运行npx @tailwindcss/cli -i input.css -o output.css --watch后，生成的output.css文件为188行；若移除--watch并添加--optimize参数，则为292行。

无法理解为何会出现这种差异，这种不一致性令人困扰，希望得到解释。

内容的提问来源于stack exchange，提问作者Thomas the Programmer