Crear tu primer componente Livewire en Laravel te permite separar la lógica PHP de la vista Blade en una sola unidad reactiva, ideal para construir interfaces dinámicas como un listado de preguntas sin escribir JavaScript. Aquí verás la instalación, la configuración inicial y el diseño con Tailwind para una tabla de hilos.

¿Cómo instalo Livewire en un proyecto Laravel?

La instalación arranca desde la terminal con Composer, el gestor de dependencias de PHP. Ejecuta composer require livewire/livewire indicando proveedor y nombre del paquete.

Después de instalar, debes registrar las directivas de Livewire en tu plantilla principal (la vista app):

• @livewireStyles para cargar los estilos.
• @livewireScripts para cargar los scripts.

Sin estas dos directivas, el sistema reactivo no funciona, así que asegúrate de pegarlas en el layout antes de crear cualquier componente.

¿Qué hace Livewire en Laravel? Es un framework full-stack que conecta tu lógica PHP con tu vista Blade y actualiza la interfaz en tiempo real sin necesidad de escribir JavaScript propio.

¿Cómo creo mi primer componente con Artisan?

Usa el comando php artisan make:livewire ShowThread para generar el componente. Cuando preguntes a Artisan si quieres dar una estrella al repositorio, puedes responder que no.

Cada componente Livewire se crea en dos archivos:

• La clase PHP, que contiene la lógica.
• La vista Blade, que contiene el HTML.

Esta separación es clave: la clase PHP renderiza la vista mediante el método render(), y la vista vive bajo resources/views/livewire. Así mantienes la responsabilidad de cada capa bien definida.

¿Cómo apunto una ruta directamente a un componente Livewire?

Elimina las vistas por defecto que ya no usarás, como welcome y dashboard. Luego, en tu archivo de rutas, en lugar de devolver una vista tradicional, apunta al componente:

php Route::get('/', \App\Http\Livewire\ShowThread::class) ->middleware('auth');

El middleware auth exige que el usuario haya iniciado sesión para visitar esa ruta. Esto se integra de forma natural con el sistema de autenticación que ya provee Laravel.

¿Qué hace el middleware auth en una ruta? Bloquea el acceso a usuarios no autenticados y los redirige al login. Solo quien inicia sesión puede ver la vista protegida.

¿Cómo diseño el layout del componente con Tailwind CSS?

Dentro de la vista del componente eliminas el mensaje motivacional por defecto y construyes el contenedor principal. La idea es tener una columna lateral angosta para categorías y una columna ancha para el contenido.

La estructura usa estas utilidades de Tailwind:

• max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 para una anchura máxima centrada con padding responsive.
• flex gap-10 py-12 para el comportamiento flexible y el espaciado vertical.
• w-64 en la columna lateral y w-full en la columna principal.

Esta combinación crea un layout que respira en pantallas grandes y se adapta en móviles gracias a los breakpoints sm y lg.

¿Cómo construyo el botón Preguntar con gradiente?

El enlace principal de la columna lateral usa un gradiente azul que se invierte al hacer hover. Las clases aplicadas son:

• block w-full py-4 mb-10 para el espaciado y bloque completo.
• bg-gradient-to-r from-blue-600 to-blue-700 para el degradado.
• hover:from-blue-700 hover:to-blue-600 para invertir el efecto.
• text-white/90 font-bold text-sm text-center rounded para el texto y bordes.

Esa inversión del gradiente en hover es un detalle visual que hace el botón más vivo sin recurrir a animaciones complejas.

¿Cómo aplico colores dinámicos a las categorías?

Cada elemento de la lista de categorías combina un span circular con texto. El span lleva clases de tamaño y forma, y el color se inyecta con el atributo style inline porque ese valor vendrá luego desde la base de datos.

Ejemplo del span:

html <span class="w-2 h-2 rounded-full" style="background-color: #00ACED"></span>

La lista completa usa p-2 rounded flex bg-slate-800 items-center gap-2 text-white/60 hover:text-white font-semibold text-xs capitalize mb-2. La clase capitalize es importante porque cuando el contenido se vuelva dinámico, la primera letra de cada categoría se mostrará en mayúscula automáticamente.

¿Por qué usar style inline en lugar de clases de Tailwind para el color? Porque el color proviene de un dato variable de la base de datos. Tailwind compila clases estáticas en build time, así que un valor dinámico necesita CSS inline.

¿Qué quedó listo para la siguiente fase?

Con esto tienes la base funcional: Livewire instalado, un componente ShowThread enlazado a la ruta raíz, protección por autenticación y un layout de dos columnas con Tailwind. La columna izquierda muestra el botón de preguntar y las categorías con indicadores de color, mientras la columna derecha queda preparada para listar todas las preguntas.

El siguiente paso será conectar la lógica PHP del componente con la base de datos para que esas categorías y preguntas dejen de ser estáticas. ¿Ya replicaste el resultado en tu proyecto? Cuéntame en los comentarios qué clases de Tailwind ajustaste a tu gusto.