JSFiddle - React, Tailwind, and code Playground

by cfree

HTML

<div class="first">Meow</div>
<div class="second">Bark</div>
<div class="third">A coodle doodle doo</div>

SCSS

$space: 20;

@mixin margin-space ($multiplier: 1, $placement:"") {
	margin#{$placement}: ($space * $multiplier) + px;
}

.first {
    color: white;
    background: blue;
}

.second {
    @include margin-space(.5,-top);
    color: white;
    background: green;
}

.third {
    @include margin-space(2);
    color: white;
    background: black;
}