Tailwind CSS is not showing the changes. [React + Tailwindcss]

I am in the middle of making an Instagram Clone SSR project using React and Tailwind.CSS but I got stuck with Tailwind CSS I have installed the required dependencies, changed scripts that was needed also added paths in tailwindcss.config.js, added @tailwind directives to the app.css file also but whatever is written in class names is not reflecting in the result after npm start

Login.js file for Login Page

import { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import FirebaseContext from "../context/firebase";
import "../styles/app.css";
export default function Login() {
const navigate = useNavigate();
const { firebase } = useContext(FirebaseContext);
const [emailAddress, setEmailAddress] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const isInvalid = password === "" || emailAddress === "";
const handleLogin = () => {};
useEffect(() => {
document.title = "Login - Instagram";
}, []);
return (
<div className='container flex mx-auto max-w-screen-md items-center h-screen'>
<div className='flex w-3/5'>
<img
src='/images/iphone-with-profile.jpg'
alt='iPhone with Instagram App'
className='max-w-full'
/>
</div>
<div className='flex flex-col w-2/5'>
<p>This is the Form</p>
</div>
</div>
);
}

package.json file - scripts and dependencies

{
"name": "instagram",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"date-fns": "^2.29.3",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loading-skeleton": "^3.1.0",
"react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"build:css": "postcss src/styles/tailwind.css -o src/styles/app.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/app.css --watch",
"react-scripts:start": "react-scripts start",
"start": "run-p watch:css react-scripts:start",
"build": "run-s build:css 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": "^10.4.13",
"babel-eslint": "^10.1.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-scope": "^7.1.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"postcss-loader": "^7.0.2",
"prettier": "^2.8.4",
"tailwindcss": "^3.2.6"
}
}

postcss.config.js

module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};

tailwind.config.js

module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
theme: {
extend: {},
},
variants: {},
plugins: [],
content: ["./src/**/*.html", "./src/**/*.jsx", "./public/index.html"],
};

And in my app.css file the original file contained the "@tailwind" commands (base, utilities, components), but they were replaced with the generated CSS code that follows the defined styles in the Tailwind CSS configuration.

You should remove the curly braces in your classNames :

<div className='container flex mx-auto max-w-screen-md items-center h-screen'>

I think it's because your component's extension is .js but you don't have .js files covered in your Tailwind config (content property). I would recommend changing the extension of your component's file to .jsx.