JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>


<div>
sd
</div>

CSS

.btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-dark;
  }
  
.btn::first-letter {
  font-size: 130%;
  @apply bg-orange;
}

div::first-letter {
  font-size: 130%;
  @apply bg-orange;
}

div {
  @apply bg-red;
}