Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Mobile First y Utility First

4/29
Recursos

Aportes 11

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Hay dos principios para trabajar con Tailwind:

  • Mobile First 鈫 Pensado principalmente para mejorar la experiencia de usuario. Permite identificar las partes m谩s importantes de nuestro proyecto. En otras palabras, prioriza el desarrollo pensando en los dispositivos m贸viles.

  • Utility First 鈫 Basado en utilidades el cual permite tener una estructura m谩s limpia de nuestros estilos, el desarrollo es m谩s r谩pido ya que todo se trabaja dentro del mismo archivo. En otras palabras, es la forma en que se nombran y se crean las clases de estilos, es decir, son clases descriptivas de la utilidad que nos dan. Se trata de construir componentes a partir de clases con nombres descriptivos.

馃摬 Mobile First y Utility First

Apuntes

Mobile First

  • Est谩 pensado principalmente para mejorar la experiencia de usuario
  • Este principio nos permite identificar las partes m谩s importantes de nuestro proyecto
  • Se enfoca en dar prioridad principalmente a los estilos en forma de m贸vil, este principio es popular, ya que estad铆sticas mencionan que el 80% del tr谩fico de la web proviene de los dispositivos m贸viles.

Utility First

  • Los frameworks basados en utilidades nos permiten tener una estructura m谩s limpia de nuestros estilos.
  • Adem谩s, el desarrollo es m谩s r谩pido porque todo se trabaja dentro del mismo archivo.

Ejemplo

馃寶 Desarrollo de estilos tradicional

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

馃対 Desarrollo de estilos con utilidades

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>
  • Como se puede observar cada clase tiene una funcionalidad simple y es descriptiva
馃搶 **RESUMEN:** Tailwind se basa en dos corrientes, Mobile First, la cual te dice que debes dar prioridad a los dispositivos m贸viles y Utility First el cual son clases las cuales tienen un prop贸sito o utilidad en espec铆fico.

Tailwind CSS esta pensado para dise帽ar nuestros sitios web pensando primero en su versi贸n para dispositivos m贸viles y desde ah铆 adaptar mediante las media-queries a otros formatos. Hacerlo de esta forma resulta muy sencillo con Tailwind y les recomiendo que se acostumbren a hacerlo de esa forma si no es que lo hacen ya. Van a ahorrarse un mont贸n de c贸digo CSS con Tailwind!

馃摑 Mis apuntes:

.

驴Qu茅 es Mobile First?

Mobile First est谩 pensado principalmente para mejorar la experiencia de usuario en un dispositivo m贸vil. Este principio nos permite identificar las partes m谩s importantes de nuestro proyecto.
.

驴Qu茅 es Utility First?

El concepto Utility First hace referencia a basar la implementaci贸n de estilos utilizando clases de utilidad como primera opci贸n, no como 煤nica opci贸n.
.
Los frameworks basados en utilidades nos permiten tener una estructura m谩s limpia de nuestros estilos. Adem谩s el desarrollo es m谩s r谩pido ya que todo se trabaja dentro del mismo archivo.

Fundamentos del Utility First:
https://tailwindcss.com/docs/utility-first

El paradigma Mobile First hace referencia a dise帽ar pensando primero en interfaces para smartphones o tables y luego para computadores de escritorio. Me parece excelente este principio ya que en la actualidad la mayor铆a de las personas usan un smartphone para conectarse a internet!

Es interesante hacer 鈥淯tility First鈥. En 鈥淐SS Puro鈥, trataba de hacerlo con 鈥淍imports鈥. Para ser honesto, pues te tardas un poco.

Al escribir los estilos (con Tailwind) en el documento HTML, 驴no estar铆amos mezclando la restructure con la presentaci贸n?

Utility-First es algo que en definitiva ayuda much铆simo tanto a la legibilidad del c贸digo como para la 鈥渟impleza鈥 en cantidad de archivos a tener en el proyecto.

siento que utility-first hace m谩s dificil leer la estructura html. existe alguna extensi贸n para vscode para ocultar(fold) las clases?

Estuve mirando la documentaci贸n oficial de Tailwind acerca de Utility first y la verdad se ve genial. Muy sencillo de implementar estilos directamente en el HTML en cada componente.
Me preocupa un poco el tema del mantenimiento cuando unos estilos son aplicados en m煤ltiples partes pero al parecer se pueden crear templates o Partials y pues creo que eso resolver铆a mi duda.