Tailwind CSS：为响应类名添加模式到安全列表？

ycl3bljg 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(145)

我在一个项目的顺风配置的安全列表中使用了这个模式。要包括所有填充实用程序，请执行以下操作：

{ pattern: /^p(\w?)-/ }

是否也可以通过模式包括响应式实用程序变体（即sm:p-，md:p-，lg:p-，...）？
我尝试了以下方法，顺风告诉我这不是一个公认的模式：

{ pattern: /^sm:p(\w?)-/ }

1条答案

根据文件：
模式只能匹配基本实用程序名称，如/bg-red-.+/，如果模式包含变体修饰符，如/hover:bg-red-.+/，则无法匹配。
如果你想强制Tailwind为任何匹配的类生成变体，使用variants选项包括它们：
对于你的情况：

{
  pattern: /^p(\w?)-/,
  variants: ['sm', 'md', 'lg'],
}