> Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
   .button {
     @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
   }
  }

I can now just give all of my reusable buttons the ".button" class instead of the giant string above.