How do h1 text became smaller when I used tailwind CSS?

I am currently working on a website for learning react and node.js. When I want CSS I heard about tailwind CSS which is a very good collection of CSS. I decided to use tailwind in my react project. I followed the steps as tailwind’s website says for create-react-app.

After that when I tried a Hello World project using h1 tags the size of the text is too small.

How did this happen? Is this because of tailwind or is this because of my fault?
What are the ways to resolve this?? This is my first time to tailwind.

My code :
JS:

function App() {
  return (
   <div className="App">
    <h1 className="text-center text-green-900 font-bold "  >Hello World</h1>
  </div>
  );
 }

export default App;

Index.css:

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

tailwind.config.js:

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

>Solution :

Tailwind, sets the font-size to inherit for the h1–h6 tags.

See the Base Styles for the "defaults".

So, you have to give them a size class to set it to what you want.