No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Cambiando las propiedades de la tipograf铆a

9/29
Recursos

Aportes 20

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

@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

Veo muy floja la clase, no explican como utilizar otras tipografi谩s.Por ejemplo yo estooy aprendiendo NextJS (鈥淒e 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.

Me gusta aunque veo que se generaran clases largaaaas

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

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

va a estar bueno cambiar la tipografia para alguna secciones del sitio.

Para los nuevos que esten aqui, ya no existe font-hairline, el minimo ahora es font-thin, y lo que antes era el thin, ahora es font-extralight
Para este tipo de cambios no olviden ver la documentacion
https://tailwindcss.com/docs/font-weight

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

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