Why are level 1 headings the same size as other headings?

I just created a new react app and installed tailwindcss and antd libraries. For some reason, my header tags are not changing the font. My code is:

import { Button } from "antd";

function PageHeader() {
  return (
    <>
      <div className="flex flex-wrap">
        <h1 className="p-5">Hello</h1>
      </div>
    </>
  );
}

export default PageHeader;

However, the font size doesn't change at all and is still as small as a

All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.

The reason for this is two-fold:

It helps you avoid accidentally deviating from your type scale. By default, the browsers assigns sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale.

In UI development, headings should often be visually de-emphasized. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.

https://tailwindcss.com/docs/preflight#headings-are-unstyled

For those who arrive here disappointed that you're not getting the styles you expected from heading elements implemented for that purpose, accessibility and usability best practice mandates that you use headings for structure, not styling. If all you're after is visual emphasis, use CSS (via library-provided classes or custom classes).