As much as Tailwindcss can decrease effort of writting CSS, it creates very ugly HTML and readability can be hard when more complex CSS is required per element. Especially when writing responsive design that way.

I suggest keeping "traditional way" of HTML and CSS classes while using tailwindcss @apply directive.

You can combine @apply directive with @screen directive.

For example:

.responsiveButton {
  @apply text-base; // tailwindcss is mobile-first as well so we don't write sm:text-base as well
  @screen md {
    @apply text-lg;
  }

  @screen lg {
    @apply text-2xl;
  }
}