trying tailwind

resources/input.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.htmx-added .fade-in {
+    opacity: 0.0 !important;
+}
+.fade-in {
+    opacity: 1.0;
+}
+
+.htmx-added .slide-up {
+    @apply translate-y-5 !important;
+}
+.slide-up {
+    @apply translate-y-0;
+}
+
+.live-added {
+    animation: pulse-green 300ms 2;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+}
+/*
+.live-added {
+    @apply bg-white;
+}
+*/
+
+@keyframes pulse-green {
+    0% { @apply bg-white; }
+    100% { @apply bg-green-300;}
+}
+
+.htmx-request .htmx-indicator {
+    display: inherit !important;
+}
+.htmx-indicator {
+    display: none;
+}
+
+.htmx-request .htmx-indicator-hidden {
+    display: none !important;
+}
+
+.htmx-indicator-hidden {
+    display: inherit;
+}
+
+.htmx-swapping .fade-out {
+    opacity: 0.0 !important;
+}
+.fade-out {
+    opacity: 1.0;
+}