如何在Tailwind CSS安全列表中添加响应式类名匹配规则？

当然可以通过正则匹配规则包含sm:p-、md:p-这类响应式内边距工具类，不用单独为每个前缀写规则，调整正则表达式即可覆盖所有场景。

问题原因 #

你之前尝试的{ pattern: /^sm:p(\w?)-/ }被提示不识别，大概率是正则匹配范围不够精准，没有覆盖完整的类名结构（比如带数值的完整类名如sm:p-4）。

正确配置示例 #

要一次性包含所有内边距工具类（含响应式变体、方向变体如py-/px-），可以在safelist中使用以下正则：

module.exports = {
  // 其他Tailwind配置项...
  safelist: [
    {
      pattern: /^(sm:|md:|lg:|xl:|2xl:)?p[xy]?-/,
    }
  ]
}

正则说明 #

• ^(sm:|md:|lg:|xl:|2xl:)?：匹配可选的响应式前缀，?表示前缀可存在也可不存在，同时覆盖无前缀的基础内边距类和带响应式前缀的类
• p[xy]?-：精准匹配内边距类的开头，[xy]?表示可选的方向后缀（对应py-/px-），确保覆盖所有内边距方向变体

如果需要兼容更多响应式前缀（如3xl:），直接在括号内添加即可；如果不需要区分方向，也可以简化为/^(sm:|md:|lg:|xl:|2xl:)?p-/。

单个响应式前缀的正确写法 #

如果只想单独匹配sm:前缀的内边距类，修正后的正则应该是：

{
  pattern: /^sm:p[xy]?-/,
}

这样就能正确匹配sm:p-4、sm:py-2这类完整的响应式内边距类。

内容的提问来源于stack exchange，提问作者JoSch