Diseño del header con Tailwind y Laravel

Contenido del curso

No sé dónde empezar

Introducción a Laravel

Fundamentos de Laravel

Manos a la obra con nuestro proyecto

Trabajemos en el diseño web de nuestro proyecto

Cierre

31
Qué es un framework y cómo lo usa Laravel
05:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:38

Diseño del header con Tailwind y Laravel

Curso de Introducción a Laravel 9

Clase 24 de 31

Clase 24 / 31

Recursos

Diseñar el área pública de un proyecto en Laravel implica algo más que escribir HTML: requiere conectar correctamente las hojas de estilo, organizar las imágenes en la carpeta correcta y entender cómo Tailwind CSS compila las clases que realmente usas. Si estás aprendiendo a integrar Tailwind con Blade, aquí verás el flujo completo para montar un encabezado funcional con logo, formulario de búsqueda y estilos aplicados.

¿Dónde se guardan las imágenes en un proyecto Laravel?

La carpeta public es el punto de partida para servir recursos estáticos. Dentro de ella conviene crear una subcarpeta dedicada a las imágenes del proyecto.

En la práctica, descargas las imágenes que vas a usar (por ejemplo, un logo y una ilustración relacionada con desarrollo) y las renombras de forma clara: logo y dev. Guardarlas con nombres descriptivos te ahorra confusiones cuando el proyecto crezca [00:30].

¿Dónde debo poner las imágenes en Laravel? Dentro de la carpeta public, en una subcarpeta como images. Desde ahí Laravel las sirve directamente sin pasar por el sistema de rutas.

¿Cómo enlazar el archivo CSS de Tailwind en Blade?

Para que los estilos se apliquen, necesitas importar el archivo CSS dentro de la plantilla Blade usando la función asset() con la ruta correspondiente.

La sintaxis es directa: dentro de las llaves dobles de Blade, llamas a asset('css/app.css'). Al actualizar el navegador, el enlace queda configurado y Tailwind empieza a responder. Este paso es la base para que cualquier clase utilitaria funcione [01:25].

Estructura del contenedor principal

El encabezado parte de un div contenedor con clases para centrar el contenido y aplicar relleno lateral. Dentro de él se construye la jerarquía completa del header.

Un enlace que envuelve la imagen del logo, renderizada con asset('images/logo.png').
Un formulario con un input que incluye un placeholder con el texto Buscar.
Un bloque adicional para la función de navegación o acciones del usuario.

Esta organización separa claramente la marca, la búsqueda y las acciones, que es el patrón clásico de cualquier header moderno.

¿Qué clases de Tailwind necesito para un header flexible?

Las clases utilitarias de Tailwind permiten describir el comportamiento visual sin escribir CSS personalizado. Para el encabezado se aplican estas combinaciones:

flex para convertir el header en contenedor flexible.
justify-between para separar elementos a los extremos.
items-center para alinear verticalmente al centro.
py-4 para añadir relleno superior e inferior de nivel cuatro.

El div interno que agrupa logo y formulario también usa flex e items-center, pero suma flex-grow para que crezca respecto a su hermano y gap-4 para dejar un espacio limpio entre el logo y el campo de búsqueda [03:15].

¿Para qué sirve flex-grow en Tailwind? Hace que un elemento ocupe el espacio disponible dentro de un contenedor flex, empujando a sus hermanos hacia los bordes según la configuración de justificación.

¿Por qué algunas clases de Tailwind no se aplican?

Aquí viene lo interesante. Si actualizas el navegador y notas que clases como h-12 no existen en el CSS final, no es un error tuyo: es el comportamiento esperado de Tailwind.

Tailwind compila únicamente las clases que detecta en tus vistas, según la configuración del archivo tailwind.config.js. Esto mantiene el CSS final ligero, pero significa que cada vez que agregas clases nuevas debes recompilar.

El comando que dispara esa compilación es npm run dev. Al ejecutarlo, Tailwind escanea las plantillas, detecta las clases recién añadidas y regenera el archivo app.css. Después de eso, al refrescar el navegador, las clases ya existen y los estilos se aplican correctamente [04:40].

Flujo recomendado al añadir clases nuevas

Escribe las clases en tu plantilla Blade.
Ejecuta npm run dev para recompilar el CSS.
Actualiza el navegador para verificar que los estilos se aplicaron.

