2. Clases más usadas

Esta página es para tenerla abierta mientras trabajas. Las clases están agrupadas por lo que hacen, y cada una dice qué propiedad de CSS escribe. No hay que memorizarlas: con los cinco patrones las vas a reconocer, y con el uso se quedan solas.

Cuando no encuentres una clase aquí

Busca en la documentación oficial el nombre de la propiedad de CSS que quieres (por ejemplo “text-decoration”): cada página muestra sus clases. Y con Tailwind CSS IntelliSense, al pasar el cursor sobre una clase en VSCode, ves el CSS que escribe.

Fondo

Clase	Qué hace
bg-white · bg-black	Fondo blanco o negro
bg-sky-700	Fondo del color y tono indicados (cualquier color de la paleta)
bg-gray-50	Fondo gris casi blanco: bueno para separar una sección del resto
bg-transparent	Sin fondo
bg-linear-to-r from-sky-600 to-indigo-600	Degradado de izquierda a derecha, entre dos colores

<section class="bg-gray-50 py-12">…</section>

Color del texto

Clase	Qué hace
text-gray-900	Texto casi negro: títulos y texto principal
text-gray-700	Texto de párrafos, un poco más suave
text-gray-600	Texto secundario: fechas, notas, ayudas
text-white	Texto blanco, sobre fondos oscuros
text-sky-700	Texto del color principal: enlaces y vista activa
text-red-700 · text-green-700	Mensajes de error y de éxito

Tamaño y forma del texto

Clase	Qué hace
text-xs · text-sm · text-base · text-lg · text-xl	Letra de 12, 14, 16, 18 y 20 px
text-2xl · text-3xl · text-4xl · text-5xl	Letra de 24, 30, 36 y 48 px (títulos)
font-normal · font-medium · font-semibold · font-bold	Grosor de 400, 500, 600 y 700
italic	Cursiva
font-sans · font-serif · font-mono	Familia sin serifa, con serifa o de ancho fijo
text-left · text-center · text-right	Alineación del texto
leading-tight · leading-normal · leading-relaxed	Interlineado apretado, normal u holgado
tracking-tight · tracking-wide	Letras más juntas o más separadas
uppercase · lowercase · capitalize	Todo en mayúsculas, en minúsculas o la primera de cada palabra
truncate	Corta el texto que no cabe en una línea y pone …

text- sirve para dos cosas

text-2xl es un tamaño y text-gray-700 es un color. Se distinguen porque el color siempre lleva nombre y tono. Los dos conviven sin problema: class="text-2xl text-gray-700".

Subrayado y decoración

Clase	Qué hace
underline	Subraya el texto
no-underline	Quita el subrayado
line-through	Tacha el texto (un precio anterior, por ejemplo)
underline-offset-4	Separa el subrayado del texto, para que no toque las letras
decoration-2	Subrayado más grueso
decoration-sky-700	Color del subrayado

<a href="sobre-mi.html" class="text-sky-700 underline underline-offset-4 hover:text-sky-900">
  Conoce mi trabajo
</a>

Dentro de un párrafo, el enlace va subrayado

Tailwind les quita el subrayado a todos los enlaces. En un menú no hace falta, pero dentro de un párrafo es lo que distingue un enlace del texto normal: devuélveselo con underline.

Espaciado

Clase	Qué hace
p-4	Relleno de 16 px en los cuatro lados
px-4 · py-2	Relleno a los lados (izquierda y derecha) · arriba y abajo
pt-8 · pr-8 · pb-8 · pl-8	Relleno de un solo lado: arriba, derecha, abajo, izquierda
m-4 · mx-4 · my-4	Margen en los cuatro lados · a los lados · arriba y abajo
mt-8 · mb-4	Margen de un solo lado
mx-auto	Centra la caja en horizontal (necesita un ancho, como max-w-5xl)
gap-4	Separación entre los hijos de un flex o un grid
space-y-4	Separación vertical entre hijos que van uno bajo otro

Recuerda: el número por cuatro son los píxeles (p-4 son 16 px).

Ancho y alto

Clase	Qué hace
w-full	Ancho del 100% de su contenedor
w-1/2 · w-1/3	La mitad o un tercio del ancho
w-64	Ancho fijo de la escala (256 px)
max-w-md · max-w-3xl · max-w-5xl	Ancho máximo de 448, 768 y 1024 px
max-w-prose	Ancho máximo cómodo para leer párrafos (unos 65 caracteres)
h-48	Alto fijo de la escala (192 px)
min-h-screen	Como mínimo, el alto de la pantalla
size-12	Ancho y alto iguales (48 px): íconos y fotos redondas

Bordes

Clase	Qué hace
border · border-2	Borde de 1 px o de 2 px en los cuatro lados
border-t · border-b-2	Borde solo arriba · solo abajo, de 2 px
border-gray-200	El color del borde
rounded · rounded-lg · rounded-xl	Esquinas redondeadas de 4, 8 y 12 px
rounded-full	Completamente redondo: fotos de perfil y etiquetas
divide-y divide-gray-200	Una línea entre cada hijo (filas de una lista o una tabla)

Un border sin color toma el color del texto

border solo pone un borde de 1 px del mismo color que el texto, normalmente casi negro, y se ve duro. Escríbelo siempre con su color: border border-gray-200.

Sombras y transparencia

Clase	Qué hace
shadow-sm · shadow-md · shadow-lg	Sombra bajo la caja, de más suave a más marcada
opacity-50	La caja al 50% de transparencia

Mostrar y ocultar

Clase	Qué hace
block	Elemento de bloque: ocupa toda la fila
inline-block	En línea, pero acepta alto y relleno vertical (útil en enlaces con forma de botón)
hidden	No se muestra
sr-only	Oculto en la pantalla, pero el lector de pantalla lo lee

