Tailwind CSS does not work with react app - no affect

I am trying to create a react website using npx create-react-app myapp cd my app later i followed the steps as per mentioned on tailwind css that are as followed: npm install -D tailwindcss postcss autoprefixer and then npx tailwindcss init -p followed by this i added the following statement to tailwindconfig:

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

later added the following to index .css

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

my app.js looked like following:

import './index.css'

function App() {
  return (
    <div className="App">
      <h1 className='text-orange-500' >Navbar</h1>
    </div>
  );
}

export default App;

still the tailwind is not taking any affect please help folder structure is as followed;

the browser displays as it is