变体悬停不适用于 TailwindCss

Question

我有一个自定义 class 设置，我正在尝试添加变体，但行为似乎与 classic 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 属性，因为它已默认启用。

变体悬停不适用于 TailwindCss

Variants hover not applying in TailwindCss

tailwind-css