Tailwind css classes not getting add in my react project although i have configured Tailwind properly

Question

Tailwind is not working properly it is not adding css classes to my react project until i do some changes in tailwind.config.js file, changes like pressing a space or pressing a enter key. then all of a sudden i see the classes has been added to the file in react. I am using parcel in my project.

Here is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: { 
    extend: {},
  },
  plugins: [],
};

here are the dependencies form my package.json file

"devDependencies": {
  "assert": "^2.1.0",
  "buffer": "^6.0.3",
  "parcel": "^2.10.3",
  "postcss": "^8.4.33",
  "process": "^0.11.10",
  "tailwindcss": "^3.4.1"
},
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.21.1",
  "react-scripts": "^5.0.1"
},

   



I tried some correction in content in my 'tailwind.config.js' file but nothing has worked till now. I just want tailwind css classes to get reflected in my app as soon as i add them from my component file.

Answer 1

/** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
   extend: {},
  },
  plugins: [],
 }

Modifiy your config file like this

Docs : react tailwind css setup