Tailwind CSS 3 is not being applied in my React app

I want to use Tailwind CSS in my React app, but it is not working. I followed the description on the Tailwind site for how to install it, but the CSS is not being applied.

App.js

 // import './App.css'; import './index.css'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Home from './Home/Home' function App() { return ( <Router> <Routes> <Route> <Route exact path="/" element={<Home/>} /> </Route> </Routes> </Router> ); } export default App; 

index.css

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

tailwind.config

 module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html", ], purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } 

postcss.config.js

 module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } 

package.json

 { "name": "archives", "version": "0.1.0", "private": true, "dependencies": { "@tailwindcss/postcss7-compat": "^2.2.17", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "nanoid": "^4.0.0", "picocolors": "^1.0.0", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", "source-map-js": "^1.0.2", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "postcss-flexbugs-fixes": "^5.0.2", "tailwindcss": "^3.1.6" } } 

Home.js

 import React from 'react'; import '../index.css'; const Home = () => { return ( <div className='w-full h-full'> <div className='flex justify-center'> <h1 className= 'text-2xl lg:text-5xl font-bold text-green-600 mt-12'> hi</h1> </div> </div> ); }; export default Home;