Tipografía con Tailwind - Parte II

¡Saludos, querido lector! ¡Estamos de regreso, con más contenido y aprendizaje, involucrando clases de tipografía en Tailwind! La última vez que nos vimos, aprendiste los conceptos básicos de tamaño, estilo, espaciado entre letras, peso y familia de fuentes.

En el artículo de hoy continuaremos nuestros estudios explorando esta área y, buscando el mejor aprendizaje posible, recomendamos leer como base el artículo anterior, que aborda algunos conceptos que utilizaremos aquí, si hay alguna duda.

Text Align

Podemos definir en qué dirección se alineará nuestro texto de forma horizontal. Para hacer esto, usamos una de las siguientes clases:

• text-left - alinear el texto a la izquierda;
• text-right - alinear el texto a la derecha;
• text-center - alinear el texto al centro;
• text-justify - el texto es alineado de forma justificada;
• text-start - alinear el texto al inicio del elemento;
• text-end - el texto es alineado al final del elemento.
  

Text Color

Ahora aprenderemos cómo definir un color para el texto de un elemento. Hay varios colores proporcionados por Tailwind CSS que se pueden encontrar muy bien descritos y organizados en su documentación.

Salvo excepciones, la mayoría de los colores se dividen en nueve tonos diferentes, definidos por las centenas de 100 a 900 (un color 900 es más oscuro que uno 100). Usamos estas clases usando la siguiente notación:

text-{cor}-{100-900}

Es importante resaltar que existen clases de cambio de color de fondo que no siguen esta notación, y solo es necesario insertarlas sin el tono, como por ejemplo la clase text-black que define el color de fondo como negro. Como se indicó anteriormente, todas las especificaciones de las clases disponibles se encuentran en la documentación. Para nuestro ejemplo, ¿qué tal si definimos un color para cada texto?

Text Decoration

El atributo text-decoration de css se utiliza para aplicar una determinada decoración al texto de un elemento. Tailwind nos proporciona cuatro clases donde podemos personalizar textos bajo este concepto:

• underline - se creará una línea abajo del texto de un elemento;
• overline - la línea se creará arriba del texto de un elemento;
• line-through - crea una línea en el medio del texto de un elemento;
• no-underline - no se creará ninguna línea.
  

Veamos un ejemplo donde se aplicarán estas clases. Al pasar el cursor sobre cada texto, aplicamos un efecto que elimina las decoraciones usando la clase no-underline:

Text Decoration Color

Mira nuevamente la Figura 6. ¿Notaste que el color de las líneas creadas por las clases Tailwind para el atributo text-decoration siguieron los colores de fuente? Pero, ¿y si quisiéramos que la línea fuera de un color diferente al del texto? Pues, para ello, Tailwind nos proporciona un conjunto de clases que tienen relación directa con el atributo text-decoration-color, que define un color para la decoración que creamos.

La estructura de las clases que cambian el color de una decoración funciona de manera similar a la explicación de Text Color, con la excepción de que, en lugar del prefijo text, utilizaremos decoration de la siguiente forma:

decoration-{cor}-{100-900}

Text Decoration Style

No todo esto es suficiente, aún es posible personalizar la decoración que aplicas al texto de un elemento. Hay cinco clases creadas por Tailwind para este propósito:

• decoration-solid - crea una línea simple y es el comportamiento predeterminado de una decoración, si no se utiliza ninguna de las otras clases siguientes;
• decoration-double - se crean dos líneas en lugar de una sola;
• decoration-dotted - las líneas tendrán un efecto de puntos;
• decoration-dashed - las líneas tendrán un efecto discontinuo;
• decoration-wavy - aplica un efecto ondulado a la línea.
  

Text Decoration Thickness

El atributo text-decoration-thickness nos permite definir el grosor de la línea de decoración que se creó. Hay siete clases creadas por Tailwind que tienen este objetivo. Por ello, utilizaremos algunas de estas clases en el siguiente ejemplo para que notes la diferencia entre ellas (recuerda que, si tienes alguna duda o tienes curiosidad por ver todas las clases, consulta la documentación).

