tailwind-css - 在 Tailwind 中使用屏幕变体将所有边距值列入安全列表

Question

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

例子：

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

等等。

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

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

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

Answer 1

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

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

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

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