JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myContainer">
    <div class="yourWidget yourPrivateCommonStyle myCustomizedStyle">
        yourWidget
    </div>
</div>

CSS

/* injected from your common CssResource, can be a private CssResource */
.yourPrivateCommonStyle {
 padding-top: 40px; 
 padding-bottom: 40px;        
}

/* injected from your widget's public CssResource */
.yourWidget {
 background-color:red;    
}

/* reference to your widget through my container => more specific, so it has higher priority */
.myContainer .yourWidget {
 padding-top:0px;
 background-color:orange;    
}

/* my custom class added to your widget => defined after the CSS of your widget, so rules in my class have higher priority */
.myCustomizedStyle {
 padding-bottom:0px;   
}