From fd947858e91a7c42260a2d86271c08d03eb9a46f Mon Sep 17 00:00:00 2001
From: Philippe Loctaux <p@philippeloctaux.com>
Date: Sat, 5 Jul 2025 01:23:13 +0200
Subject: [PATCH] tailwindcss: 3 -> 4

---
 crates/plcom/css/main.css            |  9 ++++++---
 crates/plcom/src/pages/root/hero.rs  |  2 +-
 crates/plcom/src/pages/wallpapers.rs |  2 +-
 crates/plcom/tailwind.config.js      | 16 ----------------
 crates/plcom/tailwind.nix            |  2 +-
 flake.nix                            |  2 +-
 6 files changed, 10 insertions(+), 23 deletions(-)
 delete mode 100644 crates/plcom/tailwind.config.js

diff --git a/crates/plcom/css/main.css b/crates/plcom/css/main.css
index 2dcc3d7..933dc0b 100644
--- a/crates/plcom/css/main.css
+++ b/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
diff --git a/crates/plcom/src/pages/root/hero.rs b/crates/plcom/src/pages/root/hero.rs
index 2c8e665..a9da6c6 100644
--- a/crates/plcom/src/pages/root/hero.rs
+++ b/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
diff --git a/crates/plcom/src/pages/wallpapers.rs b/crates/plcom/src/pages/wallpapers.rs
index 8a1b613..085f414 100644
--- a/crates/plcom/src/pages/wallpapers.rs
+++ b/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);
diff --git a/crates/plcom/tailwind.config.js b/crates/plcom/tailwind.config.js
deleted file mode 100644
index b970932..0000000
--- a/crates/plcom/tailwind.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: { 
-    relative: true,
-    files: ["./src/**/*.rs"],
-  },
-  theme: {
-    extend: {
-      height: {
-        almostscreen: "90vh",
-        halfscreen: "60vh",
-      }
-    },
-  },
-  plugins: [],
-}
diff --git a/crates/plcom/tailwind.nix b/crates/plcom/tailwind.nix
index 744b6df..05d754b 100644
--- a/crates/plcom/tailwind.nix
+++ b/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";
 }
diff --git a/flake.nix b/flake.nix
index 1120f5f..b9dc193 100644
--- a/flake.nix
+++ b/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;
         };