No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Cambiando las propiedades de la tipografía

9/29
Recursos

Aportes 18

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

@font-faces

Para aprovechar la regla @font-facepara realizar cualquier personalización fuera de Tailwindcss modificamos el archivo CSS principal de la siguiente manera:

@tailwind base;

@font-face {
  font-family: Proxima Nova;
  font-weight: 400;
  src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
  font-family: Proxima Nova;
  font-weight: 500;
  src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}

@tailwind components;

@tailwind utilities;

Nota. Para definir cualquier personalización hacia los estilos base, agregamos nuestros estilos después de @tailwind base y antes de @tailwind components para evitar problemas de compilación.

<h1>3.3 Cambiando las propiedades de la tipografía</h1>

Se puede cambiar:

  • Tipo de letra.
  • Tamaño.
  • Cursiva y negrita.

Se aplican clases como:
text-3xl font-sans font-light

Se puede consultar la documentación en:
https://tailwindcss.com/docs/font-family/#app
https://tailwindcss.com/docs/font-weight/#app
https://tailwindcss.com/docs/font-size/#app

Todo se ve genial 😄

Con las clases de Font Weight se puede incrementar el peso de la fuente, les comparto la siguiente tabla:

Fuente: https://tailwindcss.com/docs/font-weight

Me gusta aunque veo que se generaran clases largaaaas

Veo muy floja la clase, no explican como utilizar otras tipografiás.Por ejemplo yo estooy aprendiendo NextJS (“De la documentación por que el curso es fatal”) y me gustaria saber como integrarlo.

Ya no existe font-hairline, la cambiaron por font-thin este tiene un font-weight de 100.

No es dificil mantener este codigo? es que parece que todos los estilos quedan en el html y genera clases muy largas. No se, me causa ruido.

Si quiero poner una nueva tipografía de google fonts como puedo hacerlo?

Les dejo el link directo para FontSize https://tailwindcss.com/docs/font-size/#app

A mi no me estaba mostrando la fuente font-mono, en su lugar me mostraba la apariencia la variante sans. Aparentemente tuve un problema con la compilación de Tailwind, ya que pude solucionar este problema simplemente volviendo a compilar con el comando:

npm run build

Las características que puedes cambiar de las fuentes son:

  • Tipo de letra
  • Tamaño
  • Cursiva
  • Negrita

Según la documentación de Tailwind font-hairline (ya) no existe.
__


__

Pero podemos usar font-thin que tiene el mismo estilo.

<h3>font-sans /Letra por default
font-serif /(tiene patitas) "Son adornos ubicados generalmente en los extremos de las líneas de los caracteres tipográficos"
font-mono /caracteres ocupan siempre el mismo espacio.</h3>
<h3>text-xl /Letra grande
text-3xl /Letras mas grande (va del 3-10) Segun Tailwind 2021
text-lg /Un poco mas grande que text-base
text-base /default
text-sm /Letra pequeña
text-xs /Letra mas pequeña que text-sm</h3>

italic /Cursiva
font-bold /Negrita
font-extrabold /Mas negrita que font-bold
font-light /Letra delgada
font-extralight/

Les comparto algunos cambios que vi en la documentación en enero del 2021

sf