Gradients with Transparency on Safari

[Nick-Mazuk]

I'm looking to add this gradient with Tailwind's new gradients.

bg-gradient-to-b from-transparent to-red-100

where

:root {
    --transparent: transparent;
    --red-100: rgb(255, 195, 184);
}

/* using CSS variables to define the Tailwind variables */

Now Safari has the habit of interpreting transparent as rgb(0, 0, 0, 0), which results in ugly gradients that include black, instead of a smooth transition from transparent to the desired color.

https://css-tricks.com/thing-know-gradients-transparent-black/

Is there a nice way to create transparent gradients using Tailwind?

My only idea so far is to create a transparent version of every Tailwind color and use that transparent version. It should work, but it's not elegant. I'll do it if necessary, but if someone knows of a better way, I'd appreciate it!

[adamwathan]

Hey! Check out this demo repo, shows you how to do it:

https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

Basically you need to define your colors as a callback, and accept the opacityValue argument and stick it in the right place.

[Nick-Mazuk]

Ok, I think I understand what's going on.

Just a quick clarifying question, it looks like I will need to define every color with that callback? For instance, if my primary color set is this:

/* 
*  global.css 
*  context removed for brevity
*/
:root {
    --c-primary: 13, 100, 226;
    --c-primary-d: 0, 124, 255;
    --c-primary-50: 211, 233, 252;
    --c-primary-100: 179, 213, 248;
    --c-primary-200: 127, 185, 251;
    --c-primary-300: 68, 156, 253;
    --c-primary-400: 0, 126, 254;
    --c-primary-500: 13, 100, 226;
    --c-primary-600: 17, 79, 189;
    --c-primary-700: 15, 62, 157;
    --c-primary-800: 10, 46, 122;
    --c-primary-900: 1, 22, 77;
}

// tailwind.config.js
// context removed for brevity
primary: {
    50: 'rgb(var(--c-primary-50))',
    100: 'rgb(var(--c-primary-100))',
    200: 'rgb(var(--c-primary-200))',
    300: 'rgb(var(--c-primary-300))',
    400: 'rgb(var(--c-primary-400))',
    500: 'rgb(var(--c-primary-500))',
    default: 'rgb(var(--c-primary))',
    600: 'rgb(var(--c-primary-600))',
    700: 'rgb(var(--c-primary-700))',
    800: 'rgb(var(--c-primary-800))',
    900: 'rgb(var(--c-primary-900))',
}

I'd need to then turn every color definition in the tailwind.config.js into a callback?

// tailwind.config.js
primary: {
    50: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(var(--c-primary-50), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `rgba(var(--c-primary-50), var(${opacityVariable}, 1))`
        }
        return `rgb(var(--c-primary-50))`
      },
    100: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(var(--c-primary-100), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `rgba(var(--c-primary-100), var(${opacityVariable}, 1))`
        }
        return `rgb(var(--c-primary-100))`
      },
    200: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(var(--c-primary-200), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `rgba(var(--c-primary-200), var(${opacityVariable}, 1))`
        }
        return `rgb(var(--c-primary-200))`
      },
      .
      .
      .
      .
      etc
}

Then repeat this for every color in my color palette?

If that's the case, I assume it's possible to just create a loop to construct the colors object (being a JS file and all) to eliminate all the code duplication.

Thanks for your time!