Tailwind CSS in Next js working in Localhost but not working In production

Question

Tailwind CSS in Next js working in Localhost but not working In production.using scss

Everything works fine in localhost but code fails in production

package.json

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "heroku-postbuild": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "framer-motion": "^6.2.6",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "sass": "^1.49.8",
    "swiper": "^8.0.6"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "eslint": "8.9.0",
    "eslint-config-next": "12.1.0",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.23"
  }
}

tailwind.config.js

module.exports = {
  content: ["./pages/**/*.js", "./components/**/*.js"],

  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

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