变体悬停在 TailwindCss 中不适用

Question

我有一个自定义类设置，我正在尝试添加变体，但似乎行为与经典 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'],
    }
}

Answer 1

您可以直接在.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 属性，因为它已默认启用。