Lección 9 de 16 · Lectura y práctica
Tailwind CSS en Next.js: configuración y buenas prácticas
Configura Tailwind CSS v4 con PostCSS en Next.js y comprueba estilos, foco y lectura móvil sin mezclar instrucciones de v3.
Del concepto a la práctica
Taller de esta lección
La configuración de estilos debe corresponder al proyecto real. Antes de copiar clases, identifica el flujo de CSS y conserva un solo conjunto coherente de instrucciones. La calidad se comprueba en una tarjeta pequeña: espaciado legible, foco visible y comportamiento razonable al estrechar la ventana.
Ejemplo resuelto
export function ProductoCard() {
return <article className='max-w-sm rounded border p-4'>
<h2 className='text-lg font-semibold'>Papel algodón</h2>
<a className='mt-3 inline-block underline focus-visible:outline-2' href='/productos/papel'>Ver detalle</a>
</article>;
}La clase de foco no sustituye una prueba con teclado.
En una práctica Tailwind v4, instala tailwindcss @tailwindcss/postcss postcss, configura postcss.config.mjs con plugins: { "@tailwindcss/postcss": {} } y añade @import "tailwindcss"; a app/globals.css, importado por el layout raíz. Si el proyecto es v3, conserva su receta o realiza una migración explícita: no mezcles sus directivas y plugin con v4.
Pruébalo
Confirma qué archivo global importa el layout.
Crea la tarjeta con un producto ficticio.
Reduce el ancho hasta una columna estrecha.
Entra al enlace usando Tab.
Comprueba tu resultado
Error frecuente: mezclar recetas de configuraciones distintas. Corrección: sigue la configuración presente y cambia una cosa cada vez.
Ejercicio: el enlace debe recibir foco visible con Tab, el título debe seguir siendo legible en 320 píxeles y la tarjeta debe mostrar exactamente un producto sin desbordamiento horizontal.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗Fuentes para profundizar
Primero identifica la versión
Abre package.json y el archivo de bloqueo. Esta práctica usa Tailwind CSS v4 con PostCSS. Un proyecto v3 puede seguir usando su configuración propia; no ejecutes una migración solo para copiar una tarjeta. Conserva el gestor de paquetes y el lockfile del proyecto.
Instalación v4 con PostCSS
npm install tailwindcss @tailwindcss/postcss postcss// postcss.config.mjs
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};/* app/globals.css */
@import "tailwindcss";Importa ./globals.css desde el layout raíz. La receta v4 usa @tailwindcss/postcss; no la combines con el plugin tailwindcss de una receta v3 ni con sus tres directivas antiguas. Si tu proyecto utiliza pnpm, instala esas mismas dependencias con pnpm y conserva su lockfile.
Una tarjeta que puedas revisar
export default function CourseCard() {
return (
<article className="max-w-lg rounded-xl border p-6">
<h2 className="text-2xl font-semibold">Proyecto de práctica</h2>
<p className="mt-3 leading-relaxed">Dos rutas, una interfaz clara.</p>
<a
className="mt-5 inline-block rounded px-4 py-3 underline focus-visible:outline-2"
href="/panel/proyectos"
>
Abrir proyectos
</a>
</article>
);
}Las clases del ejemplo están completas en el archivo. Evita construir nombres como "bg-" + color + "-500": el detector necesita reconocer las clases. Para variantes de una tarjeta, usa un mapa con cadenas completas y prueba cada variante.
Práctica y criterio de aceptación
- Haz que la tarjeta se vea con y sin el CSS importado para identificar qué cambia.
- Prueba una ventana estrecha, zoom y navegación con Tab. El enlace debe verse enfocado y el texto no debe salir de la tarjeta.
- Añade una segunda tarjeta con una variante definida por un mapa de clases.
- Ejecuta el build del proyecto y registra cualquier advertencia real; no confundas la ausencia de errores en el editor con un build correcto.
- Anota versión de Tailwind y gestor de paquetes.
- Entrega los cambios de PostCSS, CSS y layout, sin crear un segundo pipeline.
- Comprueba que el enlace usa una ruta real de tu ejemplo.
- Si mantienes v3, etiqueta la práctica como v3 y usa su guía oficial; no presentes ambas recetas como intercambiables.
Referencias para comprobar la implementación
Documentación consultada el 2 de octubre de 2026. Comprueba también las versiones y condiciones de tu proyecto.
Sigue con Desarrollo Web Full Stack con Next.js
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.