Stop writing 40 classes per element.

// Button.tsx — 😵 Unreadable mess
export function Button({ children, variant, size }) {
  return (
    <button
      className={`
        px-4 py-2 rounded-lg font-medium
        transition-all duration-200
        focus:outline-none focus:ring-2
        focus:ring-offset-2 disabled:opacity-50
        disabled:cursor-not-allowed
        ${variant === 'primary' 
          ? 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500' 
          : variant === 'danger'
          ? 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-500'
          : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}
        ${size === 'sm' ? 'text-sm px-3 py-1.5' : size === 'lg' ? 'text-lg px-6 py-3' : ''}
      `}
    >
      {children}
    </button>
  );
}

// Button.tsx — 😍 Crystal clear
export function Button({ children, variant, size }) {
  return (
    <button className={`ui-button ui-${variant} ui-${size}`}>
      {children}
    </button>
  );
}