我想让我的自定义顺风类使用媒体前缀

Question

我正在用tailwind作为css框架构建一个网站，但是我遇到了一个问题，当我尝试使用tailwind的媒体查询前缀（sm:、lg:等）时，会抛出这个错误：

@apply不能与使用.sm\:，因为.sm\:悬停，：：要么找不到，或者它的实际定义包括一个伪选择喜欢活跃等，如果您确信.sm\:存在，确保任何@import声明是正确处理之前顺风CSS看到您CSS，as@apply只能用于同一 CSS 树中的类。

有人可以解释如何将这些前缀与自己的自定义类一起使用吗？已经感谢您的帮助！<3

Answer 1

您可以使用@screen指令@apply根据断点设置样式。

请参阅：https : //tailwindcss.com/docs/functions-and-directives#screen

编辑

您通常可以使用预处理器或 postcss-nested 像这样声明它：

.your-class {
    @apply your-rules

    @screen sm {
        @apply your-rules-for-the-sm-breakpoint-and-above
    }

    @screen md  {
        @apply your-rules-for-the-md-breakpoint-and-above
    }
    /* etc... */
}

否则以这种方式使用它

.your-class {
    @apply your-rules

    @screen sm {
        @apply your-rules-for-the-sm-breakpoint-and-above
    }

    @screen md  {
        @apply your-rules-for-the-md-breakpoint-and-above
    }
    /* etc... */
}