JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Data attribute -->
<em>You cannot override (Data attribute with block selector)</em>
<div class="block1">
  <div class="block2 block1__block2" data-size="small">Child</div>
</div>

<br/>

<!-- Regular class -->
<em>You can override (Regular class modifier)</em>
<div class="block1">
  <div class="block2 block2--small block1__block2">Child</div>
</div>

<br/>

<!-- Data attribute (with no block) -->
<em>You can override (Data attribute with no block)</em>
<div class="block1">
  <div class="block2 block1__block2" data-block2-size="small">Child</div>
</div>

SCSS

// Block2
.block2 {
  width: 100px;
  height: 44px;
  padding: 0 16px;

  display: inline-block;
  background: tomato;
  text-align: center;
}

// Regular modifier class
.block2--small,

// '.block2' is giving priority to the modifier
.block2[data-size="small"],

// To avoid that we should use [data-block2-size="small"]
// or something similar (without the block)
[data-block2-size="small"] {

  height: 30px;
  line-height: 30px;
  padding: 10px 8px;
}

// Block1
// Mix should override the padding set by the modifier
.block1__block2 {
  padding: 40;
}