PurgeCSS 和 Tailwind CSS,如何使用命令行界面保留响应式类?

问题描述 投票:0回答:2

我有“完整”的 3.9 MB Tailwind CSS 文件,并成功应用 PurgeCSS 将其减少到 9 kB。但它也清除了所有响应类,例如

md:px-6
,它们不会出现在我的清除版本中。

注意:此问题适用于使用命令行界面(CLI)

这就是我所做的:

purgecss --css ~/Desktop/Projects/Flask/Project1/build/static/css/main.css --content ~/Desktop/Projects/Flask//Project1/build/**/*.html --output ~/Desktop/Projects/Flask/Project2/static/css/main.css

我选择在不同的文件夹中创建输出文件(

Project2
),以便我可以检查输入与输出。

我尝试的一件事是添加

--safelist [/md/]
,但没有帮助。事实上安全列表似乎根本没有被使用...

(我使用 CLI,因为它是更大的 Python Flask 项目的一部分)

node.js command-line-interface tailwind-css css-purge
2个回答
16
投票

PurgeCSS 依赖于 extractors 来获取文件中使用的选择器列表。它提供了一个默认的提取器,可以很好地处理各种文件类型,但它可能受到限制,并不适合所有 CSS 框架。

默认提取器将文件中的每个单词视为选择器,但它不考虑特殊字符,例如 Tailwind CSS 中大量使用的冒号 (

:
)。

因此,默认情况下,PurgeCSS 会删除响应式 (

md:px-6
)、悬停 (
hover:bg-gray-500
) 等类。为了避免这种情况,Tailwind 有自己的自己的提取器。您可以使用这个(或您自己的)提取器,但 PurgeCSS CLI 有 有限的选项 并且缺少
defaultExtractor
选项。

幸运的是,它接受配置文件选项,因此如果您创建自己的

purgecss.config.js
文件并在其中添加默认提取器,它也会保留这些类。您还可以将其他选项添加到此文件中。

我曾经使用过这个简单的提取器,它也适合你:

(content) => content.match(/[\w-/:]+(?<!:)/g) || []

您的配置文件将如下所示:

// purgecss.config.js
module.exports = {
  content: ['build/**/*.html'],
  css: ['build/static/css/main.css'],
  defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
  output: 'static/css/main.css',
};

您可以使用以下命令来运行具有上述配置的 PurgeCSS:

purgecss --config ./purgecss.config.js

编辑:

正如 Fred 在他们的评论中提到的,如果您还想包含像

px-2.5
这样的类,您需要将
.
添加到字符集:

(content) => content.match(/[\w-/:.]+(?<!:)/g) || []

0
投票

注意:我想对已接受的答案发表评论,但我的声誉不足以发表评论。

我正在开发一个编写引导程序的项目,并在其中部分注入尾风类。 Tailwind 现在不使用 PurgeCSS,它会及时编译类,并将许多奇特的字符添加到选择器中。通常您不需要使用 PurgeCSS,因为 tailwind 只生成您需要的内容,但如果您正在处理遗留项目并且需要清除但不清除生成的 tailwind 类,则提取器必须具有所有奇特的字符。我从默认的提取器开始,并添加了组中的每个字符,并带有反斜杠前缀,如下所示:

\!

  • 重要
    !
  • 任意值
    []
  • 自定义媒体查询
    min-w-[400px]:
  • 与号和大于号用于直接子选择器
    [&>p]
  • 任意值的百分比值
    w-[19%]
  • rgb 或 hsl 任意值需要括号
    bg-[rgba(0,0,0,0.5)]
  • 任意值有时需要选择器中的“点”
    .
  • 星号用于定位每个子选择器
    [&>*]

天哪,任意值都有这么多可能性!

结果是:

defaultExtractor: (content) => content.match(/[^<>"=\s]+/g) || [],

编辑:我编写了更简单的黑名单方法正则表达式。

© www.soinside.com 2019 - 2024. All rights reserved.