Tailwind with React, multiple fixed sizes not working

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.

>Solution :

Assuming you have not customized the size or spacing theme values in your Tailwind configuration. this is expected behavior.

If you look through the available class names in the documentation, you’ll see there are is no size-30 or size-50 classes included by default. If you wanted these class names to exist, you could consider adding them to your Tailwind configuration like:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '30': '…',
        '50': '…',

Or

module.exports = {
  theme: {
    extend: {
      size: {
        '30': '…',
        '50': '…',