Publicado en:

Diseño

4 razones por las que Tailwind es perfecto para diseños de edificios

Autor Team Estudio Arquitectos

Publicado el: marzo 17, 2026

Cuando hablo de diseño, me refiero a cómo se colocan los elementos en la página. Las propiedades CSS ampliamente utilizadas aquí incluyen:

display – a menudo grid o flex ahora
margin
padding
width
height
position
top, left, bottom, right

A menudo incluyo border-width También como elemento menor en esta lista.

En este momento sólo quiero decir una cosa.

Tailwind es ideal para hacer diseños.

Hay muchas razones.

Primero: el estilo de diseño depende en gran medida de la estructura HTML

Cuando trasladamos diseños a CSS, perdemos estructuras mentales y se necesita esfuerzo para restablecerlas. Imagine la siguiente cuadrícula de tres columnas en HTML y CSS:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;

  .grid-item:first-child {
    grid-column: span 2
  }

  .grid-item:last-child {
    grid-column: span 1
  }
}

Dos rectángulos azules, uno al lado del otro, ilustran un diseño de dos columnas, donde la columna de la izquierda es dos veces más ancha que la columna de la derecha.

Ahora introduzca la estructura de HTML y lea CSS. Cuando haga esto, tenga en cuenta que debe esforzarse mucho en imaginar la estructura HTML a la que se aplica.

Ahora imagina la misma situación, pero usando Utilidades de viento de cola:

<div class="grid grid-cols-3">
  <div class="col-span-2"></div>
  <div class="col-span-1"></div>
</div>

Es posible que casi empieces a ver el diseño manifestado en tus ojos sin ver el resultado real. Bastante claro: una cuadrícula de tres columnas con el primer elemento que abarca dos columnas y el segundo elemento que abarca una columna.

pero grid-cols-3 y col-span-2 Es un poco extraño y parece desconocido, ya que estamos intentando analizar la forma en que Tailwind escribe CSS.

Ahora, veamos qué sucede cuando cambiamos la sintaxis y usamos variables CSS para definir el diseño. El diseño se explica inmediatamente por sí mismo:

<div class="grid-simple (--cols:3)">
  <div class="(--span:2)"> ... </div>
  <div class="(--span:1)"> ... </div>
</div>

El mismo diseño de tres columnas.

Pero hace que el diseño sea más fácil de escribir, leer y visualizar. También tiene otros beneficios, pero Te dejaré explorar su documentación. En lugar de explicarlo aquí.

Ahora, sigamos adelante.

¿Por qué no usar? `2fr 1fr`?

Tiene sentido escribir 2fr 1fr Para una cuadrícula de tres columnas, ¿no?

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Desafortunadamente, no funcionará. esto es porque fr Calculado en base al espacio disponible menos los canalones (o huecos) de la rejilla.

desde 2fr 1fr Con solo dos columnas, la salida es 2fr 1fr A diferencia de la cuadrícula estándar de tres columnas.

Tres ejemplos de diseños de varias columnas apiladas. El primero es un diseño igual de tres columnas, el segundo y el tercero son dos columnas, donde la columna de la izquierda es dos veces más ancha que la columna de la derecha.

Está bien. Pasemos a explicar por qué Tailwind es perfecto para crear diseños.

Segundo: no es necesario nombrar el diseño.

Creo que los diseños son lo más difícil de nombrar. Rara vez se me ocurren nombres mejores que:

número+columna, p.e. .two-columns
Nombres semánticos, p. .content-sidebar

Pero estos nombres no hacen justicia al diseño. Incluso si lo ves, no puedes decir realmente lo que está pasando. .two-columnsporque .two-columns Puede tener múltiples significados:

dos columnas iguales
dos columnas 1fr auto
dos columnas auto 1fr
Las dos columnas abarcan un total de 7 “columnas”, el primer objeto ocupa 4 columnas y el segundo objeto ocupa 3…

Ya podéis verme tropezar cuando intento explicar la última pregunta…

En lugar de obligarnos a nombrar el diseño, podemos dejar que los números hablen por sí solos, y entonces toda la estructura quedará muy clara.

