Next Js tailwind styles are not working on vercel

Question

I recently learned Next.js and built a simple movies website, employing Tailwind CSS for styling. However, upon attempting to deploy the site to Vercel, none of the CSS styles, especially those I applied in Tailwind, seem not to be applied, despite their significance in shaping the website's appearance. Strangely, the website functions properly locally after being built for production, but the Tailwind CSS fails to function on Vercel. How can I address this issue?

Additionally, I'm seeking advice on how to enhance the clarity of the images on the site. Currently, they appear blurry. I utilized Next.js Image component for rendering the images. What steps can I take to improve their clarity?

This is how it looks like on vercel And this looks like in local environment

I tried adding this line of code to the tailwind css file but still didnt help enabled: process.env.NODE_ENV === "production",`

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        caveats: ['Caveat', 'cursive'],
        stencil: ["stencil", "static"],
        Inter: ["Inter"],
        Dosis: ["Dosis"],
        Arial: ["Arial"]
      },
      colors: {
        customDark: "#050505",
        customGreen: "#088406",
        customBrown: "#261707",
        customOrange: {
          100: "#937b23",
          200: "#816c21",
          300: "#71631b"
        },
        customWhite: "#feffff",
      },

      plugins: [],
    }
  },
  enabled: process.env.NODE_ENV === "production",
}

Kindly let give me suggestions where am not doing anything right