Você está me dizendo que isso aqui tem transparência visual, é fácil de ler e é fácil de dar manutenção?

<form class="w-full max-w-xs space-y-3">
    <input type="email" placeholder="Email" class="h-11 w-full rounded-lg border border-border bg-secondary px-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" value="">
    <input type="password" placeholder="Password" class="h-11 w-full rounded-lg border border-border bg-secondary px-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" value="">
    <button type="submit" class="flex h-11 w-full items-center justify-center rounded-lg bg-primary text-sm font-normal text-primary-foreground transition-colors hover:bg-primary/90 active:scale-[0.98] disabled:opacity-60">Continue</button>
</form>

e que inclusive esse código é melhor que um componente como o abaixo?

<template>
  <form class="form">
    <input
      type="email"
      placeholder="Email"
      class="input"
      v-model="email"
    />

    <input
      type="password"
      placeholder="Password"
      class="input"
      v-model="password"
    />

    <button type="submit" class="button">
      Continue
    </button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')
</script>

<style scoped>
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input {
  height: 44px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: 0 16px;
  font-size: 14px;
  color: var(--foreground);
  outline: none;
  transition: box-shadow 0.2s;
}

.input::placeholder {
  color: var(--muted-foreground);
}

.input:focus {
  box-shadow: 0 0 0 1px var(--primary);
}

.button {
  display: flex;
  height: 44px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary);
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-foreground);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, opacity 0.2s;
}

.button:hover {
  background: color-mix(in srgb, var(--primary) 90%, black);
}

.button:active {
  transform: scale(0.98);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

Qual dos dois você tem mais clareza?

Quando é uma mistureba com tudo no mesmo lugar, ou tudo separadinho?

Uma dúvida, quando você aborda o tema de "manutenibilidade", porque você acredita que isso seja uma parte boa do Tailwind? Digo isso porque na minha opinião, acho mais simples ir na class ou no componente.styled e ver de fato o que ele faz ao invés de ter todas as informações centralizadas, me parece ser mais fácil de dar manutenção.

Além disso, nos seus projetos o Tailwind é aplicado diretamente no componente ou há uma abstração para que ele não polua os arquivos principais?