NativeScript/tailwind

Background gradients not supported

Opened this issue · 3 comments

MrSnoozles commented

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 commented

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

MrSnoozles commented

Would that be difficult to support in core?

rigor789 commented

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