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
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
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.
