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/src/views.rs b/crates/plcom/src/views.rs
index 7ea15c1..29f8f0d 100644
--- a/crates/plcom/src/views.rs
+++ b/crates/plcom/src/views.rs
@@ -8,7 +8,6 @@ pub fn shell(title: &str, children: impl IntoAny) -> AnyView {
         title.into()
     };
 
-    let year = jiff::Zoned::now().year();
     view! {
         <!DOCTYPE html>
         <html lang="en">
@@ -36,15 +35,12 @@ pub fn shell(title: &str, children: impl IntoAny) -> AnyView {
                 <main class=tw_join!("flex-grow")>
                     {children.into_any()}
                 </main>
-                <footer class=tw_join!("bg-black")>
-                    <div class=tw_join!("container", "mx-auto", "px-4", "py-8")>
-                        <p>"© 2015 - "{year}" Philippe Loctaux, made with "{underline_link(Link::new(uri!("https://leptos.dev").into(), "Leptos"), None).into_any()}"."</p>
-                    </div>
-                </footer>
+                {footer().into_any()}
             </body>
             {stats().into_any()}
         </html>
-    }.into_any()
+    }
+    .into_any()
 }
 
 pub fn content_page(title: &str, children: impl IntoAny) -> AnyView {
@@ -62,7 +58,18 @@ pub fn content_page(title: &str, children: impl IntoAny) -> AnyView {
     .into_any()
 }
 
-pub fn stats() -> impl IntoView {
+fn footer() -> impl IntoView {
+    let year = jiff::Zoned::now().year();
+    view! {
+        <footer class=tw_join!("bg-black")>
+            <div class=tw_join!("container", "mx-auto", "px-4", "py-8")>
+                <p>"© 2015 - "{year}" Philippe Loctaux, made with "{underline_link(Link::new(uri!("https://leptos.dev").into(), "Leptos"), None).into_any()}"."</p>
+            </div>
+        </footer>
+    }
+}
+
+fn stats() -> impl IntoView {
     view! {
         <script inner_html=r#"
             window.goatcounter = {
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 f58c8d8..05d754b 100644
--- a/crates/plcom/tailwind.nix
+++ b/crates/plcom/tailwind.nix
@@ -8,7 +8,7 @@
 stdenvNoCC.mkDerivation {
   name = "plcom-css-tailwind";
   inherit src;
-  buildInputs = [ tailwindcss ];
+  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;
         };
