Variables without opacity #207

Activity

1. marklawlor

   transferred this issue fromnativewind/nativewindon Oct 1, 2025
2. marklawlor commented on Oct 2, 2025

   

   marklawlor

   on Oct 2, 2025

   Contributor

   More actions

   TailwindCSS is outputting the following CSS

   .bg-destructive\/10 {
     background-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
     }
   }
   

   Because React Native doesn't have a color-mix function, the rules in @supports() are ignored, hence you only receive the non-transparent version.

   I'll have a think about this, but I think the only solution might be asking uses to add a color-mix polyfill (~65KB) to their app.

   This works for non-variable values because the color-mix() value is calculated at build time.
3. marklawlor commented on Oct 2, 2025

   

   marklawlor

   on Oct 2, 2025

   Contributor

   More actions

   WIP PR #208

   🚀React with 🚀1Reacted by Fermín Villanueva Salas
4. marklawlor

   closed this as completedin #208on Oct 11, 2025