JSFiddle - React, Tailwind, and code Playground

HTML

<div class="kr-first">
<h1>Test 1 - .k-radio first</h1>  
<label><input type="checkbox"> Plain</label>
<label><input type="checkbox" class="k-radio"> Class</label>
<label><input type="checkbox" class="k-radio k-checked k-state-focused"> Fake state</label>
</div>

<div class="attr">
<h1>Test 2 - attributes first</h1>  
<label><input type="checkbox"> Plain</label>
<label><input type="checkbox" class="k-radio"> Class</label>
<label><input type="checkbox" class="k-radio k-checked k-state-focused"> Fake state</label>
</div>

<div class="fix">
<h1>Test 3 - class + attribute selector</h1>  
<label><input type="checkbox"> Plain</label>
<label><input type="checkbox" class="k-radio"> Class</label>
<label><input type="checkbox" class="k-radio k-checked k-state-focused"> Fake state</label>
</div>

SCSS

/* // boilerplate - mirroring tailwind-forms */
label {
  display: block;
}

[type="checkbox"] {
  appearance: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }
  &:focus {
    border: 3px solid black;
  }
}

/* // end boilerplate */

/* // Test 1 */
.kr-first {
  .k-radio {
    background-color: green;
    &:checked:focus,
    &.k-checked.k-state-focused {
      background-color: green;
    }
  }

  [type="checkbox"] {
    background-color: red;

    &:checked:focus,
    &:focus {
      background-color: red;
    }
  }
}

/* // Test 2 */
.attr {
  [type="checkbox"] {
    background-color: red;

    &:checked:focus,
    &:focus {
      background-color: red;
    }
  }

  .k-radio {
    background-color: green;

    &:checked:focus,
    &.k-checked.k-state-focused {
      background-color: green;
    }
  }
}

/* // Test 3 */
.fix {
  [type="checkbox"] {
    background-color: red;

    &:checked:focus,
    &:focus {
      background-color: red;
    }
  }

  .k-radio {
    background-color: green;

    &.k-checked.k-state-focused:checked:focus {
      background-color: green;
    }
    /* Also needs coverage across other pseudo-states */
    &.k-state-focused:focus {
      background-color: green;
    }
  }
}