Diseño home en Laravel con Tailwind CSS

Contenido del curso

Configuración

Diseño de un foro

Livewire

Optimización

CRUD

Detalles finales

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:48

Diseño home en Laravel con Tailwind CSS

Curso de Laravel

Clase 6 de 25

Clase 6 / 25

Comentarios (10)10 comentarios

Diego Contreras Martínez

Hace un año

Juan Francisco Maldonado De Régules

Hace un año

Si de repente tu Tailwind no está funcionando como debiera, revisa resources\css\app.css, y agrega la ruta para que considere correctamente los archivos dentro de views:

Luego en tu terminal dale npm run build

Hector Emanuel Barboza

Hace un año

Mil gracias por este ultimo comentario me termino funcionando

Aldo Jesús Martínez Larios

Hace 10 meses

Thanks buddy !!!

Jotam Samuel Torres

Hace 7 meses

Se esta cargando el .css pero los estilos no los muestra bien, que puede ser ?

Jotam Samuel Torres

Hace 7 meses

En windows no permite ejecutar el comando, es necesario cambiar la politica, con esto se soluciono:

Alexis Jahaziel Rodriguez Martinez

Hace 5 meses

A mí me pasó algo similar porque Laravel estaba usando un CSS compilado viejo de Vite. Lo arreglé con php artisan optimize:clear y npm run build. Si estás desarrollando, deja npm run dev corriendo y recarga con Ctrl + F5.

Juan Francisco Maldonado De Régules

Hace un año

Lazy people use generators without checking before committing!!!

Byte -> Vite !!!

Cristian Eduardo Hernández Solis

Hace un año

Siempre usé Bootstrap por su rapidez, pero me sentía limitado. El probar Tailwind CSS en este curso fue ¡genial! 🚀 Su enfoque "utility-first" es un cambio de paradigma. Ya no se pierde tiempo sobrescribiendo estilos.

Es más flexible y, una vez que te acostumbras, es mucho más rápido para proyectos personalizados. Lo recomiendo bastante.

Katherine Yager

Hace un año

Le modifique un poco el tema de la sección de las preguntas y usuario quien realizo la pregunta

Hector Emanuel Barboza

Hace un año

En mi caso con app.css tengo solo esto:

Hector Emanuel Barboza

Hace un año

Me termino funcionando, al fin:

Brayan Sebastian Correa Juyar

Hace un año

Marcos Sarmiento Loarte

Hace un año

Recursos

Diseñar una página home profesional en Laravel se vuelve mucho más sencillo cuando combinas componentes Blade reutilizables con plantillas de Tailwind CSS. Aquí aprendes a montar una vista de inicio dinámica, conectar datos reales de preguntas y entender cómo Vite acelera todo el flujo. Ideal si ya manejas lo básico de Laravel y quieres dar el salto al diseño profesional.

¿Cómo integrar plantillas Tailwind CSS en una vista Laravel?

La idea es no reinventar la rueda. Existen repositorios con plantillas inspiradas en Tailwind CSS, algunas gratuitas y otras de pago, que puedes adaptar a tu proyecto [01:00].

El flujo es directo: copias la estructura HTML de la plantilla, la pegas en tu vista home y la envuelves dentro de un @foreach para recorrer los datos dinámicos, en este caso las preguntas del foro. Cierras el foreach justo debajo del bloque que se va a repetir.

¿Qué es una plantilla Tailwind CSS? Es un diseño prearmado con clases utilitarias de Tailwind que puedes copiar y pegar en tu proyecto. Te ahorra escribir CSS desde cero y mantiene un look profesional.

Al pegar la plantilla sin más, la página se ve sin estilos. Eso es normal: falta registrar el componente Blade que carga Tailwind y la estructura visual completa.

¿Cómo crear un componente Blade reutilizable en Laravel?

Laravel ya trae componentes preconfigurados, pero crear los tuyos te ayuda a entender el sistema desde adentro [02:30]. Para registrarlo en la vista usas una etiqueta tipo:

blade <x-forum.plantillas.home> {{ $slot }} </x-forum.plantillas.home>

