Tailwind width and height are not applied to the inner element

Question

For some unknown reason, the child element is not getting the height and width of its parent:

<div class="h-10 w-10">
    <div class="w-full h-full"></div>
</div>

Here's my style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layout utilities {
    .animation-delay-1 {
        animation-delay: 1s;
    }

    .animation-delay-500 {
        animation-delay: 500ms;
    }
}

And here's my tailwind.config.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        tomato: {
          400: '#FD6A5E'
        }
      },
      animation: {
        wiggle: 'wiggle 5s infinite'
      },
      keyframes: {
        wiggle: {
          '0%, 100%': {
            transform: 'translateY(0.5rem) scale(0.5)'
          },
          '50%': {
            transform: 'translateY(0) scale(0.5)'
          }
        }
      }
    },
  },
  plugins: [],
}

And this is an image of the Chrome's DevTools:

What might be the problem?