PurgeCSS 和 Tailwind CSS，如何使用命令行界面保持响应类？

Question

我有“完整的”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 项目的一部分）

Answer 1

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

默认提取器将文件中的每个单词都视为选择器，但不考虑 Tailwind CSS.[=24 中大量使用的冒号 (:) 等特殊字符=]

因此，默认情况下，PurgeCSS 会删除响应式 (md:px-6)、悬停式 (hover:bg-gray-500) 等类。为避免这种情况，Tailwind 有其 own extractor. You could use this (or your very own) extractor but the PurgeCSS CLI has limited options 并且缺少 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) || []

PurgeCSS 和 Tailwind CSS，如何使用命令行界面保持响应类？

PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

node.js

command-line-interface

tailwind-css

css-purge

PurgeCSS 和 Tailwind CSS，如何使用命令行界面保持响应 类？

PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

node.js

command-line-interface

tailwind-css

css-purge

PurgeCSS 和 Tailwind CSS，如何使用命令行界面保持响应类？