Laravel mix tailwind

Tailwind es En este post se reunen las

Tailwind es un framework CSS que permite de forma fácil, ágil e intuitiva el desarrollo rápido de estilos para una web, basado en clases de utilidad aplicables en el código HTML y con gran optimización para permitir reducir la carga CSS de una manera muy importante.

Aquí se van a apuntar las combinaciones más habituales de este código para conseguir una apariencia de la web agradable, responsiva y con gran usabilidad.

Mergear o combinar clases de las vistas y componentes

Puede que se de el caso que en la vista se utilicen clases, y además al utilizar un componente se desea que también tome las clases del mismo.

Para ello se utiliza el método merge, que combina las clases del componentes y las pasadas como atributos al mismo. Por ejemplo se pasa el parámetro $attributes con unas clases y se mergea con las ya existentes

{!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm']) !!}

El código de admiración doble {!! !!} es para que tome el string tal cual como código html, y así no tenga en cuenta caracteres conflictivos como las comillas.

Clases Tailwind para contenido

• Centrar contenido en la página
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

Clases Tailwind para tablas

• Centrar contenido en la página
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  
• Colunmas de ancho con scroll horizontal
  <td> class="px-6 py-4 whitespace-nowrap"></td>
  
• Tabla completa con eventos

<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr><th scope="col" class="w-24 cursor-pointer x-6 py-3 text-left text-xs 
font-medium text-gray-500 uppercase tracking-wider">
<i class="fas fa-sort-alpha-up-alt float-right mt-1"></i> </th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4"></td>
</tr>
</tbody>
</table>

Clases Tailwind para iconos

• Iconos de fontawesome
  <i class="fas fa-sort"></i>
• Iconos de fotawesome para cabeceras de tablas. Separado a la derecha y centrado.
  <i class="fas fa-sort float-right mt-1"></i>