Listado de lecciones

Nunca habia usado tailwindcss y me ha dejado gratamente sorprendido. A mi no me gusta nada trabajar con CSS y esto es una gran ayuda.

Es increíble todo lo que ayuda Laravel, casi no usamos PHP. Lo que mas se usa es HTML y CSS.

Comparto el código
course.blade.php

@extends('layouts.web')

@section('content')
<div class="grid grid-cols-3 gap-4">
  <div class="p-8 bg-gray-200 col-span-1">
    <ul class="flex flex-col">
      <li class="font-medium text-sm text-gray-400 uppercase mb-4">Contenido</li>
      @foreach ($course->posts as $post)
        <li class="flex items-center text-gray-600 mt-2">
          {{ $post->name }}
          @if ($post->free)
            <span class="text-xs text-gray-500 font-semibold bg-gray-300 px-2 rounded-full ml-auto">Gratis</span>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
  <div class="text-gray-700 col-span-2">
    <img src="{{ $course->image }}" alt="">
    <h2 class="text-4xl">{{ $course->name }}</h2>
    <p>{{ $course->description }}</p>
    <div class="flex mt-3">
      <img src="{{ $course->user->avatar }}" class="h-10 w-10 rounded-full mr-2" alt="">
      <div>
        <p class="text-gray-500 text-sm">{{ $course->user->name }}</p>
        <p class="text-gray-300 text-xs">{{ $course->created_at->diffForHumans() }}</p>
      </div>
    </div>
  </div>
</div>
<div class="text-center mt-4">
  <h1 class="text-3xl text-gray-700 mb-2 uppercase">Ultimos Cursos</h1>
  <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h2>
</div>

<livewire:course-list>
@endsection

Para modificar las clases de los componentes con mas detalles pueden entrar al siguiente enlace

https://tailwindcss.com/docs/list-style-type

Para que me funcionara el llamado a la tabla posts coloque esto en el modelo:

public function posts(){
return $this->hasMany(Post::class, ‘couser_id’);
}

solo así me funciono, aún no se porque…

para actualizar modificaciones en el archivo de configuracion de taildwind o agregar sus prpias clases deben correr el ssiguiente comando que peuden volver un script
npx [email protected] build ./resources/css/app.css -o ./public/css/app.css
lo que hace es tomar los compontes de node y crear la hoja de estilos que aparece en public

Para que se actualice automáticamente utilicen este comando en otra terminal: npm run watch

No me llego acostumbrar a tailwind, estuve algo acostumbrado a usar css puro o boostrap que es algo más modeable, se tiene que repasar mucho su documentación y ver ejemplos que por cierto no hay tantos como me gustaría: https://tailwindcss.com/docs

Aquí mi engendro:

Laravel es una herramienta Full-Stack y en este curso se estan abordando todos los niveles de desarrollo. En proyectos mas amplios tenemos mayor cantidad de tiempo dedicados al diseño y analisis del modelo de datos, solo al obtener este esquema podremos crear correctamente las migraciones. Al tener las migraciones, conoceremos entonces como poblar la BD con datos de prueba con un correcto enlace de datos. Adicionalmente sabremos como relacionar nuestros modelos correcamente entre ellos. Usualmente en proyectos mas grandes tendremos que definir ciertas reglas de negocios que seran procesadas antes de que los datos lleguen quizás al Controller… Todos estos pasos son creados por diversos profesionales en la materia, sobre todo cuando se busca mucha eficiencia en las consultas y muy buenas practicas de codigo.

Sin embargo, este curso es muy buen punto de inicio para todo lo descrito anteriormente.

Si depronto no les funcionan algunos estilos de esta clase, no olviden ejecutar:

npm update && npm install && npm run dev

course.blade.php

@extends('layouts.web')

@section('content')
    <div class="grid grid-cols-3 gap-4">
        <div class="p-8 bg-gray-200 col-span-1">
            <ul class="flex flex-col">
                <li class="font-medium text-sm text-gray-400 uppercase mb-4">
                    Contenido
                </li>
                @foreach($course->posts as $post)
                    <li class="flex items-center text-gray-600 mt-2">
                        {{ $post->name }}
                        @if($post->free)
                            <span class="text-xs text-gray-500 font-semibold bg-gray-200 px-2 rounded-full ml-auto">Gratis</span>
                        @endif
                    </li>
                @endforeach
            </ul>

        </div>
        <div class="text-gray-700 col-span-2">
            <img src="{{ $course->image }}">
            <h2 class="text-4xl">{{ $course->name }}</h2>
            <p>{{ $course->description }}</p>
            <div class="flex mt-3">
                <img src="{{ $course->user->avatar }}" alt="" 
                class="h-10 w-10 rounded-full mr-2">

                <div>
                    <p class="text-gray-500 text-sm">{{ $course->user->name }}</p>
                    <p class="text-gray-300 text-xs">{{ $course->created_at->diffForHumans() }}</p>
                </div>
            </div>

        </div>

    </div>


    <div class="text-center mt-4">
        <h1 class="text-3xl text-gray-700 mb-2 uppercase">Últimos Cursos</h1>
        <h2 class="text-xl text-gray-600">Fórmate online como profesional en Tecnología</h2>

    </div>

    <livewire:course-list>
@endsection

Trabajar realmente con tailwind es muy comodo, y nos da un excelente diseño. Al parecer dejaré de usar bootstrap para incluir tailwind en mis proyectos.

Me gusta cada vez mas laravel

Alguno me podría decir porque sale así, gracias…