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

【问题标题】：I want to make my custom tailwind classes use media prefixes我想让我的自定义顺风类使用媒体前缀
【发布时间】：2021-03-14 15:31:13
【问题描述】：

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

@apply 不能与.sm\: 一起使用，因为.sm\: 要么找不到，要么它的实际定义包含一个伪选择器，如:hover、:active 等。如果你确定.sm\: 存在，请确保所有@import 语句都得到正确处理在 Tailwind CSS 看到您的 CSS，因为 @apply 只能用于同一 CSS 树中的类。

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

【问题讨论】：

标签： tailwind-css

【解决方案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 {
    .your-class {
        @apply your-rules-for-the-sm-breakpoint-and-above
    }
}

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

【讨论】：

非常感谢！！