[adamwathan]

It's fewer than half as many characters as writing the same thing in CSS:

  .btn {
    display: inline-flex;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 14px;
    border-radius: 6px;
    color: #fff;
    background-color: rgb(79 70 229);
  }
  .btn:hover {
    background-color: rgb(67 56 202);
    outline: 2px dotted transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

[another_story]

Not OP, but I'm not worried about saving how many characters I type. We have autocomplete that fixes much of that problem anyways. I'm more worries about being able to read things others have written or even my own code when I come back to it. I tried Tailwind, and get the praise, but I still find it takes more time to read and understand than CSS. It just seems cluttered, and I couldn't get over that.

[guanzo]

It's also all on one line which makes it harder to read than your example and massively bloats the HTML. I prefer readability over conciseness.

[adamwathan]

You can break it across as few or as many lines as you like, just like with CSS.

  .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229) } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05) }

  <button class="
    inline-flex justify-center
    py-2 px-4
    border border-transparent rounded-md
    shadow-sm
    text-white text-sm font-medium
    bg-indigo-600 hover:bg-indigo-700
    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  ">
    Submit
  </button>

My experience (and the experience of thousands of others) is that in practice, an approach like Tailwind is much more maintainable, even if it's superficially ugly.

At the end of the day it's a lot easier to understand what's happening in a template where you can see all of the styles directly attached to each node instead of having to map things together in your head across multiple files.

For example, for me at least I can't believe how much more difficult it is to look at your average CodePen demo and understand what is doing what at a glance vs. looking at a Tailwind template. With traditional CSS there is just _so_ much indirection in comparison.

[dalmo3]

And in 1/10th as many keystrokes with the vscode extension and autocomplete. Well done my friend.