Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso de API REST con Laravel

Curso de API REST con Laravel

Profesor Italo Morales F

Profesor Italo Morales F

Mejorando el aspecto del sitio con Tailwind CSS

5/18
Recursos

Aportes 25

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Recuerden que tambi茅n podemos hacer un formato para las fechas donde se muestre hace cu谩nto fue publicado:
.
鈥淗ace 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 馃槃

el profe explica muy bien!!!

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

驴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 鈥渢ailwind.blade.php鈥

Ahora tenemos que decirle que use esta plantilla de estillos para la paginaci贸n en 鈥淧roviders\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

https://tailwindcss.com/docs/guides/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(鈥榯ailwindcss鈥);
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');
    }
}

Directamente al 鈥済rano鈥. Muy claro todo. Gracias!

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

M谩ximo respect al teacher !!!

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

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

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

use Illuminate\Support\Str;

...

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

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.

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

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

  1. QUE ESTE INCLUIDO LA HOJA DE ESTILOS EN LA VISTA
    <link rel=鈥渟tylesheet鈥 href="{{asset(鈥榗ss/app.css鈥)}}">
  2. COMPILEN LOS ARCHIVOS
    cmd: npm run dev
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

Por si no te funciona

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

Conf Tailwindcss

Aqui esta la guia para configurarlo en Laravel

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

Yo instale Tailwind con npm install, les muestro como:

  1. Instalar las depedendencias:
npm install --save-dev tailwindcss @tailwindcss/typography @tailwindcss/forms
  1. 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')],
};
  1. en el archivo webpack.mix.js requerimos tailwind:
require('tailwindcss')
  1. Finalmente en el index.blade.php enlazamos la hoja de estilos:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

En el index se debe poner:

<script src=鈥https://cdn.tailwindcss.com鈥></script>

para que coja los estilos del sensey

馃槂

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

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

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

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

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

Me encanta lo c贸modo que es TailwindCSS. Les dejo por ac谩 mi peque帽o dise帽o