Fully converted to tailwind now.

static/input_style.css

@@ -45,7 +45,7 @@ card > middle {
 }
 
 label {
-  @apply font-bold text-950 dark:text-white;
+  @apply font-bold text-gray-950 dark:text-white;
 }
 
 input {
@@ -57,5 +57,90 @@ input::placeholder {
 }
 
 button {
-  @apply rounded-sm shadow-sm bg-gray-100 text-gray-950 p-3;
+  @apply rounded-sm shadow-sm bg-gray-300 text-gray-950 p-3;
+}
+
+@utility btn-hover {
+  @apply bg-gray-900! text-gray-50!;
+}
+
+@utility btn-alert {
+  @apply bg-red-800! text-gray-50!;
+}
+
+@utility btn-warning {
+  @apply bg-yellow-800! text-gray-50!;
+}
+
+shape {
+  @apply bg-gray-300 flex flex-col justify-center items-center aspect-square p-1 text-gray-950;
+}
+
+shape.tiny {
+  @apply min-w-15 w-15 max-w-15 p-0;
+}
+
+shape.xxs {
+  @apply min-w-30 w-30 max-w-30 p-0;
+}
+
+shape.xs {
+  @apply min-w-xs w-xs max-w-xs;
+}
+
+shape.sm {
+  @apply min-w-sm w-sm max-w-sm;
+}
+
+shape.md {
+  @apply min-w-md w-md max-w-md;
+}
+
+shape.lg {
+  @apply min-w-lg w-lg max-w-lg;
+}
+
+shape.xl {
+  @apply min-w-xl w-xl max-w-xl;
+}
+
+shape.video {
+  @apply w-full aspect-video;
+}
+
+
+block {
+  @apply flex flex-col pl-4 pr-4 pb-10 pt-4;
+}
+
+block.horizontal {
+  @apply flex flex-row p-4 gap-4;
+}
+
+stack {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "cover";
+}
+
+stack > * {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  width: 100%;
+  height: 100%;
+  position: relative;
+  grid-area: cover;
+}
+
+stack > .top {
+  z-index: 10;
+}
+
+grid {
+  @apply grid gap-2 p-4;
+}
+
+hr {
+  visibility: hidden;
 }