Diseño Web con Tailwind CSS y Laravel: Instalación y Configuración

Clase 5 de 18 • Curso de API REST con Laravel

Resumen

¿Cómo utilizar Tailwind CSS para mejorar el diseño de tu proyecto web?

Tailwind CSS es un framework de utilidades que permite diseñar rápidamente páginas web con estilos predefinidos. Este enfoque permite tener un control total sobre la apariencia sin escribir CSS personalizado. En este contenido, exploraremos cómo configurar Tailwind CSS en tu proyecto y aplicar estilos para mejorar su diseño.

¿Cómo se instala Tailwind CSS?

Hay varias formas de instalar Tailwind CSS dependiendo de tu entorno. Puedes optar por usar NPM o un CDN. Estos son los pasos básicos para cada método:

Con NPM:
1. Instala Tailwind CSS usando NPM.
2. Configura el CSS en tu archivo webpack.mix.js.
3. Ejecuta comandos como npm install y npm run dev.
4. Si aparece algún error, consulta la documentación oficial para las soluciones.
Con CDN:
1. Copia el enlace del CDN de Tailwind CSS.
2. Péguelo en el archivo index.html de su proyecto.

¿Cómo configurar las clases de Tailwind CSS?

Una vez instalado, puedes utilizar clases predefinidas de Tailwind CSS para aplicar estilos. Aquí te mostramos ejemplos de configuración para un diseño básico:

<div class="container mx-auto px-4">
  <div class="grid grid-cols-3 gap-y-10">
    <div class="bg-white hover:bg-blue-100 border border-gray-200 p-5">
      <!-- Contenido aquí -->
    </div>
  </div>
</div>

Contenedor: Se utiliza para centrar el contenido y añadir márgenes automáticos.
Cuadrícula: Define un grid con tres columnas y un margen vertical.
Estilos del elemento: Aplica un fondo blanco, borde gris, y efecto hover que cambia el fondo a azul claro.

¿Cómo personalizar textos y extractos?

Puedes personalizar el texto y sus estilos detallados de la siguiente manera:

<h2 class="font-bold text-lg mb-4">Título de ejemplo</h2>
<p class="text-sm">Este es un extracto del contenido.</p>
<span class="text-right">Fecha de publicación: DD/MM/AAAA</span>

Título: Utiliza font-bold para hacerlo en negrita y text-lg para el tamaño.
Texto del extracto: Simple y pequeño, utilizando text-sm.
Fecha: Alineada a la derecha con text-right.

¿Cómo administrar los datos con Laravel?

Para integrar los datos gestionados con Laravel, es esencial trabajar con modelos. Aquí un ejemplo simplificado de cómo hacerlo:

// Modelo Post
class Post extends Model {
  public function getExtractoAttribute() {
    return Str::limit($this->contenido, 120);
  }

  public function getPublicadoAttribute() {
    return $this->created_at->format('d/m/Y');
  }
}

Campo Extracto: Devuelve los primeros 120 caracteres del contenido.
Fecha de Publicación: Muestra la fecha en formato entendible (día, mes, año).

¿Cómo mejorar la apariencia del sitio web?

La clave para un diseño web elegante está en los pequeños detalles, como márgenes y espacios. Crear divisores visuales ayuda a organizar el contenido:

<div class="mb-10">
  <a href="#" class="hover:underline">Enlace de ejemplo</a>
</div>

Elemento con márgenes: Utiliza mb-10 para añadir espacio inferior.
Enlace: Añade un efecto hover para subrayarlo, mejorando la interacción del usuario.

Motivación final

Dominar Tailwind CSS te permitirá llevar tus habilidades de diseño al siguiente nivel. Sigue practicando y explorando las diversas utilidades que ofrece este poderoso framework y verás cómo tu capacidad para crear diseños visualmente atractivos mejora con cada proyecto. ¡Continúa aprendiendo y superándote en el apasionante mundo del desarrollo web!

Carlos Eduardo Gomez García

teacher•

Recuerden que también podemos hacer un formato para las fechas donde se muestre hace cuánto fue publicado: . "Hace 32 minutos" . Eso lo podemos lograr poniendo en nuestro Accesor esto: .

return $this->created_at->diffForHumans();

Recuerden que un Accesor son esas funciones que definimos como getCualquierCosaAttribute :D

Luis Alberto Perez Rivas

student•

Bastante util, y si queremos ponerlo en idioma español hay que modificar el archivo de configuración config/app.php cambiando 'locale' => 'en' a 'es'

Mariano Gastón Paduani

student•

Muy buen aporte!

Alex Maldonado

student•

Les dejo el link directo a la documentación de Tailwind:

https://tailwindcss.com/docs/installation

Código de index.blade.php

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <body class="bg-gray-100 text-grey-700">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-3 my-10">
                @foreach ($posts as $post)
                    <div class="bg-white hover:bg-blue-100 border border-gray-200 p-5">
                        <h2 class="font-bold text-lg mb-4">{{$post->title}}</h3>
                        <p class="text-xs">{{$post->excerpt}}</p>
                        <p class="text-xs text-right">{{$post->published_at}}</p>
                    </div>
                @endforeach
            </div>
            <div class="mb-10">
                {{$posts->links()}}
            </div>
        </div>
    </body>

