One approach I've been really starting to enjoy is to use use Tailwind alongside scoped styles (in Svelte and Vue). This keeps template pollution minimal while still allowing for the conveniences Tailwind brings:

  <div class="counter-component">
      <button @click="count++">+</button>
      <span class="count" :data-is-even="count % 2 === 0">{{ count }}</span>
  </div>
  
  <style scoped>
  @reference "tailwindcss"
  
  .counter-component {
      @apply flex items-center gap-2;
  
      button {
          @apply bg-gray-800 text-white;
      }
  
      .count {
          @apply italic text-teal-500;
  
          &[data-is-even="true"] {
              @apply text-rose-500;
          }
      }
  }
  </style>