Tailwind not working properly in production mode of Gatsby

I have been trying for 3 days now to make my tailwind classes work with Gatsby in production mode. In development mode, everything looks great, but in production, some of the classes aren't working. The layout is completely broken. Some elements of the website's main section, for example, were in different sections. The absolute class of the tailwind, for instance, isn't working. I have tried creating my own absolute class in global.css and added !important on it and it worked.

Below are my configurations

// gatsby-browser.ts

import './src/styles/global.css';
import './src/fonts/satoshi/stylesheet.css';
import './src/fonts/panchang/stylesheet.css';
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

// gatsby-config.ts

import type { GatsbyConfig } from "gatsby"

const config: GatsbyConfig = {
  siteMetadata: {
    title: `My website`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  graphqlTypegen: true,
  plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-postcss',
  ],
}

export default config

// tailwind-config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/*.{js,jsx,ts,tsx}",
    "./src/components/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        'landing-pattern': "url('../images/sect1-bg.webp')",
      },
      backgroundPosition: {
        'landing-mobile-pos': '-1225px',
      },
      fontFamily: {
        'panchang': ['Panchang-Extrabold', 'sans-serif'],
        'satoshi': ['Satoshi', 'sans-serif'],
      },
    },
    screens: {
      'xs': '375px',
      'sm': '480px',
      'phablet': '500px',
      'tablet': '600px',
      'md-tablet': '700px',
      'md': '768px',
      'lg': '992px',
      'xl': '1200px',
      '2xl': '1440px',
      'xxl': '1920px',
    },
    colors: {
      "background": "#0D0435",
      "contact": "#2F284E",
      "aquamarine": {
        100: "rgba(87, 253, 175, 0.2)",
        500: "rgba(87, 253, 175, 1)",
      },
      "cyan": {
        100: "rgba(65, 251, 251, 0.2)",
        500: "rgba(65, 251, 251, 1)"
      },
      "fuchsia": {
        100: "rgba(214, 76, 237, 0.2)",
        500: "rgba(214, 76, 237, 1)"
      }
    },
    dropShadow: {
      '4xl': [
        '0 -10px 25px rgba(87, 253, 175, 0.5)',
        '20px 10px 10px rgba(214, 76, 237, 0.5)',
        '-10px 15px 10px rgba(65, 251, 251, 0.5)'
      ],
      'dist': [
        '0px 30px 25px rgba(65, 251, 251, 0.8)',
        '0px -30px 25px rgba(214, 76, 237, 0.8)'
      ],
      'form': [
        '0px 20px 10px rgba(65, 251, 251, 0.7)',
        '0px -20px 10px rgba(214, 76, 237, 0.7)'
      ]
    },
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// package.json

{
  "name": "my-website",
  "version": "1.0.0",
  "private": true,
  "description": "my website",
  "author": "my name",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@jimp/png": "^0.16.1",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.7",
    "chart.js": "^3.8.0",
    "gatsby": "^4.17.2",
    "gatsby-plugin-image": "^2.17.0",
    "gatsby-plugin-sharp": "^4.17.0",
    "gatsby-source-filesystem": "^4.17.0",
    "gatsby-transformer-sharp": "^4.17.0",
    "jimp": "^0.16.1",
    "react": "^18.1.0",
    "react-chartjs-2": "^4.2.0",
    "react-dom": "^18.1.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@types/node": "^17.0.45",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@types/react-slick": "^0.23.10",
    "autoprefixer": "^10.4.7",
    "gatsby-plugin-postcss": "^5.17.0",
    "postcss": "^8.4.14",
    "typescript": "^4.7.4",
    "tailwindcss": "^3.1.4"
  }
}

I am new to Gatsby, and I would appreciate any help.

Thank you!