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

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

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.