While learning React, Next.js and Tailwind, I have encountered some weird behavior. I can only use some of the fixed sizes provided according to the docs (https://tailwindcss.com/docs/size). In the code below, size-30 is not working, nor is size-50. However, size-20, size-40 and size-60 are working.

My question is: why? Is this expected behavior or am I doing something wrong?

I’m using the dev server in Next.js (npx create-next-app@latest). If I understand correctly that should take care of recompiling the code on the fly (which is working correctly with other Tailwind classes, just not size).

function Content() {
  return (
    <>
      <div className="flex flex-row">
        <div className="size-30 bg-red-100"></div>
      </div>

    </>
  );
}

I tried to make a fixed size div with Tailwind. It did not work.