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

Question

Tailwind提供响应式实用程序变体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;
}
}

Answer 1

可以使用@screen指令或screen()函数

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

有时顺风可能会大喊不支持嵌套语法(取决于你的PostCSS配置或预处理程序，如Less)，所以你可以稍微改变代码

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

最后没有什么可以阻止你使用@apply中的变体，如果你愿意的话

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