使 Tailwind 标题和排版具有响应性

Question

我想让我的标题 h1, h2, h3 等响应。我以为我可以做类似的事情：

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

但是我得到一个错误。

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

Answer 1

更新：

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

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

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

不幸的是你不能那样做:---

来自 tailwind 文档：

It's important to understand that @apply will not work for inlining pseudo-class or responsive variants of another utility. Instead, apply the plain version of that utility into the appropriate pseudo-selector or a new media query

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;
   }
}