Question

因此，我正在将TailwindCSS用于正在开发的WP主题。

在创建生产级主题文件时遇到了一个问题，因为从我对问题的理解来看，清除无法识别模板部件上使用的条件类。例如，假设我创建了一个名为“ business-card.php”的模板部件，并在其中向其传递了一个变量type（使用set_query_var / get_query_var）：

page-about.php

set_query_var('type', 'A');
get_template_part('template-parts/content/business', 'card');

set_query_var('type', 'B');
get_template_part('template-parts/content/business', 'card');

businesss-card.php

$type = get_query_var('type')
<div class="<?php echo type == 'A' ? 'text-color-A' : 'text-color-B' ?>">
--- insert some content here ---
</div>

因此将有两个div，一个将具有text-color-A类，另一个将具有text-color-B，它们都是使用配置文件创建的（而不是包含在基本的windwind主题中）。这在开发中很好-因为tailwind实际上是从config文件创建实用程序颜色类的。但是由于某种原因，当它在生产中（即清除和缩小）时，它没有那些实用程序类，它们仅在模板部分中用作条件类（而在其他任何文件中均未使用）。

Answer 1

如果您使用 Tailwind 2.0+，您可以直接在您的 purge CSS 文件中配置将被 tailwind.config.js 忽略的白名单类。

可以在下面看到我自己的代码示例，其中我将 text-ingido-400 类列入白名单

  // tailwind.config.js
  module.exports = {
    purge: {
      content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

      options: {
        safelist: ['text-indigo-400']
      }
    } ,
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   }

有关更多信息，您可以查看位于以下位置的相关文档： https://tailwindcss.com/docs/optimizing-for-production

Answer 2

您可以使用PurgeCSS白名单选项添加这些类。

const purgecss = new Purgecss({
    //... Your config
    whitelist: ['text-color-A', 'text-color-B', 'etc']
})

或白名单模式（正则表达式匹配）

whitelistPatterns: [/^text-color/], // All classes starting with text-color

您可以找到更多信息here

Answer 3

直接从tailwind docs拍摄：

PurgeCSS故意在HTML中查找类的方式非常幼稚。它不会尝试解析HTML并查找类属性或动态执行JavaScript，而只是在整个文件中查找与该正则表达式匹配的所有字符串：

/[^<>"'`\s]*[^<>"'`\s:]/g

这意味着避免使用字符串串联在模板中动态创建类字符串非常重要，否则PurgeCSS不会保留这些类。

不要使用字符串串联来创建类名：

<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>

请动态选择完整的类名：

<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

只要类名完整显示在模板中，PurgeCSS就不会删除它。

purgecss无法识别条件类

3 个答案: