chore: upgrade tailwind css from 3.4 to 4.3

assets/styles/_components.css

@@ -1,9 +1,9 @@
-@import "components/badge.css";
-@import "components/autocomplete.css";
-@import "components/button.css";
-@import "components/datatable.css";
-@import "components/datepicker.css";
-@import "components/toast.css";
-@import "components/tooltip.css";
-@import "components/timeline.css";
-@import "components/mail-body.css";
+@import "./components/badge.css";
+@import "./components/autocomplete.css";
+@import "./components/button.css";
+@import "./components/datatable.css";
+@import "./components/datepicker.css";
+@import "./components/toast.css";
+@import "./components/tooltip.css";
+@import "./components/timeline.css";
+@import "./components/mail-body.css";

assets/styles/app.css

@@ -1,7 +1,34 @@
-@import "tailwindcss/base";
-@import "_base.css";
+@import "tailwindcss";
+@import "./_base.css" layer(base);
+@import "./_components.css" layer(components);
 
-@import "tailwindcss/components";
-@import "_components.css";
+@plugin "@tailwindcss/forms";
 
-@import "tailwindcss/utilities";
+@source inline("rotate-90");
+
+@theme {
+    --font-sans: Lato, sans-serif;
+    --font-weight-semibold: 700;
+    --font-weight-bold: 900;
+    --color-primary: #3d8ccb;
+    --color-secondary: #f9c700;
+}
+
+/*
+ * Tailwind 3 defaults that Tailwind 4 changed: borders were gray-200 instead of currentColor,
+ * and buttons had a pointer cursor.
+ */
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
+
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+}

assets/styles/components/datepicker.css

@@ -3,11 +3,11 @@
 .flatpickr-day.selected,
 .flatpickr-day.selected:hover,
 .flatpickr-day.selected:focus {
-    background-color: theme('colors.secondary');
-    border-color: theme('colors.secondary');
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
 }
 
 .flatpickr-monthDropdown-months,
 .flatpickr-current-month .flatpickr-monthDropdown-months {
-    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
+    @apply form-select pt-0 pb-0 focus:outline-hidden focus:shadow-none;
 }

assets/styles/components/toast.css

@@ -1,20 +1,20 @@
 @import "toastify-js/src/toastify.css";
 
 .toastify {
-    @apply shadow-lg rounded;
+    @apply shadow-lg rounded-sm;
 }
 
 .toastify--success {
     @apply text-gray-100;
-    background: theme('colors.emerald.600');
+    background: var(--color-emerald-600);
 }
 
 .toastify--warning {
     @apply text-gray-100;
-    background: theme('colors.red.600');
+    background: var(--color-red-600);
 }
 
 .toastify--info {
     @apply text-gray-100;
-    background: theme('colors.blue.600');
+    background: var(--color-blue-600);
 }

assets/styles/components/tooltip.css

@@ -1,18 +1,18 @@
 @import "tippy.js/dist/tippy.css";
 
 .tippy-box {
-  background-color: theme('colors.primary');
+  background-color: var(--color-primary);
 }
 
 .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: theme('colors.primary');
+  border-top-color: var(--color-primary);
 }
 .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-  border-bottom-color: theme('colors.primary');
+  border-bottom-color: var(--color-primary);
 }
 .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: theme('colors.primary');
+  border-left-color: var(--color-primary);
 }
 .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: theme('colors.primary');
+  border-right-color: var(--color-primary);
 }