Why pressed class is not working on my custom component?

[elVengador]

I'm styling a button with tailwind, I'm sending this class name

${baseStyles} bg-transparent text-cyan-600 hover:bg-gray-200 hover:dark:bg-gray-800 pressed:bg-blue-200 pressed:dark:bg-gray-600,

Everything works except the pressed style, I'm testing with variant flat and color primary, also I checked the tailwind class, but I couldn't find a pressed class, the complete component here:

import {
  Button as RACButton,
  type ButtonProps as RACButtonProps,
} from "react-aria-components";
import { twMerge } from "tailwind-merge";

type ButtonVariant = "solid" | "flat";
type ButtonColor =
  | "primary"
  | "secondary"
  | "destructive"
  | "foreground"
  | "background";

export interface ButtonProps extends RACButtonProps {
  variant?: ButtonVariant;
  color?: ButtonColor;
}

const baseStyles = "px-2 py-1 rounded-md";

const styles: { [key in ButtonVariant]: { [key in ButtonColor]: string } } = {
  flat: {
    primary: `${baseStyles} bg-transparent text-cyan-600 hover:bg-gray-200 hover:dark:bg-gray-800 pressed:bg-blue-200 pressed:dark:bg-gray-600`,
    secondary: `${baseStyles} bg-transparent text-orange-600 hover:bg-gray-200 hover:dark:bg-gray-800 pressed:bg-gray-400 pressed:dark:bg-gray-600`,
    destructive: `${baseStyles} bg-transparent text-red-700 hover:bg-gray-200 hover:dark:bg-gray-800 pressed:bg-gray-400 pressed:dark:bg-gray-600`,
    foreground: `${baseStyles} bg-transparent text-ev-dark hover:bg-gray-200 dark:text-ev-light hover:dark:bg-gray-600 pressed:bg-gray-400 pressed:dark:bg-gray-600`,
    background: `${baseStyles} bg-transparent text-ev-light hover:bg-gray-800 dark:text-ev-dark hover:dark:bg-gray-200 pressed:bg-gray-700 pressed:dark:bg-gray-300`,
  },
  solid: {
    primary: `${baseStyles} bg-ev-primary/100 hover:bg-cyan-700 pressed:bg-cyan-800 text-white`,
    secondary: `${baseStyles} bg-ev-secondary hover:bg-orange-700 pressed:bg-orange-800 text-white`,
    destructive: `${baseStyles} bg-ev-destructive hover:bg-red-800 pressed:bg-red-900 text-white`,
    foreground: `${baseStyles} bg-ev-dark hover:bg-gray-200 hover:dark:bg-grey-100 pressed:bg-gray-400 pressed:dark:bg-gray-600 text-black dark:text-white`,
    background: `${baseStyles} bg-ev-light hover:bg-gray-800 hover:dark:bg-gray-200 pressed:bg-gray-700 pressed:dark:bg-gray-300 text-white dark:text-dark`,
  },
};

const styleIt = ({ variant = "solid", color = "primary" }: ButtonProps) =>
  styles[variant][color];

export const Button = (props: ButtonProps) => {
  console.log({ props });
  return (
    <RACButton
      {...props}
      className={twMerge(styleIt(props), props.className as string)}
    />
  );
};

video when I test it

Screen.Recording.2024-02-22.at.13.48.21.mov

[reidbarber]

Are you using the tailwind plugin? It allows you to use pressed: instead of data-[pressed]:.

[elVengador]

That solves the issue, thank you