JSFiddle - React, Tailwind, and code Playground

by hasalex

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg my-btn" href="#" role="button">Learn more</a>
</div>

<!-- если просто задать класс .my-btn, то это работает в общем случае, но не работает в частном здесь, т.к. в бутстрапе стиль задан как .btn-group-lg>.btn, .btn-lg, .btn т.е. берется вес от .btn + вес от .btn-group-lg. либо от .btn-lg (в данном случае от .btn)
Чтобы сработал твой my-btn можно выбрать следующие варианты:
.btn-lg.my-btn
.btn.my-btn 
.jumbotron .my-btn
.my-btn[role="button"]
и т.д., т.е. нужно твоему классу назначить как минимум такой же вес
-->

CSS

.jumbotron > .my-btn {
  background-color: #fbb;
}

.btn.my-btn {
  border-color: #f00;
}

.btn-lg.my-btn {
  color: red;
}

.my-btn[role="button"] {
  font-weight: bold;
}