Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Contenido del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

21
Consejos para Dominio de Laravel y Desarrollo Profesional
03:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:16

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Curso de Introducción a Laravel 8

Clase 9 de 21

Clase 9 / 21

Recursos

Construir un proyecto web profesional con Laravel 8 y Tailwind CSS requiere entender cómo se conectan las plantillas, las rutas y los estilos compilados. Aquí se explica paso a paso cómo crear la estructura base de un archivo index anclado a una plantilla Blade, aplicar clases utilitarias de Tailwind y lograr un diseño responsivo con muy poco código.

¿Cómo funciona la compilación de Tailwind CSS en Laravel?

Cuando ejecutamos el comando npm run dev, el sistema toma los archivos fuente y genera un resultado final dentro de la carpeta public. En el archivo package.json se define este comando, que a su vez ejecuta la compilación configurada en webpack [01:00].

El flujo es el siguiente:

Webpack busca los archivos en la carpeta resources (JavaScript y CSS).
Compila todo y lo deposita en public/js y public/css.
El archivo fuente app.css contiene las directivas de Tailwind: base, componentes y utilidades [02:05].

El archivo resultante public/css/app.css es el que se utiliza en las vistas, pero nunca se edita directamente. Siempre se trabaja sobre los archivos fuente en resources.

¿Cómo crear una plantilla Blade con estructura HTML correcta?

La plantilla se llama web.blade.php y contiene la estructura base que compartirán todas las vistas del proyecto. Se comienza con el doctype html y se configura el idioma como español [02:45].

Dentro del <head> se incluyen elementos esenciales:

charset UTF-8: permite utilizar caracteres especiales como acentos y la letra Ñ.
viewport: configura la anchura del dispositivo y el valor inicial para lograr una vista responsiva [03:20].
Título de la página: en este caso, "cursos de programación web".
Conexión con la hoja de estilos: se utiliza la función asset() de Laravel para apuntar directamente a public/css/app.css [04:10].

html

A nivel de <body>, se define una etiqueta <main> como contenedor principal y un <div> donde vivirá el contenido dinámico de cada vista. Las clases de Tailwind aplicadas al contenedor incluyen:

html

<main class="py-10"> <div class="container mx-auto px-4"> @yield('contenido') </div> </main>

py-10: padding en el eje Y.
container mx-auto: centrado horizontal automático.
px-4: padding en el eje X.

¿Cómo extiende el archivo index de la plantilla Blade?

El archivo index.blade.php reduce significativamente la cantidad de código gracias al sistema de herencia de Blade. Se utiliza @extends para indicar de qué plantilla hereda y @section para definir el contenido específico [05:30].

php @extends('layouts.web')

@section('contenido') Mi home @endsection

El sistema de rutas de Laravel abre el archivo index; este extiende de la plantilla web.blade.php, que aporta toda la configuración de HTML, estilos y estructura. Al inspeccionar el código fuente en el navegador, se verifica que el contenido "Mi home" aparece dentro de la estructura completa [06:15].

¿Cómo aplicar clases de Tailwind CSS a los encabezados?

Sin clases de Tailwind, las etiquetas h1, h2 y h3 se muestran con el mismo estilo por defecto. Para diferenciarlas se asignan clases utilitarias que controlan tamaño, color, margen y transformación de texto [07:40].

html

<h1 class="text-2xl text-gray-700 mb-2 uppercase">Últimos cursos</h1> <h2 class="text-xl text-gray-700">Fórmate online como profesional en tecnología</h2> <h3 class="text-lg text-gray-700">70% de los graduados duplica sus ingresos</h3>

text-2xl, text-xl, text-lg: escalas de tamaño decrecientes.
text-gray-700: color gris con intensidad 700.
mb-2: margen inferior.
uppercase: transforma el texto a mayúsculas.

El resultado es un diseño centrado, con jerarquía visual clara y aspecto profesional, logrado sin escribir una sola línea de CSS personalizado [08:30].

¿Por qué usar herramientas profesionales como Laravel y Tailwind?

La combinación de Laravel 8 con Tailwind CSS permite escribir muy poco código y obtener resultados de alta calidad. El sistema de plantillas Blade evita la repetición de HTML, las rutas conectan lógica con vistas de forma limpia y las clases utilitarias de Tailwind resuelven el diseño directamente en el marcado.

