JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="js">
    <div class="u-hide c-my-great-component">
        I'm a component.
        My utility class told me to hide.
        But I didn't, because the js selector chained with component selector trumped me.
    </div>
</div>

CSS

.c-my-great-component {
    display: none;
}

.js .c-my-great-component {
    display: block;
}

.u-hide {
    display: none;
}


/** 
 * This solves the problem, because it now trumps the component
.js .u-hide {
    display: none;
}
**/