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

Posted 2023-03-06

【中文标题】在 Tailwind 中使用屏幕变体将所有边距值列入安全列表

【英文标题】：Safelist all margin values with screen variants in Tailwind

【发布时间】：2022-01-22 11:11:46

【问题描述】：

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

例子：

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

等等。

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

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

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

【参考方案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'],
    ,
  ],

【讨论】：

非常感谢，我曾尝试使用variants，但由于某种原因它似乎不起作用，也许我的pattern 错了。也就是说，我完全意识到应该避免这种行为，但我暂时在项目中特别需要这种行为，希望我能够以其他方式解决这个问题，以避免这种弊端。同时感谢您的帮助！