49. Mostrar el listado de posts

ufff profe casi no me sale lo de este video, pero por fin :)  jejeje

tuve que evitar lo del contenedor proque no  me salio, me generaba error, ya tuve que poner las clases directamente en el div para continuar.

veo que ya  no sale webpack sino vite y bueno…

también en  resources/css/app.css , allí me muestra @tailwind  mientras que en tu archivo se veia @import

y al momento de usar la directiva @apply, nada no me generaba los estilos, no sé por qué ?

si a alguien le pasó lo mismo  le agradeceria me explicara esto es en el minuto 10:34 del video

Nombres de clases dinámicas

La implicación más importante de cómo Tailwind extrae los nombres de las clases es que solo encontrará clases que existan como cadenas completas e ininterrumpidas en sus archivos fuente.

Si utiliza la interpolación de cadenas o concatena nombres de clases parciales, Tailwind no los encontrará y, por lo tanto, no generará el CSS correspondiente:

No construya nombres de clases dinámicamente

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

En el ejemplo anterior, las cadenas text-red-600y text-green-600 no existen, por lo que Tailwind no generará esas clases.

En su lugar, asegúrese de que los nombres de clase que esté utilizando existan completos:

Utilice siempre nombres de clase completos

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Si estás usando una biblioteca de componentes como React o Vue, esto significa que no debes usar accesorios para construir clases dinámicamente:

No utilice accesorios para crear nombres de clases dinámicamente

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}

En su lugar, asigne accesorios para completar nombres de clases que sean estáticamente detectables en el momento de la compilación:

Asigne siempre accesorios a nombres de clases estáticas

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

Esto tiene el beneficio adicional de permitirle asignar diferentes valores de accesorios a diferentes tonos de color, por ejemplo:

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500 text-white',
    red: 'bg-red-500 hover:bg-red-400 text-white',
    yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

Siempre que utilices siempre nombres de clases completos en tu código, Tailwind generará todo tu CSS perfectamente en todo momento.

? 6° Hacemos responsive nuestro listado de posts

Continuamos editando el archivo index.blade.php:

<x-app-layout>

	<div class="container py-8">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      @foreach ($posts as $post)
        <article
          class="w-full h-80 bg-cover bg-center 
          	@if($loop->first) md:col-span-2 @endif"
          style="background-image: url({{ Storage::url($post->image->url) }})">
...

? 5° Paginando el listado de posts

Editamos el controlador en /app/Http/Controllers/PostController.php:

$posts = Post::where('status', 2)->latest('id')->paginate(8);

? Agregamos los links de paginación al pie en el archivo /resources/views/posts/index.blade.php

<x-app-layout>

	<div class="container py-8">
	
    	<div class="grid grid-cols-3 gap-6"> ...
    	</div>

	
    	<div class="mt-4">
      		{{ $posts->links() }}
    	</div>

	</div>

</x-app-layout>

? 4° Agregamos Color a los Tags

? Editamos el archivo de migración para tags y le agregamos el campo color:

Schema::create('tags', function (Blueprint $table) {
	$table->id();

	$table->string('name');
	$table->string('slug');
	$table->string('color');

	$table->timestamps();
});

? Editamos el Factory para tags en el archivo /database/factories/TagFactory.php:

return [
	'name' => $name,
	'slug' => Str::slug($name),
	'color' => $this->faker
		->randomElement(['red', 'green', 'blue', 'yellow', 'indigo', 'pink'])
];

? Volvemos a correr la migración:

php artisan migrate:fresh --seed

? Actualizamos los enlaces de los tags para que tomen el color de la base de datos:

<a href="" class="inline-block px-3 h-6 bg-{{ $tag->color }}-600 
	text-white rounded-full">{{ $tag->name }}</a>

? 3° Creamos una grilla con tailwind

Editamos el archivo /resources/views/posts/index.blade.php:

<x-app-layout>

	<div class="container py-8">
    <div class="grid grid-cols-3 gap-6">
      @foreach ($posts as $post)
        <article
          class="w-full h-80 bg-cover bg-center @if($loop->first) col-span-2 @endif"
          style="background-image: url({{ Storage::url($post->image->url) }})">
          <div class="w-full h-full px-8 flex flex-col justify-center">
            <div>
              @foreach ($post->tags as $tag)
                  <a href="" class="inline-block px-3 h-6 bg-gray-600 text-white rounded-full">{{ $tag->name }}</a>
              @endforeach
            </div>
            <h1 class="text-4xl text-white leading-8 font-bold">
              <a href="#">
                {{ $post->name }}
              </a>
            </h1>
          </div>
        </article>
      @endforeach
    </div>
	</div>

</x-app-layout>

? 2° Modificamos el estilo container de tailwind

En el archivo /tailwind.config.js agregamos lo siguiente para deshabilitar el estilo container:

corePlugins: {
	container: false,
}

? Creamos nuestra propia clase container en un nuevo arhivo /resources/css/common.css:

.container{
	@apply max-w-7xl mx-auto px-2;
}

@media(min-width:640px){
	.container{
		@apply px-6;
	}
}

@media(min-width:1024){
	.container{
		@apply px-8;
	}
}

? Para que se reconozca el archivo common.css debemos importarlo en el archivo app.css en /resources/css/:

@import 'common.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

? 1° Configuramos controlador y vista y ruta de Post

? Para recuperar la información de la base de datos creamos un controlador:

php artisan make:controller PostController

Se crea en app/Http/Controllers/PostController.php, ahora le agregamos el método index:

<?php

namespace App\Http\Controllers;

use App\Models\Post;

class PostController extends Controller
{
	public function index() {
		$posts = Post::where('status', 2)->get();
		
		return view('posts.index', compact('posts'));
	}
}

? En resources/views/ creamos la carpeta posts y dentro de ella el archivo index.blade.php que extiende su contenido de la plantilla principal:

<x-app-layout>

	<div class="container mx-auto bg-red-500">
	</div>
	
</x-app-layout>

? Configuramos nuestro archivo de rutas routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

Route::get('/', [PostController::class, 'index'])->name('posts.index');

Route::middleware(['auth:sanctum', 'verified'])
	->get('/dashboard', function () {
		return view('dashboard');
	})
	->name('dashboard');

Una consulta, no se me muestra el estilo que estoy aplicando, como podría solucionar

una consulta a la hora de mostrar los colores de tag no me visualiza , lei una solucion que diste pero no me  aparece esa linea de  codigo en tailwind.config.js

como podria solucionarlo