Flexbox

Clase	Qué hace
flex	Activa Flexbox en el contenedor
flex-row · flex-col	Hijos en fila · en columna
flex-wrap	Si no caben, los hijos bajan a la línea siguiente
justify-start · justify-center · justify-between	Reparte a lo largo: al inicio, al medio, uno a cada extremo
items-start · items-center · items-stretch	Alinea a lo ancho: arriba, al medio, todos del mismo alto
flex-1	En el hijo: toma el espacio que sobra, en partes iguales
shrink-0	En el hijo: no se encoge (una foto al lado de un texto largo)

Grid

Clase	Qué hace
grid	Activa Grid en el contenedor
grid-cols-2 · grid-cols-3 · grid-cols-4	Dos, tres o cuatro columnas iguales
col-span-2	En el hijo: ocupa dos columnas
gap-6	Separación entre las celdas

Posición

Clase	Qué hace
relative	El elemento sirve de referencia para un hijo absolute
absolute	Se saca del flujo y se ubica respecto de su padre relative
top-0 · right-0 · inset-0	Pegado arriba · a la derecha · a los cuatro bordes
sticky top-0	Se queda pegado arriba al hacer scroll (una navbar que te acompaña)
z-10	Lo pone por encima de los demás si se superponen

Imágenes

Clase	Qué hace
w-full h-48 object-cover	Llena su caja recortando la imagen, sin deformarla
object-contain	La imagen entera dentro de su caja, aunque sobre espacio
aspect-video · aspect-square	Proporción 16:9 · cuadrada
rounded-full	Foto redonda (junto con un ancho y alto iguales, como size-24)

Listas y tablas

Clase	Qué hace
list-disc list-inside	Devuelve las viñetas que Tailwind les quita a las <ul>
list-decimal list-inside	Devuelve los números de las <ol>
border-collapse	Une los bordes de las celdas de una tabla en una sola línea
overflow-x-auto	En el contenedor de una tabla ancha: se desliza de lado en vez de romper la página

Estados

Se escriben delante de cualquier clase, con dos puntos: la clase solo se aplica en ese estado.

Prefijo	Se aplica	Ejemplo
hover:	Con el cursor encima	hover:bg-sky-800 · hover:underline
focus:	Cuando el elemento tiene el foco (clic en un campo o Tab)	focus:border-sky-700
focus-visible:	Cuando el foco llegó con el teclado	focus-visible:outline-2 focus-visible:outline-sky-700
active:	Mientras se mantiene pulsado	active:bg-sky-900
disabled:	Si el botón o campo tiene disabled	disabled:opacity-50
visited:	En un enlace ya visitado	visited:text-purple-700
first: · last:	En el primer · último hijo	last:border-b-0
odd: · even:	En los hijos impares · pares	even:bg-gray-50 (filas de tabla alternadas)
placeholder:	En el texto de ejemplo de un campo	placeholder:text-gray-500

Un botón con sus estados:

<button type="submit"
        class="cursor-pointer rounded-lg bg-sky-700 px-4 py-2 font-semibold text-white
               transition-colors hover:bg-sky-800 active:bg-sky-900
               focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
  Enviar mensaje
</button>

hover: y el foco, siempre juntos

Es la misma regla de CSS: lo que se ve con el ratón tiene que verse también con el teclado. Si le das hover: a un enlace o botón, dale también un foco visible con focus-visible:outline-…, y nunca quites el contorno sin reemplazarlo.

Tamaños de pantalla

Se escriben igual que los estados, delante de la clase. Sin prefijo, la clase vale para todas las pantallas; con prefijo, desde ese ancho hacia arriba.

Prefijo	Desde	Ejemplo
sm:	640 px	sm:flex-row
md:	768 px	md:grid-cols-3
lg:	1024 px	lg:text-5xl
xl:	1280 px	xl:max-w-6xl

Se explican en detalle en Maquetación y diseño responsivo.

Detalles de interacción

Clase	Qué hace
cursor-pointer	Pone la manito (los <button> no la traen en Tailwind)
cursor-not-allowed	Cursor de prohibido: para botones deshabilitados
transition-colors	Los cambios de color se hacen suaves en vez de golpe
duration-200	La transición dura 200 milisegundos
accent-sky-700	Colorea las casillas checkbox y radio con el color principal

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Qué clases usarías para un fondo celeste oscuro con texto blanco?

bg-sky-700 text-white. bg- pinta el fondo y text- el color del texto; el número es el tono (más alto, más oscuro).

Tus enlaces perdieron el subrayado al vincular Tailwind. ¿Cómo se lo devuelves?

Con underline. Tailwind se lo quita a todos los enlaces; en un menú no hace falta, pero dentro de un párrafo conviene devolverlo, porque es lo que distingue el enlace del texto. underline-offset-4 lo separa un poco de las letras.

¿Qué hace hover:bg-sky-800?

Cambia el fondo a sky-800 solo mientras el cursor está encima. El prefijo hover: equivale al :hover de CSS, y funciona delante de cualquier clase: hover:underline, hover:text-sky-900, hover:shadow-lg.

¿Qué diferencia hay entre text-2xl y text-gray-700?

text-2xl es un tamaño de letra (24 px) y text-gray-700 es un color. Los dos empiezan con text-, pero el color siempre lleva nombre y tono.

Tu lista <ul> perdió las viñetas. ¿Cómo las recuperas?

Con list-disc list-inside en la <ul> (y list-decimal en una <ol>). Tailwind les quita las viñetas a todas las listas para que las del menú no las tengan.

¿Cómo haces que una foto llene su caja sin deformarse?

Con un ancho y un alto para la caja y object-cover: w-full h-48 object-cover. La imagen se recorta para llenar el espacio, en vez de estirarse.