能否在PostCSS中使用Tailwind的媒体查询变体？

Tailwind 内置了 sm、md、lg、xl、2xl 这些响应式工具变体，你也可以自定义这些断点。在HTML的类名中，我们可以这样使用它们：

<img class="w-16 md:w-32" src="...">

但如果想在PostCSS中实现类似的响应式效果，直接像下面这样写是无法运行的：

img {
  @apply w-16;

  /* 这段代码无法生效 */
  md:& {
    @apply w-32;
  }
}

要实现这个需求，你可以使用Tailwind提供的 @screen 指令，它能帮你快速引用配置好的响应式断点：

img {
  @apply w-16;

  @screen md {
    @apply w-32;
  }
}

这段代码会被编译成包含对应媒体查询的CSS。比如默认的 md 断点是768px，编译后的结果如下：

img {
  width: 4rem;
}

@media (min-width: 768px) {
  img {
    width: 8rem;
  }
}

如果需要自定义响应式断点，只需修改Tailwind配置文件中的 theme.screens 部分，@screen 指令会自动适配这些自定义值。

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