With Tailwind:

    <button class="bg-blue-600 text-white px-4 py-2 rounded">

    <button style="background-color: var(--color-blue-600); color: white; padding: 8px 16px; border-radius: 4px; border: none;">

    <button class="bg-blue-600 hover:bg-blue-500 active:bg-blue-700
      text-white px-4 py-2 rounded transition-colors
      focus:outline-none focus:ring-2 focus:ring-blue-400">

Even more interesting with Tailwind, a div with dark mode and responsive styles:

    <div class="
      bg-white dark:bg-zinc-900
      p-4 md:p-8
      rounded-xl
      shadow-sm dark:shadow-none
      border border-zinc-200 dark:border-zinc-700
    ">

Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to understand what it does like you do with iterative code. You see how the browser renders it, and you just adapt the code. Tailwind code is mostly write-only and maintained by viewing what the component looks like. This code doesn’t need to be reusable either, the whole component needs to be. The Tailwind code inside is unique.

It's much more verbose and can't do everything Tailwind can anyway.

E.g. how do you style a child on parent hover with the style attribute?