JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="box">
  hiii
</div>

SCSS

@mixin set-padding ($args...){
  @if(length($args)==1){
    padding-right: nth($args,1);
  }
  @else if(length($args)==2){
    padding-right: nth($args,2);
  }
  @else if(length($args)==3){
    padding-right: nth($args,3);
  }
  @else if(length($args)==4){
    padding-right: nth($args,4);
  }
  @else if(length($args)==5){
    padding-right: nth($args,5);
  }
} 

/* @mixin set-padding ($pr0, $pr1, $pr2, $pr3, $pr4, $pr5){
  padding-right: $pr0;
  
  @if(length($args)==1){
    padding-right: $pr1;
  }
  @else if(length($args)==2){
    padding-right: $pr2;
  }
  @else if(length($args)==3){
    padding-right: $pr3;
  }
  @else if(length($args)==4){
    padding-right: $pr4;
  }
  @else if(length($args)==5){
    padding-right: $pr5;
  }
} */

.box {
  background-color: #ccc;
  @include set-padding(null, null, 3px);
}