Model Post.php

    public function getExcerptAttribute()
    {
        return substr($this->content, 0, 120);
    }

    public function getPublishedAtAttribute()
    {
        return $this->created_at->format('d/m/Y');
    }

Jimmy Buriticá Londoño

student•

Gracias

Mariano Gastón Paduani

student•

Muchas gracias!

Ignacio Ramos

student•

el profe explica muy bien!!!

Jimmy Buriticá Londoño

student•

Tienes razón, todo se ve tan fácil. 🚀

Andrés Felipe Lopez gomez

student•

Es cierto

Manuel Entrena Jimenez

student•

¿Alguien tenia problemas con los estilos de la paginación?

Laravel por default utiliza el framework CSS de Bootstrap para la paginación. Entonces tenemos que pedirle que genere un archivo blade donde el mismo podrá realizar los cambios

php artisan vendor:publish --tag=laravel-pagination

Laravel generará una nueva carpeta de archivos blade dentro de la carpeta /resources/views/vendor/pagination el cual contendrá varios archivos CSS de diversos Frameworks. Nuestro caso es el archivo "tailwind.blade.php"

Ahora tenemos que decirle que use esta plantilla de estillos para la paginación en "Providers\AppServiceProvider.php". En la función boot, arrancamos este estilo. Es parte del ciclo de vida de Laravel.

public function boot() {
	Paginator::defaultView('vendor.pagination.tailwind');
}

No olviden importar la clase Paginator

use Illuminate\Pagination\Paginator;

Saludos!

Manuel Alejandro Jiménez Vivas

student•

Hola amigo... lo hice tal cual pero aún no funciona la paginación, sabe de alguna otra forma?

Fabricio Bencomo

student•

Gracias me funciono

Frank Atencio

student•

Guía de instalación en laravel

https://tailwindcss.com/docs/guides/laravel

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

student•

Mejorando el aspecto del sitio con Tailwind CSS

https://tailwindcss.com/docs/installation

vamos a la consola y ponemos lo siguiente:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

después vamos a resources > css > app.css escribimos lo siguiente:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

después en el archivo de webpack.mix.js escribimos lo siguiente: //require('tailwindcss'); va a quedar así:

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //require('tailwindcss');
    ]);

en el index.blade.php ponemos lo siguiente:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

queda de la siguiente manera el body del index.blade.php:

<body class="bg-gray-100 text-grey-700">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-3 my-10">
                @foreach ($posts as $post)
                    <div class="bg-white hover:bg-blue-100 border border-gray-200 p-5">
                        <h2 class="font-bold text-lg mb-4">{{$post->title}}</h3>
                        <p class="text-xs">{{$post->excerpt}}</p>
                        <p class="text-xs text-right">{{$post->published_at}}</p>
                    </div>
                @endforeach
            </div>
            <div class="mb-10">
                {{$posts->links()}}
            </div>
        </div>
    </body>

vamos a la carpeta Http > models > Post.php escribimos lo siguiente:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    public function getExcerptAttribute() 
    {
        return substr($this->content, 0, 120);
    }

    public function getPublishedAtAttribute()
    {
        return $this->created_at->format('d/m/Y');
    }
}

Hector Vasquez

student•

El profesor olvidó explicar que en realidad hay 2 maneras de implementar tailwind en el sistema:

1- Usando npm para instalarlo e incluirlo en nuestro archivo app.css 2- En vez de lo anterior, usar el archivo css, incluyendo el link cdn en la cabecera

Puedes elegir la opción 1 o la 2. No es necesario hacer las 2.

En este caso, el profesor explicó la opción 1, pero no la implementó. Usó la opción 2

Santos Paulino Vasquez Martinez

student•

Directamente al "grano". Muy claro todo. Gracias!

Mariano Gastón Paduani

student•

Excelente profesor

Pablo Joaquín Cruz

student•

¡No me funcionan los estilos de la paginación!

Me pasó que los estilos del paginador no funcionaban y me fijé en un proyecto de otro curso anterior para ver cómo se hacía (es del Curso de Introducción a Laravel 9). Tienen que agregar una línea al tailwind.config.js en el arreglo de content:

'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',

Quedaría como:

