PurgeCSS 错过了使用冒号的 Tailwind 类：

Question

我有一个使用顺风的网站。我想让 css 大小保持较小，所以我决定使用 purgecss。我正在使用 python 构建静态站点，因此我想使用 CLI。这是我的 Makefile 中处理此问题的代码。

NODE_ENV=production npx purgecss --css css/*.css --content public/*.html public/**/*.html --output demo
npx uglifycss demo/*.css > public/style.css
rm -rf demo/*.css

事情是这样的；它似乎使 css 文件变小了，但 purgecss 似乎完全跳过了任何带有冒号的 classes（如 sm:grid-cols-2）。拿这个 html 片段：

<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-4">
   ...
</ul>

这是网站的样子。

网站应该是这样的。

网格切换到 grid-cols-1 而 lg:grid-cols-4 class 应该被触发。查看 public/style.css 我还可以确认 lg:grid-cols-4 class 未列出。

我是不是调用了 purgecss-command 错误？感觉好像少了什么。

Answer 1

从技术上讲，这是一个重复的问题。可以找到解决方案 .

PurgeCSS 错过了使用冒号的 Tailwind 类：

PurgeCSS misses Tailwind classes that use a colon:

html

css

tailwind-css

css-purge