使 Tailwind 标题和排版响应式答案

【问题标题】：Make Tailwind headings and typography responsive使 Tailwind 标题和排版响应式
【发布时间】：2020-07-28 00:06:42
【问题描述】：

我想让我的标题 h1, h2, h3 等响应。我想我可以这样做：

h1 {
@apply text-lg lg:text-2xl xl:text-3xl;
}

然后我得到一个错误。

如何最好地解决这个问题？

【问题讨论】：

根据@apply 的文档，这应该可以正常工作。也许问题出在您的开发配置上，但我不知道您遇到了什么错误

标签： tailwind-css

【解决方案1】：

更新：

这个问题是在使用 Tailwind 1.2 时提出的。从 1.7 版开始，Tailwind 支持 @apply 指令中的伪类。起初它是实验性功能，必须在配置中手动打开，但目前它是正常功能。

所以问题中的代码可以正常工作。

来源：https://blog.tailwindcss.com/tailwindcss-1-7

~~很遗憾你不能那样做：---~~

来自顺风文档：

了解@apply 不适用于内联伪类或另一个实用程序的响应变体，这一点很重要。相反，将该实用程序的普通版本应用到适当的伪选择器或新媒体查询中

https://tailwindcss.com/docs/functions-and-directives/

相反，您有 @screen 。所以在你的情况下，它会是。

h1 {
   @apply text-lg;

   @screen lg {
      @apply text-2xl;
   }

   @screen xl {
      @apply text-3xl;
   }
}

或者

h1 {
   @apply text-lg;
}

@screen lg {
   h1 {
      @apply text-2xl;
   }
}

@screen xl {
   h1 {
      @apply text-3xl;
   }
}

【讨论】：

非常感谢。我会除了你的答案。你知道如何添加/使用伪元素:before 和:after 到例如Tailwind 中的 `
?

Tailwind 中没有前后前缀。您可以自己添加它，也可以使用“yutahaga/tailwindcss-pseudo-elements”之类的插件，但我使用 tailwind 很长时间了，从来没有这种需要。我看不出为什么不在“正常” css 中输入这个的原因；）只是 xxx:before { content: "", @apply tailwind-classes-here }

@apply 的文档显示了伪变体的使用，我也一直以这种方式使用它们。 OP 应该能够使用他们示例中的代码。

@Zach 这个问题是 8 个月前提出的；）不再是问题