Compound Variants not working properly

[sangosteve]

Discussed in https://github.com/joe-bell/cva/discussions/111

^{Originally posted by **sangosteve** February 12, 2023} Hie I have this Button Component: ``` import React from "react"; import { cva, VariantProps } from "class-variance-authority"; const buttonStyles = cva( "flex items-center justify-center font-semibold px-4 py-2 rounded-md ", { variants: { intent: { primary: "bg-blue-500 text-white hover:bg-blue-600 text-body", warning: "bg-orange-500 text-white hover:bg-orange-600 text-body", success: "bg-green-500 text-white hover:bg-green-600 text-body", error: "bg-red-500 text-white hover:bg-red-500 text-body", }, variant: { outline: 'bg-transparent', link: "bg-transparent border-none", ghost: "border-none", }, fullWidth: { true: "w-full", }, }, defaultVariants: { intent: "primary", fullWidth: false, }, compoundVariants: [ { intent: "primary", variant: "outline", className: "text-blue-500 bg-transparent border border-blue-500 hover:bg-transparent hover:border-blue-700 hover:text-blue-700", }, { intent: "warning", variant: "outline", className: "bg-transparent border border-orange-500 text-orange-500 hover:bg-transparent hover:border-orange-700 hover:text-orange-700", }, { intent: "success", variant: "outline", className: "bg-transparent border border-green-500 text-green-500 hover:bg-transparent hover:border-green-700 hover:text-green-700", }, { intent: "error", variant: "outline", className: "bg-transparent border border-red-500 text-red-500 hover:bg-transparent hover:border-red-700 hover:text-red-700", }, // GHOST { intent: "primary", variant: "ghost", className: "bg-blue-100 text-blue-500 hover:text-blue-700", }, ], } ); export interface ButtonProps extends VariantProps { intent?: "primary" | "warning" | "success" | "error"; variant?: "outline" | "link" | "ghost"; fullWidth?: boolean; children?: React.ReactNode; } const Button = ({ intent, variant, fullWidth, children, ...props }: ButtonProps) => { return ( {children} ); }; export default Button; ```  However when I use the button as follows: ` Test Button` The text is rendered as white instead of text-blue-500. I have attached snapshot from the browser. For some reason it seems the text-white class is not being overridden. Please assist

[joe-bell]

This is correct: cva doesn’t override classes.

Tailwind’s specificity is flat, which means classes can’t override eachother.

You’ll need tw-merge for this behaviour, however I’d recommend structuring your classes in a different way first

Side-note: please use the issue template going forwards