Tailwind backdropFilter, blur css utilities is not working when deployed on Netlify

Live site
Github

I have used the following classes which seem working fine locally, but not after deploying in netlify…

Tailwind config file, I have added extra classes in case there would be an issue, but still facing the same issue…/** @type {import(‘tailwindcss’).Config} /
const withMT = require(“@material-tailwind/react/utils/withMT”);
module.exports = withMT({
mode: “jit”,
safelist: [‘animate-[fade-in_1s_ease-in-out]’, ‘animate-[fade-in-down_1s_ease-in-out]’],
content: ["./src/**/
.{js,jsx,ts,tsx}"],
theme: {
extend: {
backdropFilter: {
‘none’: ‘none’,
‘blur-sm’: ‘blur(4px)’,
‘blur-md’: ‘blur(8px)’,
},
},
},
plugins: ,
});

i tried deploying in vercel and it worked

Please turn off CSS processing from site settings.

1 Like