Mejora de Texto con Utilidades de Tipografía
Tailwind CSS ofrece un conjunto sólido de utilidades para gestionar la tipografía, permitiendo controlar fácilmente el tamaño de fuente, el peso de fuente y la altura de línea. Estas utilidades ayudan a garantizar que el texto mantenga un estilo coherente y sea fácilmente legible en diferentes dispositivos y tamaños de pantalla.
Tamaño de fuente
Las utilidades de tamaño de fuente en Tailwind CSS permiten ajustar el tamaño del texto. Estas utilidades siguen una convención de nombres que facilita comprender y aplicar diferentes tamaños.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Grosor de fuente
Las utilidades de grosor de fuente controlan el espesor o la negrita del texto. Tailwind CSS proporciona varias utilidades para cubrir una amplia gama de grosores de fuente, desde fino hasta negro.
| Font Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Altura de línea
Las utilidades de altura de línea controlan el espacio vertical entre líneas de texto. Una altura de línea adecuada puede mejorar la legibilidad y la apariencia visual general de los bloques de texto.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
Nota
Si necesita información específica sobre el tamaño de fuente, el peso de fuente o la altura de línea, haga clic en los siguientes enlaces:
1. ¿Qué clase se utiliza para establecer el tamaño de fuente en extra grande?
2. ¿Qué clase utilitaria usaría para poner el texto en negrita?
3. ¿Qué clase establece la altura de línea como relajada?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you give examples of how to use these typography utilities in Tailwind CSS?
What are the best practices for combining font size, weight, and line height?
Are there any tips for making text more readable with Tailwind CSS?
Awesome!
Completion rate improved to 3.57Mejora de Texto con Utilidades de Tipografía
Desliza para mostrar el menú
Tailwind CSS ofrece un conjunto sólido de utilidades para gestionar la tipografía, permitiendo controlar fácilmente el tamaño de fuente, el peso de fuente y la altura de línea. Estas utilidades ayudan a garantizar que el texto mantenga un estilo coherente y sea fácilmente legible en diferentes dispositivos y tamaños de pantalla.
Tamaño de fuente
Las utilidades de tamaño de fuente en Tailwind CSS permiten ajustar el tamaño del texto. Estas utilidades siguen una convención de nombres que facilita comprender y aplicar diferentes tamaños.
| Font Size | Description |
|---|---|
text-xs | Extra small text. |
text-sm | Small text. |
text-base | Base text (default size). |
text-lg | Large text. |
text-xl | Extra large text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Increasingly larger text sizes. |
index.html
Grosor de fuente
Las utilidades de grosor de fuente controlan el espesor o la negrita del texto. Tailwind CSS proporciona varias utilidades para cubrir una amplia gama de grosores de fuente, desde fino hasta negro.
| Font Weight | Description |
|---|---|
font-thin | Thin font weight. |
font-light | Light font weight. |
font-normal | Normal font weight. |
font-medium | Medium font weight. |
font-semibold | Semi-bold font weight. |
font-bold | Bold font weight. |
font-extrabold | Extra bold font weight. |
font-black | Black font weight. |
index.html
Altura de línea
Las utilidades de altura de línea controlan el espacio vertical entre líneas de texto. Una altura de línea adecuada puede mejorar la legibilidad y la apariencia visual general de los bloques de texto.
| Line Height | Description |
|---|---|
leading-none | No line height. |
leading-tight | Tight line height. |
leading-snug | Snug line height. |
leading-normal | Normal line height. |
leading-relaxed | Relaxed line height. |
leading-loose | Loose line height. |
leading-3, leading-4, leading-5, etc. | Specific numeric line height. |
index.html
Nota
Si necesita información específica sobre el tamaño de fuente, el peso de fuente o la altura de línea, haga clic en los siguientes enlaces:
1. ¿Qué clase se utiliza para establecer el tamaño de fuente en extra grande?
2. ¿Qué clase utilitaria usaría para poner el texto en negrita?
3. ¿Qué clase establece la altura de línea como relajada?
¡Gracias por tus comentarios!