module.exports = {
  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    "./resources/**/*.blade.php", //Línea agregada
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Javier Marin Ayza

student•

A mi los estilos de los botones de paginación tampoco me salían, había unas flechas enormes y los botones no tenían formato. Hice el proyecto con laravel 10 y seguí los pasos de la página de tailwindcss que pone para laravel con vite. Al final probe de poner el cdn como en el video y se arreglo pero vamos no entiendo el porque.

Máximo Calderon

student•

Muchas gracias compañero... A mi me funcionó.....

Sergio Negrete Villegas

student•

Máximo respect al teacher !!!

Rubén Santibañez Acosta

student•

Pero esto no es un APi REST? que pinta tailwind CSS aquí?

Javier Marin Ayza

student•

Entiendo que primero nos explica como montarlo en web y después creamos el api... y bueno también supongo será para no meterse en frontends o el uso de postman... una forma diferente

José James Marín Duque

student•

los que tengan problemas con la version es debido a que tienen una anterior o mas reciente en mi caso la 10.13.5 . deben ingresar a la pagina de tailwindcss y validar la configuraion del framework.

https://tailwindcss.com/docs/guides/laravel

Bulmaro Arellano Navarrete

student•

Hola,

Si al igual que yo estas tomando este curso con Laravel 9 y tu aplicación no utiliza webpack si no vite entonces el proceso para instalar Tailwindcss cambia un poco, solo hay que seguir estas instrucciones -> Tailwindcss - Laravel

Angel Luis Landa Aguirre

student•

Para el extracto podemos usar uno de los helpers de Laravel.

use Illuminate\Support\Str;

...

public function getExcerptAttribute() {
	return Str::limit($this->content, 120, '...');
}

Pablo Emilio Escobar Ossa

student•

Pueden indicar en el index() del controlador desde cuantos registros quiero que haga el paginado Laravel.

public function index()
    {
        return view('index', [
            'posts' => Post::latest()->paginate(9)
        ]);
    }

. Dejo la documentación oficial de los Query Builder en Laravel.

Clara Savelli Betancourt

student•

Laravel en su version 10 no usa mix, sino vite https://tailwindcss.com/docs/guides/laravel

Francisco Javier Saavedra Alcala

student•

Si ya siguieron los pasos de instalación y aún no funciona verifiquen 2 cosas importantes:

QUE ESTE INCLUIDO LA HOJA DE ESTILOS EN LA VISTA

Julian David Alzate Cuervo

student•

Qué desventajas tiene el instalar tailwind directamente en el cdn en el index de la página?

Italo Morales Fantone

teacher•

Generalmente usamos un acceso CDN para probar un recurso (es acceso a todo), cuando lo instalamos tenemos la oportunidad de usar una parte, personalizarlo y optimizar.

Angel Javier Sanchez Tenjo

student•

Utilizar Tailwind CSS directamente desde el CDN es una forma rápida y sencilla de incorporar el framework en tu proyecto, pero tiene ciertas desventajas importantes que debes considerar, especialmente para proyectos más grandes o en producción. A continuación, se detallan las desventajas principales:

Dependencia de conexión a Internet Si el navegador del usuario pierde conexión a Internet o el CDN tiene problemas de disponibilidad, el CSS no se cargará, lo que dejará tu página sin estilos.

Esto puede ser crítico en aplicaciones que requieren alta disponibilidad o que se usan en entornos con conexiones inestables.

Mayor tiempo de carga inicial: Aunque el CDN puede ser rápido, cargar un archivo grande ralentiza el tiempo de renderizado inicial de tu página.

Configuración de Tailwind: Al usar el CDN, no puedes personalizar fácilmente Tailwind CSS (colores, espaciados, fuentes, etc.) a través del archivo de configuración tailwind.config.js.

PurgeCSS no disponible: PurgeCSS es una herramienta que elimina las clases CSS no utilizadas para reducir significativamente el tamaño del archivo CSS en producción.

lucas cartisano

student•

¿En que momento y como se transforma getPublishedAtAttribute() en ->published_at ?

Me gustaría entender donde ocurre esa magia en lugar de memorizarla

Carlos Fernandes

student•

Hola Lucas, es una convención que maneja Laravel, el framework cuando intentas llamar a una propiedad de un modelo busca un método que contenta algo parecido a esto:

**get**TuAttributo**Attribute**

Entonces al llamar a $modelo->tu_attributo sera reemplazado por lo que retorne ese método.

Esto en Laravel es un Accessor y en la versión actual (9.x) se hace de una forma mas limpia:

https://laravel.com/docs/9.x/eloquent-mutators#defining-an-accessor

Javier Marin Ayza

student•

Creo que accesor es diferente a lo que nos pone aquí, en el video con getPropiedadAttribute se crea una nueva propiedad en estos casos es una modificación sobre una propiedad ya existente pero perfectamente podría ser otra cosa.

Los accesores en cambio es una forma de tratar una propiedad ya creada es decir por ejemplo si queremos que al llamar a la propiedad title siempre este la primera letra en mayúscula pues crearíamos un accesor que se ejecutaría al llamar a la propiedad que ya existe en el modelo.

Para mi son cosas diferentes uno modifica una propiedad existente el otro crea una nueva propiedad.

Camilo Venegas

student•

Heiner Ríos Rodríguez

student•

Para que la instalación de Tailwind funcione (y no tener que usar el CDN), sigue la guía https://laravel.com/docs/8.x/mix#tailwindcss y después desde una consola en la raíz del proyecto ejecuta los siguientes comandos

npm install
npm run dev
```así se genera un archivo `css` en la carpeta public que usas en la cabecera de tus archivos `blade.php` y listo! XD