将 Tailwind 中具有屏幕变体的所有边距值列入安全列表

Question

我需要将所有边距值与相应的响应大小列入安全列表。

例子：

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

等等。

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

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

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

Answer 1

因此，我想先说一下，如果这适用于生产站点，则不建议这样做。Tailwind 文档明确指出安全列表是最后的努力。仅此安全列表生成的文件就超过 80kb。

也就是说，响应式变体缺少的部分是文档中所述的变体选项。但您的正则表达式模式所获取的不仅仅是保证金实用程序。

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

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