So I have a component that does something like this:

const Col = ({ children, className, gap }:DirectionProps) => {
  const gapFunc = gapClass('y')

  return (
    <div className={`flex flex-col ${gapFunc(gap)} ${className}`}>
      {children}
    </div>
  );
};

Where gapFunc returns gap-x-n. If I tried using different numbers for it, and some of them would work, while others didn’t. It seems almost random as to whether a number will work, with some failing. I tested and the numbers that fail could work by manually adding the class name. I am using Storybook, so maybe its an issue with rendering instead? But I wasn wondering if anyone else had some insight into this?