JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="top block red">
    <h2 class="title">Top level</h2>
    <div class="middle block">
        <h2 class="title">Middle level</h2>
        <div class="top block red">
            <h2 class="title">Bottom level</h2>
            <div class="top block">
                <h2 class="title">Last level</h2>
                <div class="single">Single element</div>
            </div>
        </div>
    </div>
</div>

CSS

/* reset */
.block {
    color: black;
    background: yellow;
}

/* root style */
.top {
    background: green;
}

/* root style with modifier */
.top.red {
    color: blue;
    background: red;
}

.top:not(.fake) {
    color: white;
}

.single {
    background: pink;
}

JavaScript

// Stylenguard

// block selectors