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

Question

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

@apply cannot be used with .sm\: because .sm\: either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .sm\: exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

谁能解释一下应该如何将这些前缀与自己的习惯一起使用类？已经感谢您的帮助！ <3

Answer 1

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

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

编辑

您通常可以使用预处理器或嵌套 postcss 来声明它：

.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... */

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

I want to make my custom tailwind classes use media prefixes

tailwind-css

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

I want to make my custom tailwind classes use media prefixes

tailwind-css

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