在 Tailwind 中将所有带有屏幕变体的保证金值列入安全列表

Question

我需要将具有相应响应尺寸的所有边距值列入白名单。

示例：

'mb-10'
'md:mb-10'
'xl:mb-10'

等等。

这是我现在 tailwind.config.js 中的内容，但它似乎不适用于 responseive 变体：

safelist: [
    {
      pattern: /\-?m(\w?)-/,
    },
],

是否有使用正则表达式模式实现此目的的简单方法，或者我是否需要任何其他特定配置？我当然想避免手动列出它们。

Answer 1

因此，我想先说明一下，如果这是针对生产站点的，则不推荐这种行为。 Tailwind 文档明确指出安全列表是最后的努力。仅此安全列表生成的文件将超过 80kb。

就是说，对于响应式变体，您缺少的部分是变体选项 as stated in the docs。但是你的正则表达式模式也将不仅仅是保证金实用程序。

为了防止包含其他包含 m-（bottom- 和 scroll-m-）的类，您可以在查看之前将它们添加到非捕获组中对于边距字符串。

module.exports = {
  content: [],
  safelist: [
    {
      pattern: /^(?!(?:scroll|bottom)$)m\w?-/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
}

在 Tailwind 中将所有带有屏幕变体的保证金值列入安全列表

Safelist all margin values with screen variants in Tailwind

tailwind-css

css-purge