pagy tailwind

app/assets/stylesheets/application.tailwind.css

@@ -1,13 +1,7 @@
+
+@import "./pagy.tailwind.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/

app/assets/stylesheets/pagy.tailwind.css

@@ -0,0 +1,34 @@
+.pagy {
+    @apply flex space-x-1 font-semibold text-sm text-gray-500;
+  
+    .page {
+      a {
+        @apply block rounded-lg px-3 py-1 bg-gray-200;
+  
+        &:hover {
+          @apply bg-gray-300;
+        }
+      }
+  
+      &.active a {
+        @apply text-white bg-gray-400 cursor-default;
+      }
+  
+      &.disabled a {
+        @apply text-gray-300 bg-gray-100 cursor-default;
+      }
+  
+      &.gap {}
+  
+    }
+  
+    .pagy-combo-input,
+    &.pagy-items-selector-js {
+      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
+  
+      input {
+        @apply bg-gray-100 border-none rounded-md;
+      }
+    }
+  }
+  

app/views/scores/index.html.erb

@@ -5,6 +5,8 @@
     <%= link_to "New score", new_score_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
   </div>
 
+  <%== pagy_nav(@pagy) %>
+
   <div id="scores" class="min-w-full ">
     <% @records.each do |score| %>
       <%= render score %>