update tailwind

input.css

@@ -1,7 +1,24 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
+@config './tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 body {
     @apply dark:bg-prim dark:text-second

src/routes/data.rs

@@ -61,15 +61,14 @@ pub fn ValueCard(topic: String, location: String, sensor: String, unity: String,
                 <ErrorBoundary fallback=|_| {
                     view! { <p class="error-messages text-xs-center">"Something went wrong, please try again later."</p>}
                 }>
-                    {move || {
+                    {move || value.get().map(move |x| {
-                        value.get().map(move |x| {
                             x.map(move |result| {
                                 view! {
                                     <Card sensor_props value=result />
                                 }
                             })
                         })
-                    }}
+                    }
                 </ErrorBoundary>
             </Suspense>
         </li>

src/routes/shutters.rs

@@ -88,13 +88,13 @@ pub fn Shutter(name: String, shade_id: i32) -> impl IntoView {
     view! {
         <div class="bg-prim-light rounded-lg w-48 px-3">
             <div class="text-2xl text-center">{name}</div>
-            <div class="flex justify-between bg-second-dark rounded *:flex-1 *:transition">
+            <div class="flex justify-between bg-second-dark rounded-sm *:flex-1 *:transition">
-                <button on:click=move |_| move_up.dispatch(()) class="hover:text-third focus:text-third-light">
+                <button on:click=move |_| move_up.dispatch(()) class="hover:text-third flex justify-center focus:text-third-light">
-                    <Arrow class="-rotate-90 w-8 inline".to_string() />
+                    <Arrow class="-rotate-90 size-12 inline".to_string() />
                 </button>
-                <button on:click=move |_| move_my.dispatch(()) class="hover:text-third focus:text-third-light">"My"</button>
+                <button on:click=move |_| move_my.dispatch(()) class="hover:text-third text-2xl font-bold focus:text-third-light">"My"</button>
-                <button on:click=move |_| move_down.dispatch(())  class="hover:text-third focus:text-third-light">
+                <button on:click=move |_| move_down.dispatch(())  class="hover:text-third flex justify-center focus:text-third-light">
-                    <Arrow class="rotate-90 w-8 inline".to_string() />
+                    <Arrow class="rotate-90 size-12 inline".to_string() />
                 </button>
             </div>
         </div>