In my nextjs project default stylers for h1 tags and bootstrap tyles are not properly working, but prime react styles are working properly, can you help me to fix.

All the styles are perfectly working in dev mode, but when delpoyed they wont

{
  "name": "tutorial02",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-google-maps/api": "^2.18.1",
    "@tanstack/react-query": "^4.29.12",
    "@tanstack/react-query-devtools": "^4.32.1",
    "@types/node": "^20.1.3",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.2",
    "eslint": "^8.40.0",
    "eslint-config-next": "^13.4.2",
    "formik": "^2.4.1",
    "next": "^13.4.19",
    "next-auth": "^4.23.1",
    "primeicons": "^6.0.1",
    "primereact": "^9.5.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-datepicker": "^4.16.0",
    "react-dom": "^18.2.0",
    "react-select": "^5.7.3",
    "react-toastify": "^9.1.3",
    "sharp": "^0.32.4",
    "typescript": "^5.0.4",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@types/google.maps": "^3.53.5",
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.29",
    "sass": "^1.67.0",
    "tailwindcss": "^3.3.3"
  }
}

my stlesheet order in Layout.tsx

import './globals.css';
import './variables.module.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'react-toastify/dist/ReactToastify.css';

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght300;400;500;600;700&display=swap');