Tailwind CSS (Spanish)

Introducción

Como desarrolladores hemos experimentando con varios entornos de trabajo para la creación de sitios web personalizables, siempre buscamos nuevas alternativas de mejorar CSS para diseñar nuestras interfaces.

Nos hemos topado con un sin fin de retos, anular estilos, mantener una especificidad buena, utilizar la metodología para aumentar significativamente la velocidad de desarrollo y el mantenimiento, esto puede ser complicado cuando se trata de aplicaciones grandes.

Y lo más preocupante es hacer un diseño personalizado que destaque del resto, creando identidad, valores y todo lo que representa ese producto o idea.

Hay muchos entornos de trabajo que cuentan con componentes ya diseñados, los cuales son geniales y nos ayudan a disminuir horas de desarrollo, pero tiene sus desventajas esto puede ocasionar estilos genéricos, pérdida de identidad o originalidad.

Y como experiencia puedo decir que eso es terrible.

Tailwind

Quiero hablar sobre Tailwind CSS es un framework para construir sitios web con estilos personalizados, y si tu como yo quieres personalizar colores, tamaños de borde, pesos de fuente, espaciado, puntos de interrupción, sombras y mucho más, sin problemas de personalizar tus componentes como sucedería en otro entorno de trabajo, esto puede ayudarte.

Tailwind está escrito en PostCSS una herramienta para transformar CSS en JavaScript, lo cual te garantiza crear interfaces hermosas y potentes.

Instalación

La instalación es muy simple y no hay mejor lugar que la documentación oficial: Tailwind CSS installation.

Plugin

Si tu entorno de trabajo es VSCode, te recomiendo instalar el siguiente plugin: Tailwind CSS IntelliSense.

Te ayuda a:

• Autocompletado.
• Resaltado de sintaxis.
• Informe de error de sintaxis.

Antes de iniciar

Tailwind no cuenta con componentes prediseñados, pero se puede argumentar que cuenta clases preexistentes llamadas utilidades, listas para usarse.

La utilidad es primero

Tengo que reconocer que al principio no me gustaba la idea de implementar un diseño sin ninguna línea de CSS.

• Tailwind quiere resolvernos problemas al nombrar nuestras clases, no creando ninguna clase utilizando las preexistentes.

• Normalmente en nuestros proyectos los estilos se vuelven cada vez más grandes y complejos, con las utilidades todo es reutilizable, con la idea de evitar escribir CSS lo más que se pueda.

• CSS está definido de manera global en toda su aplicación y cuando esta crece puede ser difícil de administrar, aumentando la posibilidad de tener conflictos de nombres de estilos, en Tailwind se evita este problema con sus clases en el HTML que son locales.

Existen los módulos de CSS o la biblioteca de Styled Components que de otra forma también resuelven estos problemas, pero lo que lo hace único a Tailwind CSS son sus utilidades.

Ya no me sentía aferrado a hacer estilos de CSS, la productividad al trabajar en sólo un archivo era buena, algo que me gustó mucho fue construir componentes simples o complejos a partir de un conjunto de utilidades.

<div class="mt-10 max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img
      class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"
      src="https://picsum.photos/100/100"
      alt="Photo Profile"
    />
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Victor Urbano</p>
      <p class="text-sm leading-tight text-gray-600">Developer</p>
      <div class="mt-4">
        <button class="text-green-500 hover:text-white hover:bg-green-500 border border-green-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">
          Message
        </button>
      </div>
    </div>
  </div>
</div>

Me preocupaba el mantenimiento del código, tener tantas clases en una etiqueta es algo que a simple vista no es de mi agrado, para resolver esto podemos extraer las utilidades usando la función @apply para crear abstracciones alrededor de patrones de utilidad comunes.

.container-card {
    @apply mt-10 max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden;
}

.content-card {
    @apply px-6 py-4;
}

.content-card__img {
    @apply block mx-auto h-16 rounded-full;
}

.content-card__info {
    @apply mt-4 text-center;
}

.content-card__name {
    @apply text-xl leading-tight;
}

.content-card__work {
    @apply text-sm leading-tight text-gray-600;
}

.content-card__btns {
    @apply mt-4;
}

.content-card__btn {
    @apply text-green-500 border border-green-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal;
}

Se reduce bastante las utilidades dejando un html más limpio, reutilizando estilos y facilitando el mantenimiento del CSS.

<div class="container-card">
  <div class="content-card sm:flex sm:items-center">
    <img
      class="content-card__img sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24"
      src="https://picsum.photos/100/100"
      alt="Photo Profile"
    />
    <div class="content-card__info sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="content-card__name">Victor Urbano</p>
      <p class="content-card__work">Developer</p>
      <div class="content-card__btns">
        <button class="content-card__btn hover:text-white hover:bg-green-500">
          Message
        </button>
      </div>
    </div>
  </div>
</div>

Pruebas

Realice unas pruebas de colores, tipografía, tamaños, grid, flexbox, etc. Y fue muy cómodo poder trabajar, hay utilidades que puedes intuir qué es lo que realizan ya que su identificador es igual que en CSS.

Sorpresa 🎁

Tailwind CSS ofrece ejemplos de componentes gratuitos y otros de paga, pero no son muchos, así que les dejo dos sitios web los cuales cuentan con una gran variedad de componentes.

• tailwindcomponents
• tailblocks

Conclusión

No te olvides del CSS, aumenta tu productividad y te mantienes creativo creando diseños originales.

Puedo concluir que es una alternativa nueva, increíble y potente que te recomiendo que pruebes y puedas compartir tu experiencia.

Feliz Codificación :D