En estos últimos días he estado empezando a utilizar este nuevo framework y ha mejorado un poco mi flujo de trabajo. Tanto es así que decidí escribir una breve introducción de lo que es esta increíble herramienta.

Antes de profundizar en el tema, es de suma importancia conocer los principios básicos de CSS y un poco de HTML.

Primero lo primero


¿Qué es Tailwind CSS?

Tailwind CSS como se mencionó anteriormente, es un framework que su principal función es brindar clases de utilidad para la optimización del desarrollo web. En pocas palabras esto significa que cuenta con un conjunto de clases predeterminadas que se pueden reutilizar en nuestro desarrollo web.

El creador es Adam Wathan el cual define a Tailwind como un framework de utilidades agnóstico, es decir que puede funcionar con cualquier otra librería o framework ya sea Angular, React, Vue, Laravel, etc.

¿Por qué utilizarlo?

Razones principales por las cuales decidí probar y utilizar Tailwind:

  • Se pueden utilizar sus clases y crear diseños únicos.
  • Se pueden realizar sitios web personalizados y que no queden con aspecto similar a otros frameworks. Por ejemplo: Bootstrap que utiliza componentes preestablecidos que son parecidos entre sí.
  • Obliga a ser capaces de investigar y aprender más sobre CSS, ya que ocupa todas las propiedades de este lenguaje de diseño.
  • Permite hacer sitios web adaptables a cualquier dispositivo móvil.
  • Esta escrito en PostCSS y configurado en JavaScript.

Empezar desde cero


Instalación

Existen varias alternativas para la instalación de Tailwind, estas instalaciones son perfectas para personalizar algunas clases en especifico, por el momento no se requiere personalización, ya que solo necesitamos entender cómo funciona Tailwind, con solo incluir el CDN.

<!-- CDN -->
<link href="<https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css>" rel="stylesheet">
CDN Tailwind CSS

Desventajas de este método

  • No se puede personalizar el tema predeterminado
  • No se pueden instalar complementos de terceros
  • Se tienen que utilizar las clases predefinidas

Para aprovechar al máximo Tailwind, es necesario instalar a través del gestor de paquetes npm.

Creación del primer componente


Utility First (Utilidades primero)

Cuando se requiere diseñar un sitio o un componente desde cero, tradicionalmente escribimos varias líneas de código. Por ejemplo, si tenemos que realizar el siguiente componente:

Componente de chat

Las líneas de código de HTML y CSS son las siguientes:

<!-- HTML -->
<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>

<!-- CSS -->
<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>
Código tradicional con HTML y CSS

Es mucho código ¿Cierto?. Bien, Ahora simplifiquemos todo esto con las clases de utilidad que ofrece Tailwind:

<!-- HTML -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>
Utilizando clases propias de Tailwind CSS

Ahora el código es mucho más óptimo y tiene solamente las clases que se van a utilizar. El resultado es el mismo, y lo mejor de todo es que no se escribe ni una línea de CSS.

Siguiente paso


Ahora que ya sabemos para que sirve, cómo funciona, y lo que se puede hacer con Tailwind. El siguiente paso es conocer todas las clases que se utilizan para el desarrollo de sitios web modernos.

Dejo algunas de las clases que se utilizan con mayor frecuencia:

Puntos de quiebre

Se utilizan para crear interfaces de usuario adaptadas a cualquier dispositivo.

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }
Puntos de quiebre (Media Queries)

Ejemplo en Tailwind:

<div class="mx-10 mt-5">
	<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500 h-12 w-12"></div>
</div>
Nombramiento de clases en HTML de los puntos de quiebre

Contenedores

La clase .container sirve para fijar el ancho de un elemento al punto de quiebre

Medidas de los puntos de quiebre

Padding & Margin

Se utilizan para controlar el margen exterior e interior

<div class="mt-5 border mx-5 p-10">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
</div>

Éstas son solo algunas de las propiedades de las muchas que tiene este framework, para crear interfaces sofisticadas no es necesariamente aprenderse cada una de las propiedades al pie de la letra, simplemente basta con ir a la documentación oficial y recordar qué clase debemos de utilizar en nuestro elemento, la documentación oficial se encuentra en la siguiente liga. Documentation - Tailwind CSS