if you don't like this.

  .button {
      @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700;
  }

  .button {
    @apply
      py-2
      px-4
      bg-indigo-500
      text-white
      font-semibold
      rounded-lg
      hover:bg-indigo-700
      focus:bg-indigo-700
    ;
  }

Or:

  .button {
    padding: var(--gap-s) var(--gap-m);
    background-color: var(--color-indigo);
    color: var(--color-white);
    font-weight: 700;
    border-radius: var(--gap-s);
    &:hover, &:focus {
        background-color: var(--color-indigo-hover);
    }
  }

  .button { padding: var(--gap-s) var(--gap-m); background-color: var(--color-indigo); color: var(--color-white); font-weight: 700; border-radius: var(--gap-s);    &:hover, &:focus { background-color: var(--color-indigo-hover); } }

"Nothing stops you from using sky-400 and blue-400 in the same project. Consistency still depends on your discipline, not on the framework."

And how did plain css solve that? You're mixing up a few issues there.