Tipografía y texto
Estilos de fuente
Para gestionar la fuente de texto utilizada y sus características (generalmente propiedades que en CSS empiezan con el prefijo font-) tenemos varias clases en función de la propiedad que queramos establecer. Algunas de ellas son:
- font-family →Tenemos las clases font-sans, font-serif y font-mono con fuentes prestablecidas. Si queremos aplicar otra fuente lo podemos hacer con la sintaxis font-[Nombre_fuente]. También podemos crear nuevas fuentes modificando el tema de Tailwind (@theme).
- font-size →Para el tamaño del texto tenemos clases predefinidas con el sufijo text-*, como pueden ser text-xs, text-sm, text-base, ..., text-9xl.
- font-style →Para la cursiva. Están las clases italic (cursiva) y not-italic (normal).
- font-weight → Para gestionar esta propiedad tenemos las clases desde font-thin (100) hasta font-black (900), pasando por clases como font-normal (400) o font-bold (700) entre otras.
<p class="font-oswald italic text-2xl font-bold">Hello world!</p>
Estilos de texto
Para modificar estilos del texto como pueden ser el color, alineación, salto de línea, transformaciones, etc. (generalmente propiedades que en CSS tienen el prefijo text-) tenemos varias clases de Tailwind para gestionarlo.
Por ejemplo, el color del texto lo definimos con una clase con el formato text-color, por ejemplo text-red-500 o text-white.
La alineación del texto la definimos con las clases text-left o text-start, text-right o text-end, text-center, o text-justify.
<div class="border p-2">
<p class="text-red-700">Hello world!</p>
<p class="text-blue-700 text-center">Hello world!</p>
<p class="text-green-700 text-end">Hello world!</p>
</div>
Para establecer una línea de subrayado, tachado, o sobre el texto (y sus estilos tenemos las siguientes clases):
- Posición: underline (subrayado), no-underline (quitar subrayado), overline (linea arriba), line-through (tachado).
- decoration-color: Para el color de la línea.
- Estilo: Tipo de línea, con el prefijo decoration-* donde '*' puede ser solid (contínua), dotted (puntos), dashed (discontinua), double (doble) o wavy (ondulada).
- Grosor (thickness): Con decoration-número podemos establecer un grosor diferente (decoration-1, decoration-2, ...)
- Separación (offset): Con decoration-offset-número establecemos la separación entre la línea y el texto.
<div class="border p-2">
<p class="underline decoration-green-400 decoration-dotted decoration-4">Subrayado verde con puntos grueso</p>
<p class="line-through decoration-red-600">Tachado rojo</p>
<p class="overline decoration-blue-600 decoration-double decoration-offset-8">Linea arriba doble y separada</p>
<p class="underline decoration-red-600 decoration-wavy decoration-1">Subrayado rojo marcando error</p>
</div>
Otras utilidades interesantes son:
- text-transform: uppercase, lowercase, capitalize y normal-case.
- text-overflow: Tenemos la clase truncate que aplica automáticamente el estilo de una sola línea de texto (no-wrap) que termina en puntos suspensivos ... cuando no cabe. También text-ellipsis y text-clip.
- text-wrap: Controla cuando romper el texto para la siguiente línea
- text-indent: Indentación del texto.