Migrate cotton to Python + template tag shims

games/static/base.css

@@ -817,9 +817,6 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .inset-y-3 {
-    inset-block: calc(var(--spacing) * 3);
-  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -1556,9 +1553,6 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
-  .w-6 {
-    width: calc(var(--spacing) * 6);
-  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1574,9 +1568,6 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
-  .w-80 {
-    width: calc(var(--spacing) * 80);
-  }
   .w-auto {
     width: auto;
   }
@@ -1607,9 +1598,6 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .datatable-input {
     .datatable-wrapper .datatable-search & {
       color: var(--color-heading);
@@ -1859,9 +1847,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-xs {
-    border-radius: var(--radius-xs);
-  }
   .rounded-s-base {
     border-start-start-radius: var(--radius-base);
     border-end-start-radius: var(--radius-base);
@@ -2099,9 +2084,6 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
-  .bg-green-600 {
-    background-color: var(--color-green-600);
-  }
   .bg-green-700 {
     background-color: var(--color-green-700);
   }
@@ -2283,9 +2265,6 @@
   .ps-9 {
     padding-inline-start: calc(var(--spacing) * 9);
   }
-  .ps-10 {
-    padding-inline-start: calc(var(--spacing) * 10);
-  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2317,9 +2296,6 @@
       color: heading !important;
     }
   }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .pb-16 {
     padding-bottom: calc(var(--spacing) * 16);
   }
@@ -2888,13 +2864,6 @@
       }
     }
   }
-  .hover\:bg-green-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-700);
-      }
-    }
-  }
   .hover\:bg-green-800 {
     &:hover {
       @media (hover: hover) {
@@ -3019,11 +2988,6 @@
       z-index: 10;
     }
   }
-  .focus\:border-blue-500 {
-    &:focus {
-      border-color: var(--color-blue-500);
-    }
-  }
   .focus\:border-brand {
     &:focus {
       border-color: var(--color-brand);
@@ -3051,11 +3015,6 @@
       --tw-ring-color: var(--color-blue-300);
     }
   }
-  .focus\:ring-blue-500 {
-    &:focus {
-      --tw-ring-color: var(--color-blue-500);
-    }
-  }
   .focus\:ring-blue-700 {
     &:focus {
       --tw-ring-color: var(--color-blue-700);
@@ -3086,11 +3045,6 @@
       --tw-ring-color: var(--color-green-300);
     }
   }
-  .focus\:ring-green-500 {
-    &:focus {
-      --tw-ring-color: var(--color-green-500);
-    }
-  }
   .focus\:ring-green-700 {
     &:focus {
       --tw-ring-color: var(--color-green-700);
@@ -3106,17 +3060,6 @@
       --tw-ring-color: var(--color-red-300);
     }
   }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus\:ring-offset-blue-200 {
-    &:focus {
-      --tw-ring-offset-color: var(--color-blue-200);
-    }
-  }
   .focus\:outline-hidden {
     &:focus {
       --tw-outline-style: none;
@@ -3143,11 +3086,6 @@
       max-width: var(--breakpoint-sm);
     }
   }
-  .sm\:max-w-md {
-    @media (width >= 40rem) {
-      max-width: var(--container-md);
-    }
-  }
   .sm\:max-w-xl {
     @media (width >= 40rem) {
       max-width: var(--container-xl);
@@ -3303,11 +3241,6 @@
       max-width: var(--container-3xl);
     }
   }
-  .lg\:max-w-lg {
-    @media (width >= 64rem) {
-      max-width: var(--container-lg);
-    }
-  }
   .xl\:max-w-\(--breakpoint-xl\) {
     @media (width >= 80rem) {
       max-width: var(--breakpoint-xl);
@@ -3582,13 +3515,6 @@
       color: var(--color-white);
     }
   }
-  .dark\:placeholder-gray-400 {
-    &:is(.dark *) {
-      &::placeholder {
-        color: var(--color-gray-400);
-      }
-    }
-  }
   .dark\:odd\:bg-gray-900 {
     &:is(.dark *) {
       &:nth-child(odd) {
@@ -3738,13 +3664,6 @@
       }
     }
   }
-  .dark\:focus\:border-blue-500 {
-    &:is(.dark *) {
-      &:focus {
-        border-color: var(--color-blue-500);
-      }
-    }
-  }
   .dark\:focus\:text-white {
     &:is(.dark *) {
       &:focus {