Luego lo generas desde la terminal con Artisan:

bash php artisan make:component Forum/Plantillas/Home --view

La bandera --view indica que solo necesitas el archivo de vista, sin clase asociada. Esto mantiene el componente liviano cuando no requiere lógica adicional.

¿Para qué sirve la variable $slot?

Cuando creas un componente vacío, no muestra nada. La variable $slot es el espacio donde se inyecta todo el contenido que envuelves entre las etiquetas del componente [03:45]. Donde colocas {{ $slot }} dentro de la plantilla, ahí aparecerá tu vista home con el listado de preguntas.

¿Qué es $slot en Blade? Es una variable especial de los componentes Blade que recibe el contenido HTML que pasas entre las etiquetas de apertura y cierre del componente. Funciona como un punto de inserción.

¿Cómo mostrar datos dinámicos dentro del componente Blade?

La plantilla incluye una barra de navegación, un encabezado con pregunta y párrafo, un botón de preguntar y una zona para el listado. Ahí es donde entra el contenido dinámico de cada pregunta [05:00].

Los campos que se renderizan en cada tarjeta son:

Título de la pregunta, mostrado como encabezado principal.
Username del autor, accediendo al usuario relacionado.
Nombre de la categoría, con pregunta->category->name.
Fecha de creación en formato legible para humanos, usando un método que Laravel provee sobre created_at.
Color de la categoría, reemplazando name por color para personalizar el estilo visual.

Eloquent permite encadenar relaciones de forma natural, así que acceder a category->color o user->username funciona sin queries extra cuando las relaciones están bien definidas en los modelos.

¿Cómo entender las clases utilitarias de Tailwind CSS?

La mejor forma de aprender Tailwind es inspeccionar y experimentar. Click derecho, Inspeccionar elemento y ve eliminando clases para ver qué cambia [07:15].

Por ejemplo, al quitar la clase de líneas divisorias, los separadores entre preguntas desaparecen. Si eliminas flex, la disposición horizontal se rompe. Hay un div específico que aporta el diseño base completo: si lo borras, la página queda en blanco.

Este tipo de prueba y error te enseña cómo está construida la jerarquía visual sin tener que memorizar cada clase.

¿Cómo trabaja Vite con Laravel para compilar Tailwind?

Laravel ya integra Vite como herramienta de build moderna, y eso explica por qué los cambios se reflejan en tiempo real [08:30].

El recorrido es así:

Composer instala las dependencias del proyecto.
Al ejecutar el comando de desarrollo, se dispara npm run dev.
En el archivo package.json, el script dev está mapeado a vite.
Vite toma la configuración principal desde app.css, donde están las directivas de Tailwind.
También procesa JavaScript si lo usas, aunque en este caso no se aprovecha ese archivo.

¿Por qué Laravel usa Vite en lugar de Webpack? Vite compila más rápido, recarga los cambios en caliente y simplifica la configuración. Laravel lo adoptó como reemplazo de Mix para mejorar la experiencia de desarrollo.

El resultado final es una página home renderizada desde una vista pequeña, envuelta en un componente Blade llamado home, que carga el diseño completo de Tailwind. Así se logra diseño reutilizable y profesional sin duplicar código en cada pantalla.

Ahora te toca a ti: personaliza colores, tipografías o la estructura de las tarjetas de pregunta y deja un screenshot de tu versión en los comentarios.

Resumen

¿Cómo integrar plantillas Tailwind CSS en una vista Laravel?

La idea es no reinventar la rueda. Existen repositorios con plantillas inspiradas en Tailwind CSS, algunas gratuitas y otras de pago, que puedes adaptar a tu proyecto [01:00].

¿Qué es una plantilla Tailwind CSS? Es un diseño prearmado con clases utilitarias de Tailwind que puedes copiar y pegar en tu proyecto. Te ahorra escribir CSS desde cero y mantiene un look profesional.

Al pegar la plantilla sin más, la página se ve sin estilos. Eso es normal: falta registrar el componente Blade que carga Tailwind y la estructura visual completa.

¿Cómo crear un componente Blade reutilizable en Laravel?

