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

Question

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.

Answer 1

You should remove the curly braces in your classNames :
<div className='container flex mx-auto max-w-screen-md items-center h-screen'>

Answer 2

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.