JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

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

SCSS

$spacing-extra-small: 0.25rem;
$spacing-small: 0.5rem;
$spacing-medium: 1rem;
$spacing-large: 2rem;
$spacing-extra-large: 4rem;



$paddings: (
  "pr0": 0,
  "pr1": $spacing-extra-small,
  "pr2": $spacing-small,
  "pr3": $spacing-medium,
  "pr4": $spacing-large,
  "pr5": $spacing-extra-large
);

@each $padding, $value in $paddings {

  .#{$padding} {
    padding-right: #{$value};
  }

}


$paddings: (0, $spacing-extra-small, $spacing-small, $spacing-medium, $spacing-large, $spacing-extra-large);

@each $padding in $paddings {

  .pr#{index(($paddings), ($padding)) - 1} {
    padding-right: #{$padding};
  }

}