Si estás construyendo tu primer proyecto con estas herramientas, experimenta modificando las clases de Tailwind en los encabezados y observa cómo cambia el resultado visual. Comparte en los comentarios qué combinación de clases te funcionó mejor.

Camilo José Mezú Mina

Hace 5 años

Index y Layout: definiendo estructura HTML

Primero que todo nos aseguramos de tener instaldo las dependencia de javascript las cuales son principalmente el css y tailwind.

$ npm install && npm run dev
o con yarn
$ yarn install && yarn dev

dentro de resources/views eliminamos el welcome.blade.php y creamos el index, entramos a la carpeta de layouts y creamos un archivo llamado web.blade.php

Este archivo contiene la configuracion de la plantilla y agregamos el @yield("content") para imprimir ahi el hijo en este caso el index

web.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <main class="py-10">
        <div class="container mx-auto px-4">
            @yield('content')
        </div>
    </main>
</body>
</html>

hacemos referencia de que queremos extender el layout y tambien sobre cual sección

@extends('layouts.web')

@section('content')
<div class="text-center">
    <h1 class="text-3xl text-gray-700 mb-2 uppercase">Últimos Cursos</h2>
    <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnologia</h3>
    <h3 class="text-lg text-gray-600">70% de los graduados duplican sus ingresos</h4>
</div>
@endsection

Dentro del archivo de configuración de rutas routes/web.php direccionamos a el index

Route::view('/', 'index');

asegurate de que diga view y no get

provamos la pagina con php artisan serve

Comentarios (24)24 comentarios

Carlos Eduardo Gomez García

Hace 6 años

Francisco Javier Saavedra Alcala

Andrés Felipe Lopez gomez

Brian Sánchez Izquierdo

Johnatan Steven Barrero Muñetones

Jimmy Buriticá Londoño

Manuel Andrés Buriticá Yepes

Jhon Fabio Cardona Martinez

Guillermo Camacho

juan francisco lencina

Julian David Alzate Cuervo

Claudio José Baldassa

José David Diaz Lora

Hace 4 años

Mauricio Galvez

Juan Diego Garin

Héctor Eduardo Vidal de la Cruz

María Sierra

Corazón De María Jaime Hernández

Hace un año

Pablo Emilio Escobar Ossa

Christian Alvarenga

Orlando Sánchez

Blanca Segura Garcia

Lautaro Pelatti

MindBox .

Brazzini OC

George M

Julian Castiblanco

Eleana Magdalena Hurtado Babilonia

Eduardo Bueno Lopez

Juan Camilo Randazzo

Alexis Montilla

Javier Hernandez

Hace 2 años

Introducción

Curso Renovado de Laravel: Nuevas Herramientas y Conocimientos

Proyectos modernos con Laravel 8 y JetStream

Curso de Laravel 6: Soporte a Largo Plazo y Migración a Nuevas Versiones

Instalación y uso de JetStream en Laravel con Blade y TailwindCSS

Proyecto con Laravel 8

Creación de Proyecto Web con Laravel 8 y Tailwind CSS

Instalación y Configuración de Laravel 8 con Tailwind CSS

Creación de Datos Semilla en Laravel con Faker

Configuración de Rutas y Vistas en Laravel con JetStream

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Configuración de Plantillas Blade en Visual Studio Code

Creación de Componentes Dinámicos con Livewire en Laravel

Creación de Campos Virtuales en Componentes con Tailwind CSS

Creación de Controladores y Rutas en Laravel 8

Rutas dinámicas y maquetación de cursos en PHP con Laravel

Configuración de Listado de Lecciones en Visual Studio

Configuración de Cursos Similares en Visual Studio

Creación y Uso de Componentes Blade en Laravel

Personalización de Elementos en JetStream con Visual Studio

Conclusión

Personalización de Vistas en Laravel con JetStream y Livewire

Desarrollo de Aplicaciones con Laravel 8 y JetStream

Bonus

Consejos para Dominio de Laravel y Desarrollo Profesional

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Progreso del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

Recursos

Recursos