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

html5 • • 问答

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

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

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

回答

您可以使用@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... */
}

否则以这种方式使用它

以上是我想让我的自定义顺风类使用媒体前缀的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>