Laravel ya trae componentes preconfigurados, pero crear los tuyos te ayuda a entender el sistema desde adentro [02:30]. Para registrarlo en la vista usas una etiqueta tipo:

blade <x-forum.plantillas.home> {{ $slot }} </x-forum.plantillas.home>

Luego lo generas desde la terminal con Artisan:

bash php artisan make:component Forum/Plantillas/Home --view

La bandera --view indica que solo necesitas el archivo de vista, sin clase asociada. Esto mantiene el componente liviano cuando no requiere lógica adicional.

¿Para qué sirve la variable $slot?

¿Qué es $slot en Blade? Es una variable especial de los componentes Blade que recibe el contenido HTML que pasas entre las etiquetas de apertura y cierre del componente. Funciona como un punto de inserción.

¿Cómo mostrar datos dinámicos dentro del componente Blade?

Los campos que se renderizan en cada tarjeta son:

Título de la pregunta, mostrado como encabezado principal.
Username del autor, accediendo al usuario relacionado.
Nombre de la categoría, con pregunta->category->name.
Fecha de creación en formato legible para humanos, usando un método que Laravel provee sobre created_at.
Color de la categoría, reemplazando name por color para personalizar el estilo visual.

Eloquent permite encadenar relaciones de forma natural, así que acceder a category->color o user->username funciona sin queries extra cuando las relaciones están bien definidas en los modelos.

¿Cómo entender las clases utilitarias de Tailwind CSS?

La mejor forma de aprender Tailwind es inspeccionar y experimentar. Click derecho, Inspeccionar elemento y ve eliminando clases para ver qué cambia [07:15].

Este tipo de prueba y error te enseña cómo está construida la jerarquía visual sin tener que memorizar cada clase.

¿Cómo trabaja Vite con Laravel para compilar Tailwind?

Laravel ya integra Vite como herramienta de build moderna, y eso explica por qué los cambios se reflejan en tiempo real [08:30].

El recorrido es así:

Composer instala las dependencias del proyecto.
Al ejecutar el comando de desarrollo, se dispara npm run dev.
En el archivo package.json, el script dev está mapeado a vite.
Vite toma la configuración principal desde app.css, donde están las directivas de Tailwind.
También procesa JavaScript si lo usas, aunque en este caso no se aprovecha ese archivo.

¿Por qué Laravel usa Vite en lugar de Webpack? Vite compila más rápido, recarga los cambios en caliente y simplifica la configuración. Laravel lo adoptó como reemplazo de Mix para mejorar la experiencia de desarrollo.

Ahora te toca a ti: personaliza colores, tipografías o la estructura de las tarjetas de pregunta y deja un screenshot de tu versión en los comentarios.

Configuración

Desarrollo de foro interactivo con Laravel y LiveWire

Instalación de Laravel con kit de inicio LiveWire

Creación de modelos, migraciones y factories en Laravel

Creación de datos falsos para pruebas con factories y seeders

Diseño de un foro

Flujo completo de Laravel: ruta, controlador, modelo y vista

Diseño home en Laravel con Tailwind CSS

Desarrollo de página de detalles con rutas dinámicas en Laravel

Creación de componentes Blade para plantillas reutilizables en Laravel

Pregunta con respuestas dinámicas en Laravel

Relaciones polimorfas para comentarios en Laravel

Livewire

Primer componente Livewire con comentarios

Guardar comentarios en tiempo real con Livewire

Formulario para responder preguntas en Laravel

Botón de corazón reactivo con Livewire

Optimización

Refactorización de componentes Livewire y optimización con Traits

Eliminar preguntas y datos huérfanos en Laravel

Eliminación en cascada desde el modelo Laravel

Cómo eliminar el problema N+1 en Laravel

CRUD

Cómo crear el index del foro en Laravel

Crear preguntas en un foro con Laravel

Formulario de edición con rutas edit y update

Detalles finales

Control de acceso con middleware en Laravel

Políticas de acceso en Laravel con Blade

Separación de responsabilidades en controladores Laravel

URLs limpias con slugs en Laravel

Diseño home en Laravel con Tailwind CSS