问变体悬停在TailwindCss中不适用
EN

Stack Overflow用户

提问于 2021-02-21 06:24:08

回答 1查看 818关注 0票数 1

我有一个自定义的类设置，我正在尝试添加变体，但行为似乎与经典CSS没有什么不同。

@layer components {
    @variants hover, focus {
        .btn-primary {
            background-color:blue;
            
        }
    }

    .btn-primary{
        @apply bg-primary rounded-sm border-4 border-primary rounded-sm text-white text-base py-2 px-4 capitalize transition-all;
        
    }
}

如果变体是在.btn-primary之后，那么它应用蓝色背景就像什么都不是一样。悬停或专注于工作。

下面是我根据我看到的其他帖子在我的顺风配置中添加的内容：

variants: {
    extend: {
        backgroundColor: ['hover'],
    }
}

tailwind-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-21 08:27:33

您可以直接在.btn-primary定义中使用hover:和focus:前缀。

.btn-primary {
    @apply bg-primary hover:bg-blue-700 focus:bg-blue-700 rounded-sm border-4 text-white text-base py-2 px-4 capitalize transition-all;  
}

您也不需要将hover和focus变量添加到配置中的backgroundColor属性，因为它在缺省情况下已经启用。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66297167

复制

相似问题

问变体悬停在TailwindCss中不适用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变体悬停在TailwindCss中不适用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变体悬停在TailwindCss中不适用
EN