Mejorando el aspecto del sitio con Tailwind CSS

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 😄

Ignacio Ramos

el profe explica muy bien!!!

Alex Maldonado

https://tailwindcss.com/docs/installation

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

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}}</h2>
                        <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');
    }

Manuel Entrena Jimenez

¿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!

Frank Atencio

Guía de instalación en laravel

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

https://tailwindcss.com/docs/installation

Mejorando el aspecto del sitio con Tailwind CSS

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}}</h2>
                        <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');
    }
}

Santos Paulino Vasquez Martinez

Directamente al “grano”. Muy claro todo. Gracias!

Pablo Joaquín Cruz

¡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: [],
}

Sergio Negrete Villegas

Máximo respect al teacher !!!

José James Marín Duque

hace un año

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.

Bulmaro Arellano Navarrete

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

angeloxlan

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

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

hace un año

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

Javier Saavedra

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
<link rel=“stylesheet” href="{{asset(‘css/app.css’)}}">
COMPILEN LOS ARCHIVOS
cmd: npm run dev

Heiner Ríos Rodríguez

hace 10 meses

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 ```js 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

Elvis Milan

hace un año

Por si no te funciona

protected $casts = ['variable' => 'datetime'];

Mario Garcia

Para laravel 9 https://techvblogs.com/blog/install-tailwind-css3-in-laravel9-with-vite3

Mauricio Garibello Rodriguez

Conf Tailwindcss

Aqui esta la guia para configurarlo en Laravel

Diego Antonio Briones Martínez

Yo instale Tailwind con npm install, les muestro como:

Instalar las depedendencias:

npm install --save-dev tailwindcss @tailwindcss/typography @tailwindcss/forms

en la raiz del proyecto creamos el archivo tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

en el archivo webpack.mix.js requerimos tailwind:

require('tailwindcss')

Finalmente en el index.blade.php enlazamos la hoja de estilos:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

deiver frank david rengifo

En el index se debe poner:

para que coja los estilos del sensey

Juan Guillermo Perez Cardozo

😃

Jose Juan Diaz Alvarez

https://laravel.com/docs/8.x/helpers#method-str-limit

Una alternativa para acortar el texto es utilizar el helper de Strings

 Str::limit('The quick brown fox jumps over the lazy dog', 20, ' (...)');

Andrés Felipe Lopez gomez

Les dejo esta documentación por si están tomando el curso con laravel 9, ya que ahora utiliza vite en vez webpack

Lucas Alvarez