Background gradients not supported

[MrSnoozles]

trafficstars

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)",
+     }
    }
  }
}

[CatchABus]

It seems gradient-stops uses var() with fallback defaults and core can't comprehend it.

--tw-gradient-stops var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))

EDITED: Actually, the problem might be deeper as core already supports this format but doesn't understand if a fallback value is a var-expresion and the css-variables used might also be declared afterwards.