Background gradients not supported

[MrSnoozles]

I'm trying to use tailwinds background gradients but they do not seem to be supported.

Documentation:
https://tailwindcss.com/docs/background-image#linear-gradients

``

Example:
Using the CSS classes bg-gradient-to-r from-cyan-400 to-blue-500 should create a gradient, instead no background is applied.
https://stackblitz.com/edit/nativescript-stackblitz-templates-nsvck4?file=app%2Fmain-page.xml&title=NativeScript%20Starter%20TypeScript

[rigor789]

I believe this is because core does not support css variables in gradients yet.

[MrSnoozles]

Would that be difficult to support in core?

[rigor789]

Not sure, probably not too difficult, but I don't know without diving into it...

Your best bet until it is supported would be to define the gradients with regular css (can even be via tailwind's inline definitions), or in the tailwind config as custom background values: https://tailwindcss.com/docs/background-image#customizing-your-theme

module.exports = {
  theme: {
    extend: {
+     backgroundImage: {
+       'gradient-red-to-blue': "linear-gradient(to right, red, blue)",
+     }
    }
  }
}