Acabamos de publicar un curso en el canal de YouTube en español freeCodeCamp.org que te enseñará Tailwind CSS desde los conceptos básicos hasta conceptos más avanzados y proyectos. Al final del curso, podrás diseñar e implementar sitios web responsivos con Tailwind CSS.

Este curso fue creado por David Ruiz. David es Desarrollador Web Front-End con más de 5 años de experiencia. Comparte proyectos y cursos sobre Tailwind CSS, HTML, CSS, JavaScript y React en su canal de YouTube.

En este curso, te enseñará cómo crear e implementar diseños web modernos y responsivos paso a paso con las clases predefinidas de Tailwind CSS.

Antes de comenzar a sumergirnos en Tailwind con el curso de David, veamos una introducción rápida a Tailwind CSS  y po qué es importante para ti si tu objetivo es diseñar y crear sitios web modernos y responsivos de forma eficiente.

¿Qué es Tailwind CSS?

Tailwind CSS es un framework CSS con clases predefinidas que puedes utilizar para asignar estilo a los elementos HTML.

Con Tailwind CSS, puedes agregar clases CSS a tus elementos HTML directamente dentro del archivo HTML y ver cómo los estilos predefinidos se aplican inmediatamente.

💡 Dato: ¡Sí! Con Tailwind, escribimos nuestro CSS dentro del archivo HTML.

¿Por qué escoger Tailwind CSS?

Aprender Tailwind CSS puede ser muy útil para mejorar tu flujo de trabajo como desarrollo web. Sus ventajas incluyen:

• Desarrollo más rápido porque puedes utilizar clases CSS predefinidas en lugar de definir los estilos CSS tú mismo.
• Diseño responsivo porque las clases CSS predefinidas admiten variantes para distintos tamaños de pantalla. Puedes desarrollar un sitio web responsivo directamente desde tu archivo HTML, sin media queries adicionales.
• Archivos CSS más simples porque no definirás todos los estilos tú mismo en archivos CSS personalizados.
• Consistencia porque tú y tus colegas usarán las mismas clases de CSS con las mismas convenciones de nomenclatura en todo el proyecto.
• Funciones de personalización porque puedes personalizar y configurar muchas de estas clases CSS predefinidas para adaptarlas a tus necesidades.

Suena genial, ¿cierto?  🙂

Al aprender Tailwind CSS, estarás adquiriendo habilidades muy valiosas para tu carrera de desarrollo web.

Si estás listo para comenzar a incorporar Tailwind CSS en tu flujo de trabajo, veamos el contenido del curso.

Curso de Tailwind CSS en español

Durante el curso, aprenderás los siguientes aspectos de Tailwind CSS:

• Cómo instalar y configurar Tailwind CSS
• Colores
• Tamaño
• Estados
• Pseudo-clases
• Diseño web adaptable
• CSS Flexbox con Tailwind CSS
• CSS Grid con Tailwind CSS
• ¡Y más!

Además, aprenderás a activar y desactivar el modo oscuro (dark mode) con los estilos predefinidos de Tailwind CSS y crearás tres proyectos reales completos:

• Un panel de notificaciones
• Un dashboard (tablero)
• Una landing page (página de inicio)

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por David Ruiz.

• YouTube: @CodingTube
• Twitter: @CodingTube
• Página web: https://www.codingtube.dev/
• GitHub: @Davichobits
• LinkedIn: David Israel Ruiz Cabrera

Escribir CSS puede ser realmente difícil. Y punto. Y lo entiendo: puede ser frustrante plasmar tus propias ideas o los diseños que recibes de tu equipo de diseño.

Estoy seguro de que muchos de ustedes han pasado por el mismo dolor al menos un par de veces en sus carreras de desarrollo.

Pues ya no. Porque es hora de aprender una interesante herramienta que nos quita gran parte de la carga. Y no, no es Bootstrap: se llama Tailwind CSS.

Aunque Tailwind existe desde hace tiempo, es posible que aún no lo conozcas. Puede que no hayas oído hablar de él o que no sepas si aprender una nueva tecnología relacionada con CSS te hará la vida más fácil.

Y, de hecho, existen muchas formas de escribir CSS, como Vanilla CSS3, LESS, SCSS, Bootstrap, styled-components, Windi CSS y muchas más... uf. Menuda lista, ¿verdad?

Espero que esta breve guía te ayude a entender Tailwind CSS y sus beneficios para que puedas decir "Este es. Esto es".

Bueno, basta de cháchara. Entremos de lleno.

¿Qué es el CSS atómico?

Antes de adentrarnos en Tailwind CSS, vamos a entender qué es Atomic CSS. Según CSS Tricks

"CSS atómico es el enfoque de la arquitectura CSS que favorece las clases pequeñas y de propósito único con nombres basados en la función visual."

Es como hacer clases que se supone que tienen un único propósito. Por ejemplo, hagamos una clase bg-blue con el siguiente CSS:

.bg-blue {
  background-color: rgb(81, 191, 255);
}

Ahora bien, si añadimos esta clase a una etiqueta <h1>, obtendrá un fondo azul cuyo color será rgb(81, 191, 255) como se puede ver en el código anterior.

