tailwindcss: 3 -> 4

crates/plcom/css/main.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+    --almostscreen: 90vh;
+    --halfscreen: 60vh;
+}
 
 /* Fixed background when scrolling in tailwind
  * Disabled on iOS devices

crates/plcom/src/pages/root/hero.rs

@@ -68,7 +68,7 @@ pub fn hero(wallpaper: Option<&'static Wallpaper>) -> impl IntoAny {
             <div
                 id="wallpaper"
                 class=tw_join!(
-                    "relative", "text-white", "w-full", "h-almostscreen", "bg-center", "bg-cover"
+                    "relative", "text-white", "w-full", "h-(--almostscreen)", "bg-center", "bg-cover"
                 )
 
                 style=background_image

crates/plcom/src/pages/wallpapers.rs

@@ -22,7 +22,7 @@ pub fn wallpapers_page() -> impl IntoAny {
 
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
         <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-        <div id="map" class="w-full h-halfscreen"></div>
+        <div id="map" class="w-full h-(--halfscreen)"></div>
 
         <script inner_html=r#"
             let map = L.map('map').setView([48.858288, 2.294442], 2);

crates/plcom/tailwind.config.js

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: { 
-    relative: true,
-    files: ["./src/**/*.rs"],
-  },
-  theme: {
-    extend: {
-      height: {
-        almostscreen: "90vh",
-        halfscreen: "60vh",
-      }
-    },
-  },
-  plugins: [],
-}

crates/plcom/tailwind.nix

@@ -10,5 +10,5 @@ stdenvNoCC.mkDerivation {
   inherit src;
   nativeBuildInputs = [ tailwindcss ];
   dontUnpack = true;
-  buildPhase = "${tailwindcss}/bin/tailwindcss --config ${src}/tailwind.config.js --input ${src}/${inputFile} --output $out/output.css --minify";
+  buildPhase = "${tailwindcss}/bin/tailwindcss --input ${src}/${inputFile} --output $out/output.css --cwd ${src} --minify";
 }

flake.nix

@@ -30,7 +30,7 @@
         # Gather assets
         plcomAssets = import ./crates/plcom/assets.nix {
           stdenvNoCC = pkgs.stdenvNoCC;
-          tailwindcss = pkgs.tailwindcss;
+          tailwindcss = pkgs.tailwindcss_4;
           tailwindProjectRoot = ./crates/plcom;
           src = ./public;
         };