1. Tipografía
  2. text-transform

Tipografía

text-transform

Utilidades para controlar las mayúsculas y minúsculas del texto.

ClaseEstilos
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
normal-case
text-transform: none;

Ejemplos

Texto en mayúsculas

Usa la utilidad uppercase para convertir el texto de un elemento en mayúsculas:

El veloz zorro marrón salta sobre el perro perezoso.

<p class="uppercase">El veloz zorro marrón ...</p>

Texto en minúsculas

Usa la utilidad lowercase para convertir el texto de un elemento en minúsculas:

El veloz zorro marrón salta sobre el perro perezoso.

<p class="lowercase">El veloz zorro marrón ...</p>

Capitalizar texto

Usa la utilidad capitalize para poner en mayúscula la primera letra de cada palabra en el texto de un elemento:

El veloz zorro marrón salta sobre el perro perezoso.

<p class="capitalize">El veloz zorro marrón ...</p>

Restablecer mayúsculas y minúsculas

Usa la utilidad normal-case para conservar las mayúsculas y minúsculas originales del texto de un elemento, típicamente usada para restablecer la capitalización en diferentes breakpoints:

El veloz zorro marrón salta sobre el perro perezoso.

<p class="normal-case">El veloz zorro marrón ...</p>

Diseño responsivo

Antepone a la utilidad text-transform el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<p class="capitalize md:uppercase ...">  Lorem ipsum dolor sit amet...</p>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas