Mapped tailwind clases for generating grid columns in order to be compatible with the jit mode of tailwind 3

Author: Gustavinho

resources/views/grid-view/grid-view.blade.php

@@ -6,14 +6,30 @@
 You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES
 
 --}}
-
+@php
+ // Mapped this tailwindcss utilities so they can be prged
+ $cols = [
+   1 => 'xl:grid-cols-1',
+   2 => 'xl:grid-cols-2',
+   3 => 'xl:grid-cols-3',
+   4 => 'xl:grid-cols-4',
+   5 => 'xl:grid-cols-5',
+   6 => 'xl:grid-cols-6',
+   7 => 'xl:grid-cols-7',
+   8 => 'xl:grid-cols-8',
+   9 => 'xl:grid-cols-9',
+   10 => 'xl:grid-cols-10',
+   11 => 'xl:grid-cols-11',
+   12 => 'xl:grid-cols-12',
+ ]
+@endphp
 <x-lv-layout>
   {{-- Search input and filters --}}
   <div class="mb-2">
     @include('laravel-views::components.toolbar.toolbar')
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-{{ $maxCols }} gap-8 md:gap-8">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 {{ $cols[$maxCols] }} gap-8 md:gap-8">
     @foreach ($items as $item)
       <div class="relative">
         @if ($this->hasBulkActions)