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

Clase 9 de 21 • Curso de Introducción a Laravel 8

Clase anteriorSiguiente clase

Resumen

¿Cómo crear una estructura eficiente utilizando Laravel y Tailwind CSS?

Crear una estructura de archivo robusta es esencial cuando se trabaja con tecnologías web modernas como Laravel y Tailwind CSS. A medida que te adentres en el mundo del desarrollo web, uno de los primeros pasos es configurar y adaptar correctamente estos sistemas para maximizar tu productividad y la calidad de tus proyectos.

Trabajar con archivos de origen y no con archivos finales es crucial. Esto significa que siempre debes estar atento a cómo se genera y compila tu CSS o JavaScript desde tus archivos fuente, en lugar de modificar directamente los archivos compuestos en la carpeta public.

¿Cómo establecer una plantilla base en Laravel?

Comenzaremos creando un archivo de plantilla utilizando Blade, el motor de plantillas de Laravel. Este sistema te permite ahorrar tiempo y esfuerzo, extendiendo una estructura base a lo largo de tus vistas.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursos de Programación Web</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <main class="py-10 container mx-auto px-4">
        @yield('contenido')
    </main>
</body>
</html>

¿Qué configuraciones son necesarias para el archivo Blade?

  1. Estructura HTML básica: Inicia con <!DOCTYPE html> y define el idioma, que en este caso es español.
  2. Caracteres especiales: Usa UTF-8 para aceptar caracteres como acentos y la 'ñ'.
  3. Vista responsive: Utiliza <meta name="viewport" content="width=device-width, initial-scale=1.0"> para asegurar que tu vista sea adaptable a diferentes tamaños de pantalla.
  4. Conexión con el CSS: Conecta tu plantilla al CSS compilado usando asset('css/app.css').

¿Cómo extender y personalizar una vista en Laravel?

Una vez que tienes tu estructura base, es sencillo extenderla y personalizar las diferentes vistas según necesites, gracias al uso de Blade.

@extends('layouts.web')

@section('contenido')
<div>
    <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>
</div>
@endsection

¿Cómo se utilizan las etiquetas y las clases de CSS?

  1. Etiquetas semánticas: Emplea etiquetas como h1, h2, y h3, que permiten jerarquizar la información.
  2. Clases de Tailwind CSS: Aprovecha clases predefinidas para estilizar de forma rápida y consistente. Ejemplos:
    • text-2xl: Define el tamaño del texto.
    • text-gray-700: Establece el color del texto.
    • mb-2: Aplica margen inferior.
    • uppercase: Convierte el texto en mayúsculas.

¿Cómo garantizo la cohesión en mis proyectos?

El uso adecuado de herramientas como Laravel y Tailwind CSS permite conseguir resultados profesionales escribiendo menos código. La configuración eficiente y el uso sistemático de plantillas te ayudan a mantener el código limpio y organizado. Cada vista podrá realizarse con la extensión de la plantilla base, permitiéndote centrarte en el contenido específico de cada página.

Además, aprovecha las herramientas y cursos disponibles, como los de Platzi, para seguir mejorando tus conocimientos y habilidades en tecnologías web. Esto no solo incrementará tu eficiencia, sino también la calidad y robustez de tus proyectos. Mantente motivado y sigue aprendiendo; el mundo del desarrollo web está lleno de oportunidades para quienes se preparan adecuadamente.