Este artículo proporciona el procedimiento para controlar la familia de fuentes de un elemento utilizando las utilidades Tailwind.
¿Cómo controlar la familia de fuentes de un elemento utilizando Tailwind Utilities?
Para controlar una familia de fuentes de un elemento en Tailwind, se debe proporcionar la siguiente utilidad al elemento:
fuente- { Familia tipográfica }
Hay tres familias de fuentes predeterminadas que se pueden configurar utilizando la utilidad proporcionada anteriormente. Éstas incluyen ' serifa ”, “ sin ', y ' mononucleosis infecciosa ”.
Usemos estas familias de fuentes en una demostración usando el ' fuente-{familia de fuentes} ”clase para ver cómo funciona:
< div clase = 'fuente-serif redondeado-xl sombra-lg centro de texto py-2 my-2 bg-verde-100' >
Esta es una familia FONT-SERIF
< / div >
< div clase = 'fuente-sans redondeado-xl sombra-lg centro de texto py-2 my-2 bg-blue-100' >
Esta es una familia FONT-SANS
< / div >
< div clase = 'fuente-mono redondeado-xl sombra-lg centro de texto py-2 my-2 bg-rojo-100' >
Esta es una familia FONT-MONO
< / div >
La explicación del código anterior es la siguiente:
- Hay tres elementos div creados usando el comando ' ”y cuentan con diferentes familias de fuentes.
- El ' Familia tipográfica} La clase 'proporcionará la familia de fuentes especificada para el texto del elemento.
- El ' redondeado-xl 'La clase hará que las esquinas del elemento div sean redondas.
- El ' sombra-lg 'La clase proporcionará una gran sombra al elemento div.
- El ' centro de texto ”alineará el texto con el centro del elemento.
- El ' py-2 ' y ' mi-2 'Las clases proporcionarán' 8px ”relleno y margen en la dirección superior e inferior del elemento.
- El ' bg-{color}-{número} La clase 'es responsable de establecer el fondo del elemento en el color especificado.
Del resultado, queda claro que cada elemento tiene una familia de fuentes diferente:
También podemos cambiar dinámicamente la familia de fuentes de un elemento usando la función de desplazamiento. A modo de ilustración, consulte el siguiente código:
< div clase = 'my-2 redondeado-xl bg-slate-100 py-2 texto-centro fuente-mono sombra-lg hover:font-serif' >Esta es una familia FONT-MONO por defecto< / div >En el código proporcionado anteriormente, el ' pasar el cursor: fuente-{familia} La utilidad 'es responsable de cambiar la familia de fuentes del elemento tan pronto como el cursor del mouse pasa sobre él. Se puede ver en el resultado que la familia de fuentes del texto cambia cuando el usuario pasa el cursor del mouse sobre él:
Se trata de controlar la familia de fuentes de un elemento en Tailwind.
Conclusión
En Tailwind, a un elemento se le puede asignar una familia de fuentes usando el botón ' Familia tipográfica} ' clase. Hay tres familias de fuentes predeterminadas proporcionadas por Tailwind, es decir, “ sin ”, “ serifa ', y ' mononucleosis infecciosa ”. El usuario también puede cambiar la familia de fuentes de un elemento al cambiar el estado de un elemento. Este artículo proporciona el procedimiento para controlar la familia de fuentes de un elemento en Tailwind.