Por que uso Tailwind

100 views

Tiempo de lectura: 3 min

Desarrollo

Diseño

2022-12-11

¡Tailwind es un framework de CSS que se enfoca en un enfoque de utilizar clases muy específicas para dar estilos a elementos de HTML en lugar de definir estilos en hojas de estilo. Esto puede tener varias ventajas:

Flexibilidad: al usar clases específicas, es más fácil combinarlas y modificarlas para lograr diferentes estilos sin tener que crear nuevos estilos en hojas de estilo.
Reutilización: al usar clases específicas, es más fácil reutilizar estilos en diferentes partes del sitio web sin tener que copiar y pegar código.
Velocidad: al no tener que definir estilos en hojas de estilo, el código de la página web se carga más rápido y se puede trabajar de manera más eficiente.

A continuación, se muestra un ejemplo de una tarjeta de usuario que se ha creado usando Tailwind:

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
  <div className="relative flex items-center px-6 py-5 space-x-3 bg-white border border-gray-300 rounded-lg shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400">
    <div className="flex-shrink-0">
      <img
        className="w-10 h-10 rounded-full"
        src={avatarArticle}
        alt="Avatar usuario"
      />
    </div>
    <div className="flex-1 min-w-0">
      <a href="#" className="no-underline">
        <span className="absolute inset-0" aria-hidden="true"></span>
        <p className="text-sm font-medium text-gray-900 my-0">Edu Calvo</p>
        <p className="text-sm text-gray-500 truncate my-0">
          Lorem ipsum dolors
        </p>
      </a>
    </div>
  </div>
</div>

Edu Calvo

Lorem ipsum dolors

Este código muestra una sección de una interfaz de usuario que representa un perfil de usuario. La sección tiene una estructura de cuadrícula con una sola columna en dispositivos pequeños y dos columnas en dispositivos más grandes. La sección contiene una imagen redonda del avatar del usuario, su nombre y una descripción breve.

En resumen, Tailwind es una herramienta muy útil para dar estilos a elementos de HTML de manera rápida y flexible. Con su enfoque en clases específicas, es posible crear diseños complejos sin tener que crear nuevos estilos en hojas de estilo y sin tener que copiar y pegar código repetid