Este ciclo de tres pasos se vuelve automático cuando trabajas con Tailwind a diario, y entenderlo evita horas de depuración buscando errores que en realidad son recompilaciones pendientes.

¿Qué viene después del encabezado?

Con el header funcionando, el contenedor centrado y las imágenes cargando desde public/images, ya tienes la base del área pública. El siguiente paso natural es agregar elementos visuales personalizados, como una línea con degradado que separe el encabezado del resto del contenido.

¿Has tenido problemas con clases de Tailwind que no aparecen en tu CSS final? Cuéntame cómo lo resolviste en los comentarios.

Fernando Torres

Hace 4 años

En la nueva versión de Laravel ya no están los archivos y configuración exactamente como se muestra en esta clase. Leí la documentación de Laravel aquí y esto fue lo que me funcionó:

Cambios en resources/js/app.js:

import './bootstrap';
import '../css/app.css';

import Alpine from 'alpinejs';


window.Alpine = Alpine;

Alpine.start();

Cambios en sección head en template.blade.php:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Proyecto Web</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Finalmente, en terminal ejecuté:

npm run dev

Funciona, se corrigen los estilos, pero se queda ejecutando en terminal. Así que cancelé ese proceso y mejor intenté con:

npm run build

Aquí está la imagen:

Y entonces no se bloquea mi terminal y la página ya se observa igual que la del profesor. El resto, lo hice exactamente como indicó el profesor; por supuesto, debes tener la carpeta y las imágenes correctamente en su directorio public.

¿Te funcionó? ¿Me faltó algo? Comenta aquí para ayudar al resto de compañeros.

Wilfredo Alexander Herrera Torres

Hace 4 años

gracias por tu aporte hermano

Horacio Javier Tena Medrano

Hace 4 años

...npm run build arruinó mí proyecto, aún me encuentro buscando como arreglarlo

Comentarios (25)25 comentarios

Har ㅤㅤ

Efrain Alejandro Cabrera Dura

Alejandro Navarro

Camilo Gonzalez

Andrés Felipe Lopez gomez

Alexander Josue

Miguel Angel Ramos Lopez

Hace 3 años

Juvenal CH

Juan David Rueda Quiroga

Camilo Orozco

Christian Alvarenga

Fabiola Jessica Huancollo Chambi

Pedro Luis Méndez Yépez

VICTOR CAUDILLO

Sergio Lira Camacho

José Antonio Astorga y Ortega

Walter Omar Barrios Vazquez

Sergio Morgan

Víctor Hugo Rivas Sánchez

Hace 2 años

Henry Alejandro Taby Zenteno

Diego Iván Cundapí León

Romulo Felizola

Introducción a Laravel

Configura tu entorno para Laravel 9

Estrutura de pastas do Laravel explicada

Fundamentos de Laravel

Qué es Artisan y cómo automatiza Laravel

Rutas básicas en Laravel con web.php

Cómo retornar vistas Blade en Laravel

Plantillas Blade para vistas sin código repetido

Controladores en Laravel con Artisan

Migraciones en Laravel como control de versiones

Modelos y factories en Laravel con datos falsos

Consultas a base de datos con Eloquent

Relaciones entre tablas con belongsTo en Laravel

Manos a la obra con nuestro proyecto

Revisión de arquitectura MVC en Laravel

Instala el login de Laravel con Breeze

Rutas de login y logout en Laravel Breeze

Rutas y vistas con Route::resource en Laravel

Listado de posts con paginación en Laravel

Formulario para eliminar registros en Laravel

Vistas de creación y edición con formulario compartido

Formulario CRUD reutilizable en Laravel

Guardar registros con relaciones en Laravel

Método update en Laravel sin reescribir código

Validación de formularios en Laravel con old()

Validación unique en Laravel sin duplicados

Trabajemos en el diseño web de nuestro proyecto

Diseño del header con Tailwind y Laravel

Divisor con gradiente en Tailwind CSS

Construye la vista home de tu blog en Laravel

Sección destacada con posicionamiento absoluto en Tailwind

Diseño de página de publicación con Tailwind

Formulario de búsqueda con Laravel y LIKE

Cómo detectar el problema N+1 en Laravel

Cierre

Qué es un framework y cómo lo usa Laravel

Diseño del header con Tailwind y Laravel