¿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:
webpack.mix.js.npm install y npm run dev.Con CDN:
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>
¿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>
font-bold para hacerlo en negrita y text-lg para el tamaño.text-sm.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'); } }
¿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>
mb-10 para añadir espacio inferior.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!
Clase 5 / 18
Clase 5 / 18
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.
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:
webpack.mix.js.npm install y npm run dev.Con CDN:
index.html de su proyecto.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>
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>
font-bold para hacerlo en negrita y text-lg para el tamaño.text-sm.text-right.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');
}
}
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>
mb-10 para añadir espacio inferior.hover para subrayarlo, mejorando la interacción del usuario.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!
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
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');
}
el profe explica muy bien!!!
¿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!
Guía de instalación en laravel
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');
}
}
Directamente al "grano". Muy claro todo. Gracias!
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: [],
}
Máximo respect al teacher !!!
Pero esto no es un APi REST? que pinta tailwind CSS aquí?