JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="nav-booking">

</div>

SCSS

@function get($var) {
  @return map-get($custom-properties, $var);
}

$custom-properties: (
  'navbar-transparent': "test",
);

@each $key, $value in $custom-properties {
  :root {
    --#{$key}: #{$value};
  }
}

@if (get(navbar-transparent) == "test") {
  .nav-booking {
    position: absolute;
    width: 100%;
    background: transparent;
    padding-top: 20px;
  }
} @else {
  .nav-booking{
    border-bottom: 2px solid #d6d1d180;
  }
}