Diseñar una página principal limpia requiere detalles visuales que conecten secciones sin saturar el layout. Aquí aprenderás a crear un divisor con gradiente en Tailwind CSS justo después del encabezado, además de optimizar tu flujo de trabajo con npm run dev en modo watch para que las clases nuevas se reflejen en tiempo real.

Cómo mantener activo npm run dev en modo watch

Cada vez que usas una clase de Tailwind que no está registrada en el archivo final de CSS, necesitas regenerar la compilación. En lugar de ejecutar el comando una y otra vez, puedes dejarlo encendido en modo observación.

¿Qué hace npm run dev en modo watch? Mantiene encendido el compilador de Tailwind para que detecte cualquier clase nueva en tu plantilla y actualice el archivo CSS final sin que tengas que volver a ejecutar el comando manualmente.

Esta práctica te ahorra interrupciones mientras pruebas estilos y agiliza la iteración cuando estás afinando detalles del diseño [0:30].

Cómo crear una línea divisoria con gradiente en Tailwind

Después del encabezado, agregamos un div con clases utilitarias que controlan opacidad, altura y margen inferior. La idea es generar una línea sutil que aparezca y desaparezca con un degradado horizontal.

Las clases base que usamos son:

• opacity-60 para suavizar la intensidad visual de la línea.
• h-px para definir una altura de un solo píxel.
• mb-8 para separar el divisor del contenido siguiente.

Luego aplicamos un gradiente personalizado con bg-[linear-gradient(...)] apuntando hacia la derecha. El truco está en los stops de color que controlan dónde el gradiente es transparente y dónde toma color sólido [1:15].

Cómo configurar los stops de color en el gradiente

El gradiente arranca con rgba(200, 200, 200, 0) en el 0 %, lo que significa un gris completamente transparente. Después se repite el mismo color con opacidad total en tres puntos clave:

• 30 % donde el gris ya es visible.
• 70 % manteniendo el color sólido.
• 100 % cerrando el gradiente.

¿Por qué usar rgba con alfa 0 en un gradiente? Porque permite que la línea desaparezca progresivamente en los extremos y se vea sólida en el centro, generando un efecto de fundido natural sin bordes duros.

El resultado visual es una línea horizontal que nace transparente, gana presencia hacia el centro y vuelve a desvanecerse al final [2:00].

Cómo agregar un logo centrado al pie de la plantilla

Para cerrar el bloque inicial de la plantilla, pegamos un párrafo que contiene el logo y le aplicamos dos utilidades de Tailwind que controlan espaciado y alineación.

• py-16 aplica un relleno superior e inferior generoso.
• text-center alinea el contenido horizontalmente al centro.

Esta combinación deja el logo respirando dentro del layout y mantiene la jerarquía visual coherente con el divisor que acabamos de crear [3:10]. Con esto, la estructura de la plantilla queda lista para seguir construyendo las siguientes secciones.

¿Cómo aplicarías este divisor con gradiente en tu propio proyecto? Cuéntame en los comentarios qué variaciones de color usarías para que combine con tu marca.