JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.css">
    <pre class="prettyprint lang-css" >
.big-margins {
	background-color:purple;
    <i>margin:100px;</i>
}
.bar {
	background-color:red;
    <i>margin:0px;</i>
}
.foo {
    <b>@extend .bar;</b>
    <b>@extend .big-margins;</b>
    <i>padding:10px;</i>
}
</pre>

<div class="foo">I extended big-margins first... But Sass compiled me red!!! And where did those big margin that I wanted go?</div>

<div class="expected">The output I expected...</div>

CSS

.big-margins, .foo {
  background-color: purple;
  margin: 100px; }

.bar, .foo {
  background-color: red;
  margin: 0px; }

.foo {
  padding: 10px; }

/* the output I expected */

.expected {
  padding: 10px;
  background-color: purple;
  margin: 100px;
}