Tailwind css not work on Vercel after build and deploy it

I am using Tailwind CSS to style my web app, In local, it works perfectly but when I build my GitHub repository and deploy it on Vercel, it does not work, where is the problem with this?

one of my col:

<div        className={`${classes.allTechnicalList} flex flex-wrap items-center justify-center px-0`}><Col   lg={2}   md={6}   sm={6}   xs={12}   className={`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}><div className="imgBorder text-center rounded-lg shadow  block flex-wrap justify-center items-center px-5 pt-8 pb-16 lg:mb-12 h-44 lg:w-48"><Image          className="max-w-full h-full m-auto"          alt=""          src="/php-icon.png"       /><p className="text-sm space-x-1 m-0 pt-2 pb-4">PHP</p></div></Col>  .  .  .

In local:

After build and deploy it on Vercel:

As you see, in local the col display is flex but on the server, it is not.

This is my taiwlind config:

module.exports = {purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. {js,ts,jsx,tsx}"],darkMode: false, // or 'media' or 'class'theme: {extend: {  transitionDuration: ["hover", "focus"],},fontSize: {  sm: ["15px"],  base: ["16px", "24px"],  lg: ["25px", "28px"],  xl: "40px",},},variants: {extend: {},},corePlugins: {  container: false,},plugins: [ function ({ addComponents }) {  addComponents({".container": {      maxWidth: "100%","@screen sm": {        maxWidth: "600px",      },"@screen md": {        maxWidth: "765px",      },"@screen lg": {        maxWidth: "1320px",      },"@screen xl": {        maxWidth: "1320px",      },    },  });},],};

this is postccs.config.js:

module.exports = {plugins: ["tailwindcss","postcss-flexbugs-fixes",["postcss-preset-env",  {    autoprefixer: {      flexbox: "no-2009",    },    stage: 3,    features: {"custom-properties": false,    },  },],],};