<div class="grid-simple (--cols:7)">
  <div class="(--span:4)"> ... </div>
  <div class="(--span:3)"> ... </div>
</div>

Las variables pintan un cuadro.

Ejemplo de un diseño de siete columnas encima de un diseño de dos columnas con columnas del mismo tamaño.

Tercero: los requisitos de diseño pueden cambiar según el contexto.

Un diseño de “dos columnas” puede tener diferentes propiedades cuando se utiliza en diferentes contextos. Aquí hay un ejemplo.

Dos diseños de dos por dos uno al lado del otro. En ambos casos, el tercer elemento pasa a la segunda línea y luego al cuarto elemento.

En este ejemplo puedes ver:

uno más grande gap utilizarse entre Grupo I y Grupo J.
uno menor gap utilizarse dentro Grupo I y Grupo J.

La diferencia es gap Las dimensiones son sutiles pero sirven para indicar que los artículos pertenecen a diferentes grupos.

A continuación se muestra un ejemplo del uso de este concepto en un proyecto real. Puede ver la diferencia entre el espacio utilizado dentro del contenedor del boletín y el espacio utilizado entre el contenedor del boletín y de la oferta.

Un diseño de dos columnas para el componente de suscripción al boletín con el formulario en el que la columna izquierda es más ancha que la columna derecha y contiene el contenido.

Si este diseño solo se usa en un lugar, no tenemos que crear una clase modificadora para cambiar gap valor. Podemos cambiarlo directamente.

<div class="grid-simple (--cols:2) gap-8">
  <div class="grid-simple gap-4 (--cols:2)"> ... </div>
  <div class="grid-simple gap-4 (--cols:2)"> ... </div>
</div>

Otro ejemplo común

Digamos que tiene un título para su sección de marketing. El título se vería mejor si pudieras cambiarlo. max-width Entonces el texto no está aislado.

text-balance Puede que funcione aquí, pero el posicionamiento manual suele ser mejor.

Sin Tailwind, probablemente escribirías estilos en línea para él.

<h2 class="h2" style="max-width: 12em;">
  Your subscription has been confirmed
</h2>

Usando Tailwind puedes especificar max-width De una manera más concisa:

<h2 class="h2 max-w-(12em)">
  Your subscription has been confirmed
</h2>

Un encabezado negro centrado significa que su suscripción está confirmada.

Cuarto: las variantes responsivas se pueden crear dinámicamente

“¿En qué punto de interrupción cambiarías el diseño?” es otro factor a considerar al diseñar su diseño. lo llamaré factor de respuesta para esta sección.

Lo más probable es que diseños similares tengan el mismo factor de respuesta. En este caso, tiene sentido agrupar los diseños en diseños con nombre.

.two-column {
  @apply grid-simple;
  /* --cols: 1 is the default */

  @media (width >= 800px) {
    --cols:2;
  }
}

Sin embargo, es posible que desee utilizar una cuadrícula de dos columnas en dispositivos móviles y una mayor cantidad de columnas en tabletas y computadoras de escritorio. Este estilo de diseño se utiliza a menudo en los elementos del pie de página del sitio web.

Dado que la cuadrícula del pie de página es única, podemos agregar una variante responsiva de Tailwind y cambiar el diseño dinámicamente.

<div class="grid-simple (--cols:2) md:(--cols:5)">
  <!-- span set to 1 by default so there's no need to specify them -->
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

Ejemplo de pie de página que se adapta a los tamaños de pantalla. Cambia de un diseño de dos columnas en pantallas pequeñas a un diseño de cinco columnas en pantallas más grandes.

Del mismo modo, podemos crear un nuevo diseño dinámicamente sin tener que crear clases modificadoras adicionales; esto mantiene nuestro CSS limpio y enfocado.

Cómo utilizar mejor Tailwind

Este artículo es una lección de muestra en mi curso, Viento de cola poco ortodoxoTe mostraré cómo usar Tailwind y CSS juntos.

Personalmente, creo que la mejor manera de usar Tailwind no es usar la utilidad Tailwind en HTML, sino crear una utilidad que le permita crear diseños y estilos fácilmente.

Si estás interesado en aprender más, ¡cubriré más en el curso!