PurgeCSS和Tailwind CSS，如何使用命令行界面保留响应类? [英] PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

问题描述

我有完整"的3.9 MB的Tailwind CSS文件并成功应用了PurgeCSS将其减小到9 kB.但这也会清除所有响应式类，例如 md:px-6 ，它们不会出现在我的清除版本中.

I have the "full" 3.9 MB Tailwind CSS file and successfully applied PurgeCSS to reduce it to 9 kB. But it also purged all responsive classes like md:px-6, they don't show up in my purged version.

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

Note: this question is for using the command line interface (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 )中创建输出文件，以便可以检查输入与输出.

I chose to create the output file in a different folder (Project2) so that I could check on the input vs output.

我尝试做的一件事是添加-safelist [/md/] ，但没有帮助.实际上，似乎根本没有使用安全列表...

One thing I tried is to add --safelist [/md/], but didn't help. In fact the safelist didn't seem to be used at all...

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

(I use CLI since it is part of a bigger Python Flask project)

推荐答案

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

PurgeCSS relies on extractors to get the list of selectors used in a file. It provides a default extractor that is working fine with a wide variety of file types, but it can be limited and does not fit every CSS framework out there.

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

The default extractor considers every word of a file as a selector but it doesn't consider special characters like the colon (:) which is heavily used in Tailwind CSS.

因此，默认情况下，PurgeCSS删除响应式( md:px-6 )，悬停( hover:bg-gray-500 )等类.为了避免这种情况，Tailwind使用了自己的提取器.您可以使用此提取器(或您自己的提取器)，但PurgeCSS CLI具有有限的选项，它是缺少 defaultExtractor 选项.

So, by default, PurgeCSS removes responsive (md:px-6), hover (hover:bg-gray-500), etc. classes. To avoid this, Tailwind has its own extractor. You could use this (or your very own) extractor but the PurgeCSS CLI has limited options and it's missing a defaultExtractor option.

幸运的是，它接受配置文件选项，因此，如果您创建自己的 purgecss.config.js 文件并在其中添加默认提取器，它也会保留这些类.您还可以将其他选项添加到该文件中.

Luckily, it accepts a config file option, so if you create your own purgecss.config.js file and add a default extractor in there, it will preserve these classes too. You can also add your other options to this file.

我曾经使用过这种简单的提取器，它也将为您工作:

I used to use this simple extractor which will work for you too:

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

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

Your config file will look like this:

// 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:

And you can use the following command to run PurgeCSS with the above config:

purgecss --config ./purgecss.config.js

这篇关于PurgeCSS和Tailwind CSS，如何使用命令行界面保留响应类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！