Y aquí está el HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world!</h1></div>
  </body>
</html>

Así que este HTML resultará en algo como esto:

Ahora imagínese escribir algo tan útil single-purpose CSS rules y guardarlos todos en un archivo global CSS. Sé que es una inversión de una sola vez, pero piensa en esto: ahora puedes utilizar estas clases de ayuda de un solo propósito desde donde quieras.

Sólo necesitas que tu archivo HTML consuma ese archivo CSS global, y ya está. Ahora también puedes utilizar combinaciones de estas clases de ayuda en una sola etiqueta HTML.

Veamos otro ejemplo, ¿de acuerdo?

Vamos a crear un archivo CSS con las siguientes reglas:

.bg-blue {
  background-color: rgb(81, 191, 255);
}
.bg-green {
  background-color: rgb(81, 255, 90);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.font-weight-400 {
  font-weight: 400;
}

y luego consumirlo en nuestro archivo HTML de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world 1</h1></div>
    <div><h1 class="text-underline">Hello world 2</h1></div>
    <div class="text-center">
      <h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
    </div>
  </body>
</html>

Bien, ahora esto generará el siguiente resultado:

?️ Puntos a tener en cuenta aquí:

• Combinación de varias clases de ayuda:Mira cómo he combinado varias clases de ayuda en la línea 14 de la etiqueta <h1>, concretamente bg-green, font-weight-400 y text-underline. Todo surtió efecto en mi texto Hello world 3.
• Reutilización de clases auxiliares: En el ejemplo anterior, fíjese en cómo text-underline se utiliza varias veces en las líneas 12 y 14.

Mira cómo hemos podido añadir diferentes estilos sin ni siquiera salir de la página HTML. Bueno, puede que digas: "Oye, tuvimos que escribir esas clases de ayuda o utilidad en el archivo CSS global... ¿Qué pasa con eso?". Bueno, lo entiendo. Esa fue definitivamente la inversión inicial que tuvimos que hacer para empezar.

Y, por supuesto, quién sabe cuántas de estas clases de ayuda o utilidad de propósito único tendríamos que hacer si quisiéramos seguir esta arquitectura Atomic CSS.

Y ahí es donde entra Tailwind CSS. El concepto de CSS atómico no es nuevo, pero Tailwind CSS lo lleva a otro nivel.

Tailwind CSS - Un framework CSS de utilidades básicas

Tailwind CSS, según su propio sitio web, es un "framework CSS que prioriza las utilidades" que proporciona varias de estas clases de utilidades de un solo propósito que puedes utilizar directamente dentro de tu marcado para diseñar un elemento.

Algunas de las clases de utilidad que utilizo con frecuencia estos días son:

• flex: Se utiliza para aplicar Flexbox a un <div>
• items-center: para aplicar la propiedad CSS align-items: center; a un <div>
• rounded-full: para hacer circular una imagen, etc.

En serio, no me es posible enumerarlas todas porque hay muchas de estas clases de utilidad. Pero la mejor parte es, que no tenemos que escribir estas clases de utilidad nosotros mismos y mantenerlos en cualquier archivo CSS global. Las obtenemos directamente de Tailwind.

Puedes obtener una lista de todas las clases de utilidad que ofrece Tailwind en la página de documentación. También si estás trabajando en VS Code, puedes instalar una extensión llamada Tailwind CSS IntelliSense y te dará auto-sugerencias mientras sigues escribiendo las clases de utilidad, como se muestra en la imagen de abajo.

Cómo configurar Tailwind CSS

Hay varias formas de configurar el CSS de Tailwind en tu proyecto, todas ellas mencionadas en su documentación.

Tailwind CSS funciona sin problemas con una plétora de frameworks como Next, React, Angular y más, e incluso con nuestro HTML original.

Para la siguiente demostración práctica estoy utilizando Tailwind CSS con una aplicación Next. Para configurar una aplicación Next con Tailwind CSS directamente, utilice el siguiente comando:

Con npx

npx create-next-app --example with-tailwindcss with-tailwindcss-app

O con yarn

yarn create next-app --example with-tailwindcss with-tailwindcss-app

Una vez configurado el proyecto, puede sumergirse en el siguiente paso para crear un componente de tarjeta básico

Demostración práctica

Construyamos un componente de tarjeta en un proyecto Next.

// Card.js file
// to be rendered in index.js

import React from "react";

const Card = () => {
  return (
    <div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
      {/* Image */}
      <div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
        <h1 className="absolute mx-auto text-center right text-2xl text-white">
          Image goes here
        </h1>
      </div>

      {/* Description */}
      <div className="p-2 border-b-2">
        <h6>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
        </h6>
      </div>

      {/* Tech stack used */}
      <div className="flex flex-wrap items-center m-2">
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #React
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Redux
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Javascript
        </span>
      </div>

      {/* Links */}
      <div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
        <button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
          Go to Project
        </button>
        <button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-2">
          Github
        </button>
      </div>
    </div>
  );
};

export default Card;

El resultado es la siguiente tarjeta que se muestra en la interfaz de usuario:

Mira lo fácil que es dar estilo al componente de la tarjeta sin siquiera salir del archivo Card.js. No es necesario escribir ningún archivo CSS adicional.

Utilizando flex con un <div> aplica regla CSS display: flex;. ¿Desea añadir position: relative; a un <div>? Sólo tiene que añadir relative en la className y ya está.

También podemos añadir diferentes modificadores como hover, active, focus y así sucesivamente para renderizar condicionalmente las clases de utilidad. Es posible aplicar reglas CSS complejas como esta:

.some-class-name {
          --tw-space-x-reverse: 0;
          margin-right: calc(0.5rem * var(--tw-space-x-reverse));
          margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

Con solo mencionar space-x-2 en la etiqueta <div>. Genial, ¿verdad?

¿Tenemos que mencionar explícitamente estos estilos en algún archivo CSS global? Por supuesto que no. Tailwind lo hace automáticamente por nosotros. Esa es la belleza de Tailwind.

Aún no hemos terminado... hay muchas otras ventajas. Veámoslas ahora.

Ventajas de Tailwind CSS

Just-In-Time (JIT) ofrece tiempos de compilación rapidísimos

Antes de la versión 3 de Tailwind, se purgaban todos los estilos para eliminar los que no se utilizaban, de modo que la compilación de producción fuera lo más pequeña posible.

Según Tailwind, la compilación de producción solía tener entre 5 y 10 kB. Pero esa es la historia en producción. En un entorno de desarrollo, el CSS puede llegar a ser realmente grande, especialmente si usamos mucha configuración personalizada.

Con la v3 y superiores, Tailwind lanzó una nueva característica llamada compilador Just-in-Time. El compilador JIT evita compilar todo el CSS por adelantado y compila sólo el CSS como y cuando lo necesitamos.

El resultado son tiempos de creación rapidísimos en todos los entornos. Y como los estilos se generan a medida que los necesitamos, no es necesario purgar los estilos no utilizados. Esto significa que el CSS en todos los entornos será el mismo. Esto nos ayuda a deshacernos del miedo a que cualquier CSS importante sea purgado en producción.

Es obstinado y flexible al mismo tiempo

El CSS de Tailwind es obstinado. Especifica algunas restricciones cuando se trata de estilo, y si me preguntas esto es bueno, ya que nos ayuda a mantener la parte de diseño a los que realmente lo entienden.

Basta con mirar una de las clases de utilidad para añadir un box-shadow a su <div>.

Como puede ver, solo hay 8 variantes de sombra que Tailwind proporciona. Hay valores preestablecidos para el desplazamiento vertical y horizontal, el desenfoque, la dispersión, el color y la opacidad. Por eso Tailwind es obstinado.

Trata de dar una opinión sobre qué valores de propiedad elegir en casi todas las propiedades de estilo que existen. Y créeme, para la mayoría de los casos, estas 8 variantes (para box-shadow) será más que suficiente para crear una gran interfaz de usuario.

Por ejemplo, en el ejemplo práctico anterior, he utilizado shadow-lg en la clase principal <div> para conseguir esa bonita sombra exterior.

El uso de la misma variante de una determinada clase de utilidad en distintas zonas de la interfaz de usuario también garantiza la uniformidad en toda la aplicación y mejora la experiencia del usuario.

Pero en caso de que necesites algún valor realmente personalizado para algún estilo en particular, puedes conseguirlo añadiendo un tema personalizado en la función tailwind.config.js. Por ejemplo, para obtener un shadow-3xl (Tailwind no proporciona shadow-3xl fuera de la caja) puede añadir las siguientes líneas en el archivo module.exports en tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

Y ahora, con la llegada del JIT, también puede utilizar un valor arbitrario entre corchetes [] como las siguientes:

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  // Rest of your code goes here
</div>

El uso de valores arbitrarios puede ser útil cuando se necesita un estilo específico en solo unos pocos lugares. Y en este caso, crear un tema para ello en el archivo tailwind.config.js puede parecer innecesario.

Mi opinión

Realmente espero haber podido hacerte entender qué es Tailwind CSS y qué puedes hacer con él.

Tailwind es un framework CSS que nos proporciona clases de utilidad de un solo propósito que son opinables en su mayor parte, y que nos ayudan a diseñar nuestras páginas web desde dentro de nuestro marcado o archivos .js/.jsx/.ts/.tsx.

En mi opinión, Tailwind es sencillo y fácil de entender. Es cierto que puede llevar algún tiempo entender todos los nombres de las clases de utilidad, pero no te preocupes: puedes consultar su documentación siempre que te atasques.

Y para todos los principiantes que están empezando su andadura en el desarrollo web, es muy importante saber qué es CSS3 antes de explorar Tailwind (o cualquier otro framework CSS como Bootstrap, Windi CSS, etc.).

Conclusión

Gracias por leer. Espero que hayas disfrutado leyendo sobre Tailwind CSS en este artículo y que lo hayas encontrado útil.

Considera la posibilidad de compartirlo con tus amigos, te lo agradecería mucho. Sígueme en LinkedIn y Twitter (ver más abajo) y permanece atento a más contenidos increíbles. ¡Hasta la vista! ?

Enlace Social

Twitter