Differences between @vanilla-extract/recipes & cva (Class Variance Authority) ?

[Sliov]

Hey there,

We've been building some components for our design system using @vanilla-extract/recipes & tailwindcss and we love it so far.

Here's a quick example of how we use it:

// Input.css.ts
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

export const input = recipe({
  base: 'shadow-xs block w-full rounded-md text-gray-900 placeholder-gray-500 transition focus:ring-4',

  variants: {
    intent: {
      gray: 'border-gray-300 focus:border-gray-300 focus:ring-gray-100',

      primary: 'focus:border-primary-300 focus:ring-primary-100 border-gray-300',

      error: 'border-error-300 focus:border-error-300 focus:ring-error-100',
    },

    size: {
      sm: 'px-3 py-2',
      md: 'px-3.5 py-2.5',
    },
  },

  defaultVariants: {
    intent: 'primary',
    size: 'md',
  },
});

export type InputVariants = RecipeVariants<typeof input>;

// Input.tsx
import * as React from 'react';
import { twMerge } from 'tailwind-merge';
import type { InputVariants } from './Input.css';
import * as recipes from './Input.css';

export type InputProps = Omit<React.ComponentPropsWithRef<'input'>, 'size'> & InputVariants;

export const Input = React.forwardRef<HTMLInputElement, React.PropsWithRef<InputProps>>(
  ({ children, className, intent = 'gray', type = 'text', size = 'md', ...props }, ref) => {
    const inputClasses = twMerge(
      recipes.input({
        intent,
        size,
      }),
      className
    );

    return <input ref={ref} type={type} {...props} className={inputClasses} />;
  }
);

Input.displayName = 'Input';

I know all these tailwind classes are not for everyone, but the decision was made that tailwindcss would be where we configure our "tokens".

I came across class-variance-authority recently, and it looks like it might solve the same problem as @vanilla-extract/recipes but I'm not sure what exactly the differences are between the two?

Is @vanilla-extract/recipes overkill in my case? Would cva be more performant? What if I want to use make the base variable dynamic a la Provider?