Use o @apply e crie presets.

<style type="text/tailwindcss">
      @layer utilities {
        .icons {
          @apply size-6 p-1 fill-zinc-600 rounded-md;
        }
      }
      @layer base {
        h1 {
          @apply text-3xl font-bold;
        }
        h2 {
          @apply text-2xl font-semibold;
        }
        h3 {
          @apply text-xl font-semibold;
        }
        p {
          @apply text-[0.775rem] font-semibold;
        }

        a {
          @apply text-[0.775rem] font-semibold;
        }

        span {
          @apply text-[0.775rem] font-semibold;
        }

        label {
          @apply text-[0.775rem] font-semibold text-zinc-700 ;
        }

        input:not([type="checkbox"]) {
          @apply p-1.5 bg-zinc-50 border rounded-md border-zinc-400 focus:outline-none focus:ring-[0.0775rem]
          focus:ring-zinc-900 text-xs text-zinc-700 font-semibold;
        }

      }

Use componentes do react, svelte, vue e etc, é pra isso que eles servem, pra não repetires código. O proprio autor do tailwind disse que se arrependeu de ter adicionado o @apply

Sobre esta questão da verbosidade, tem o @apply que permite enxugar as classes css, caso deseje replicar a mesma rotina. Não esquenta a cabeça pensando qual é o melhor, isso é pessoal. Apenas conheça a ferramenta, dê uma chance a ela. Você só tem a ganhar dominado dois frameworks