Mobile First y Utility First

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 “Utility First”. En “CSS Puro”, trataba de hacerlo con “@imports”. Para ser honesto, pues te tardas un poco.

Utility-First es algo que en definitiva ayuda muchísimo tanto a la legibilidad del código como para la “simpleza” en cantidad de archivos a tener en el proyecto.

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.