Nota: Si el espesor creado por las clases proporcionadas por Tailwind no satisface tus necesidades, puedes crear nuevos espesores cambiando el Tailwind.Config. Dentro del objeto extends que está incluido en el objeto theme, debes crear un nuevo objeto llamado textDecorationThickness y, en él, crear un conjunto de clave y valor para la nueva clase que se creará, donde la clave será el nombre de la clase y el valor será el tamaño del espesor deseado, conforme la figura 4:

Después, solo debes combinar la especificación creada con el prefijo decoration-. En ejemplo de la Figura 13, se insertaría en el elemento la clase decoration-3.

Text Underline Offset

Podemos definir la distancia entre la decoraciçon creada y el texto de un elemento con el atributo text-underline-offset de css. Ve algunas de las clases de Tailwind que poseen esta finalidad:

Así como para Text Decoration Thickness, podemos crear nuevas clases que manipulen la distancia entre una decoración y un texto. La diferencia es que, en lugar de crear un objeto llamado textDecorationThickness, creamos un objeto con el nombre textUnderlineOffset, conforme la Figura 16:

Luego solo debes combinar la especificación creada con el prefijo underline-offset-. En el ejemplo de la Figura 16, se insertaría en el elemento la clase underline-offset-3.

Text Transform

El atributo text-transform nos permite realizar algunas manipulaciones sobre el texto, como dejarlo completamente en mayúscula, por ejemplo. Como era de esperar, Tailwind también tiene clases diseñadas para proporcionar manipulación de este atributo:

• normal-case - no se aplicará ningún efecto de transformación al texto: este es el comportamiento predeterminado del atributo text-transform, en caso de que ninguna de las clases siguientes sean utilizadas;
• uppercase - transforma todo el texto de un elemento en mayúscula;
• lowercase - todo el texto de un elemento será en minúsculas;
• capitalize - la primera letra de cada palabra quedará en mayúsculas.
  

Text Indent

Utilizamos el atributo de css text-indent para definir el tamaño del espacio vacío antes de un texto en un determinado elemento. Tailwind posee diversas clases para este fin (consulta la documentación para ver todas), dentro de las cuales utilizaremos algunas para fines de ejemplificar:

También es posible crear nuevos tamaños para las muescas, si ninguna se ajusta a tus necesidades. En Tailwind.Config, dentro del objeto extends que está incluido en el objeto theme, debes crear un nuevo objeto llamado spacing y, en él, generar un conjunto de clave y valor para la nueva clase a crear, donde la clave será el nombre de la clase y el valor será el tamaño deseado, como se muestra en la figura 21:

A continuación, debes combinar la especificación creada con el prefijo indent-. En el ejemplo de la Figura 21, el elemento se insertaría en la clase indent-128.

Word Break

El atributo word-break se encarga de definir el comportamiento de una determinada palabra que excede el tamaño de un elemento. Veamos algunas de las clases de Tailwind responsables de esta función:

• break-normal - aplica saltos de línea sólo entre espacios y no dentro de una palabra;
• break-words - rompe una línea en medio de una palabra, cuando sea necesario;
• break-all - rompe líneas cuando es necesario, sin intentar conservar las palabras enteras.
  

Consideraciones finales

Hemos llegado al final de un gran viaje donde detallamos la Tipografía CSS aplicada a Tailwind. Después de leer los dos artículos que involucran este concepto, has aprendido a utilizar las principales funcionalidades aplicadas a este framework, pudiendo hacer cosas increíbles a partir de ahora.

Si te ha parecido interesante este artículo, te gustaría aclarar alguna duda o simplemente quieres intercambiar ideas sobre estos y otros temas, puedes contactarme, ya sea vía correo electrónico bruno.cabral.silva2018@gmail.com o en mi perfil de LinkedIn!

¡Saludos!