JSFiddle - React, Tailwind, and code Playground

by adelura

CSS

/* 
work only with sizes

--condition: 1 | 0;
$size: 10px

calc(var(--condition) * $size)
=> calc(10px * 1) = 10px
=> calc(10px * 0) = 0
*/
mtnValueOrZero: function(customPropertiesCondition, valueToUseWhenIsTrue) {
  return `calc(${valueToUseWhenIsTrue} * var(${customPropertiesCondition}))`;
},

/* 
work only with sizes

--condition: 1 | 0
$size: 10px

calc($size / var(--condition))
=> calc(10px / 1) = 10px
=> calc(10px / 0) = NaN falback to initial value
*/
mtnValueOrInitial: function(customPropertiesCondition, valueToUseWhenIsTrue) {
  return `calc( ${valueToUseWhenIsTrue} / var(${customPropertiesCondition}) )`;
}

// integration



<div :class="{ 'is-scrolling-down': condition }"></div>

.component {
  transform: translateY(60px);

  .is-scrolling-down & {
    transform: translateY(0);
  }
}


<div :style="{ '--scroll-down': condition }"></div>

.component {
  transform: translateY(mtnValueOrZero(--condition, 60px)); // 50px or 0
}