英文:
Tailwind CSS: add pattern for responsive classnames to safelist?
问题
在项目的Tailwind配置的白名单中，我正在使用这个模式来包括所有的填充工具：
{ 模式: /^p(\w?)-/ }
是否可以通过模式来包含响应式工具变体（例如 sm:p-, md:p-, lg:p-, ...）？
我尝试了以下方式，但Tailwind告诉我这不是一个被识别的模式：
{ 模式: /^sm:p(\w?)-/ }
英文:
I'm using this pattern in the safelist of a project's tailwind config. to include all padding utilities:
{ pattern: /^p(\w?)-/ }
Is it possible to include responsive utility variants via a pattern as well (i.e. sm:p-, md:p-, lg:p-, ...)?
I've tried the following which tailwind tells me is not a recognized pattern:
{ pattern: /^sm:p(\w?)-/ }
答案1
得分: 3
根据文档：
> 模式只能匹配基础实用程序名称，例如/bg-red-.+/，如果模式包含变体修饰符，如/hover:bg-red-.+/，则不会匹配。
>
> 如果要强制 Tailwind 为任何匹配的类生成变体，请使用variants选项将它们包含在内：
因此，对于您的情况：
{
pattern: /^p(\w?)-/,
variants: ['sm', 'md', 'lg'],
}
英文:
As per the documentation:
> Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
>
> If you want to force Tailwind to generate variants for any matched classes, include them using the variants option:
So for your case:
{
pattern: /^p(\w?)-/,
variants: ['sm', 'md', 'lg'],
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论