JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shade">I have .1 black background</div>
<div class="shade shade other shade">I also have .1 black background, but wouldn't it be cool if i had .3?</div>
<div class="shade shade shade shade shade">0.5 opacity</div>

CSS

.shade {
    background: rgba(0,0,0,.1);
}

JavaScript

$( "div" ).each(function(index) {
  var classList = $(this).attr('class').split(/\s+/);
  var num = 0;
  $.each( classList, function(index, item){
    if (item === 'shade') {
      num = num + 0.1;
    }
  })
  $(this).css("background", "rgba(0,0,0," + num + ")");
});