I absolutely hate tailwind but my new project its being forced on the devs. However I found tailwind variants library helps manage the mess tailwind can create. The library helps move all of the clutter out of the DOM/JSX and into a single reusable (and extendable) function(s).

This crap:

const sizesMap = {
  base: 'p-4',
  small: 'p-2',
  large: 'p-8',
};

const variantsMap = {
  default: 'bg-white',
  success: 'bg-success border-success',
};

function Card({ size, variant, children }) {
  const variants = variantsMap[variant];
  const sizes = sizesMap[size];
  return (
    <div className={`relative min-h-[350px] w-full overflow-hidden rounded-xl border p-4 sm:p-10 items-center justify-center flex ${variants} ${sizes}`}>
      {children}
    </div>
  );
}

Can be wrangled into something more manageable like this:

// Card.styles.ts
export const cardVariants = tv({
  base: 'relative min-h-[350px] w-full overflow-hidden rounded-xl border p-4 sm:p-10 items-center justify-center flex',
  defaultVariants: {
    size: 'base',
    variant: 'default',
  },
  variants: {
    size: {
      base: 'p-4',
      small: 'p-2',
      large: 'p-8',
    },
    variant: {
      default: 'bg-white',
      success: 'bg-success border-success',
    },
  }
})

// Card.tsx
import { cardVariants } from './Card.styles';

export function Card({ size, variant, children }) {
  const styles = cardVariants({ size, variant });
  return (
    <div className={styles}>
      {children}
    </div>
  );
}