JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section-1">
    	<h1>Foo</h1>

</div>
<div class="section-2">
    	<h1>Bar</h1>

</div>
<div class="section-3">
    	<h1>Baz</h1>

</div>

SCSS

.section-1 {
	$green: #bada55;
	$gray: rgba(0, 0, 0, 0.25);
	& h1 {
		color: $green;
		background: $gray;
	}
}


.section-2 {
	$green: #04b500;
	& h1 {
		color: $green;
	}
	// background: $gray; // undefined variable $gray
}


.section-3 {
	$green: #06ff00;
	color: $green;
}