tailwind-css - 在 Tailwind 中将所有带有屏幕变体的 margin 值列入安全列表

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 .但是您的正则表达式模式也将不仅仅获取 margin 实用程序。

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

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