React native – Tailwind background color gradient class not working

I am trying to apply a linear gradient using the native colors of tailwind and its functions. All of the functions are working as intended. However, for the navbar, I am trying to apply a color gradient as the background. My code looks like this:

<div className="flex justify-evenly w-full pt-6 mb-16 shadow-sm shadow-black bg-gradient-to-tr from-blue-500 to-teal-500">
                <h2 className="font-Roboto italic text-4xl font-bold pt-5   text-white items-center -mt-6">
                Travel Boss
                </h2>
<!--And so on -->

My tailwind files look like so:

index.css:

@tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif,'Roboto Condensed';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Any idea what the issue could be?? Im using React btw. And I am also exporting the above component as Navbar. Another detail that i’ve noticed is that when i use the background gradient style in
<div style={{ background: "linear-gradient(to right, #ff0000, #00ff00)", backgroundSize: "cover", }}, it works. So i think the issue is in tailwind itself. The browser im using is FireFox Developers edition. And I also tried this on Edge, which bore the same result. So its not a compatibility issue either (I guess).

Any solution??

I tried implementing a gradient using similar tailwind code on other components, but it had the same result. The color wasn’t being applied at all.