Cuando ya tienes 200 preguntas registradas en tu base de datos, cada una asociada a una categoría y a un usuario, el siguiente paso es mostrarlas en el navegador con un diseño limpio y funcional. Aquí aprendes a imprimir preguntas con Tailwind y Laravel desde la consulta hasta el render final, con un layout que incluye avatar, título, categoría y datos del usuario.

¿Cómo se hace la consulta de preguntas en Laravel?

Todo arranca por la capa de datos. Antes de pintar nada en pantalla, necesitas traer las preguntas desde la entidad correspondiente.

El flujo es directo: copias la consulta base, la importas al nuevo elemento y la conectas con la entidad de preguntas. Aquí entra un detalle importante de orden, agregas un método extra para que las preguntas se devuelvan de manera cronológica por defecto. Así, sin filtros adicionales, el usuario ve primero lo más reciente [00:30].

¿Qué hace el orden cronológico por defecto en una consulta? Define que los resultados lleguen ya ordenados por fecha sin que la vista tenga que reordenarlos. Reduce lógica en el front y mejora la experiencia inicial.

Una vez actualizada la consulta, la información queda lista para pasar al componente de la vista.

¿Cómo estructurar el componente de la vista?

El componente vive en la carpeta de vistas y es donde ocurre la magia visual. La columna lateral se contrae para ganar espacio, y se reserva un bloque que más adelante alojará un formulario de búsqueda [01:10].

La estructura base usa dos div anidados:

• Un div global que aplica el color de fondo.
• Un div interno que contiene la maqueta de cada pregunta.
• Un bloque reservado para la imagen o avatar del usuario.

Sobre el contenedor principal aplicas esquinas redondeadas, un gradient hacia la derecha que va de slate-800 a slate-900, y un hover que cambia ese color a 800 para dar feedback visual. Cierras con un margen inferior nivel cuatro para separar cada tarjeta.

¿Qué clases de Tailwind dan la estructura interna?

Dentro del contenedor, el truco está en combinar padding, flex y gap para alinear los elementos:

• p para el relleno general.
• flex para distribuir avatar y contenido.
• gap-4 para una brecha consistente entre bloques.

Luego, un div con anchura full envuelve el H2 del título y el párrafo con la información secundaria.

¿Cómo se imprime el título y la categoría de cada pregunta?

El H2 agrupa dos elementos clave: un enlace con el título y un span con la categoría. Para que queden en extremos opuestos, aplicas flex, alineación superior y la clase de justificación que separa los elementos a los lados [02:30].

El enlace recibe estas clases:

• text-xl para tamaño destacado.
• font-semibold para jerarquía tipográfica.
• text-white/90 para contraste sobre el fondo oscuro.

El span de la categoría usa bordes rounded-full, texto pequeño, padding corto y capitalize para que la primera letra siempre vaya en mayúscula. El color del borde y del texto arranca con #00aced como valor estático, pero queda preparado para volverse dinámico según la categoría más adelante.

¿Por qué usar capitalize en la categoría? Porque garantiza consistencia visual sin importar cómo esté guardado el dato en base de datos. Si llega en minúsculas, Tailwind lo muestra con la inicial en mayúscula.

¿Cómo mostrar el usuario y la fecha con formato humano?

El párrafo inferior aloja dos span: uno para el usuario y otro que después contendrá respuestas y botón de acción.

El span del usuario usa text-blue-900 y font-semibold para destacar el nombre. El párrafo contenedor lleva flex items-center, la misma clase de justificación, anchura máxima y texto pequeño, lo que mantiene la coherencia con el bloque del título.

Dentro del bloque del usuario va un span anidado con la fecha de creación de la pregunta. Aquí entra una pieza interesante, en lugar de mostrar un timestamp crudo, se usa la directiva @for con Carbon y el método diffForHumans() para imprimir frases tipo hace 2 horas o hace 3 días [04:20].

El color de la fecha pasa a text-white/90 y el separador o texto secundario usa text-slate-700, manteniendo la paleta consistente.

¿Qué es diffForHumans en Laravel? Es un método de Carbon que convierte fechas en expresiones legibles para personas. En vez de 2024-03-15 10:30, devuelve hace 2 horas, lo que mejora la lectura inmediata.

¿Qué quedó listo y qué sigue después?

Con esta configuración ya tienes la plantilla inicial funcional para listar preguntas:

• Consulta ordenada cronológicamente desde la entidad.
• Tarjeta con gradient, hover y esquinas redondeadas.
• Título enlazado, categoría con estilo de píldora, usuario destacado y fecha en formato humano.

Lo que viene son las configuraciones dinámicas: que la categoría cambie de color según su tipo, que el avatar se conecte al usuario real y que el bloque inferior incluya conteo de respuestas y botones de interacción. ¿Cómo aplicarías colores dinámicos a las categorías en tu propio proyecto? Cuéntame en los comentarios.