I have built an app using vite, React and Tailwindcss. There is a section in my website which is just a div wrapping a bunch content that renders cards. This is the code and the output when I am developing on my local computer (i.e. using npm run dev).
npm run dev produces this section with the styles applied properly

However, when I build for production (i.e. npm run build) the section looks like this:
npm run build produces this section with the styles not applied properly

This is the gallery component jsx file:
gallery jsx file

I inspected the browser and the styles are the same in both builds. Here is my tailwind config file:
tailwind.config.js

and here is my postcss config file:
postcss.config.js

I haven’t modified these files since project initialization. Apart from the images, other elements on the website like certain text and images are also not exactly like the development build. What is causing this issue and how can I fix it?