文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以在PostCSS中使用Tailwind的媒体查询变体吗？

问我可以在PostCSS中使用Tailwind的媒体查询变体吗？
EN

Stack Overflow用户

提问于 2022-12-01 15:11:14

回答 1查看 14关注 0票数 0

“顺风”提供响应实用程序变体 sm、md、lg、xl和2xl，您也可以使用定义你自己。

我可以在类名中使用它们：

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

但我也可以在PostCSS中使用它们吗？

例如，我希望这样做(代码实际上不起作用)：

img {
  @apply w-16;

  /* I want this section to apply whenever the `md` media query applies. */
  md:& {
    @apply w-32;
  }
}

发布于 2022-12-01 18:47:48

是的，您可以使用@screen指令或屏幕()函数来完成它。

img {
  @apply w-16;

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

img {
  @apply w-16;

  @media screen(md) {
    @apply w-32;
  }
}

有时候，Tailwind可能会对不支持的嵌套语法大喊大叫(取决于您的PostCSS配置或预处理较少)，因此您可能会稍微修改代码。

img {
  @apply w-16;
}

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

最后，如果您愿意，没有什么可以阻止您在@apply中使用变体。

img {
  @apply w-16 md:w-32;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74644108

复制

相似问题

问我可以在PostCSS中使用Tailwind的媒体查询变体吗？EN