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

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

.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 属性，因为它已默认启用。

变体悬停在 TailwindCss 中不适用

1 个答案: