fix: migrate to Tailwind v4 CSS-first config and fix asset loading

Sephyi · Sephyi · commit 82814397823e · 2026-03-13T18:15:18.000+01:00
- Migrate style/tailwind.css from v3 (@tailwind directives + @apply) to v4 (@import "tailwindcss", @theme tokens, @custom-variant, @source) - Replace .prose @apply rules with raw CSS using color-mix() for opacity - Fix CSS not loading: add resolve_css_href() that reads hash.txt to construct hashed CSS path, matching how HydrationScripts handles JS/WASM - Fix font preload: use r#as/r#type (Rust raw identifiers) instead of as_/type_ which rendered literally in HTML - Fix recursion limit: add #![recursion_limit = "256"] for deep view types - Rename Tailwind v3→v4 utilities: backdrop-blur-sm→xs, outline-none→hidden - Remove tailwind-config-file from Cargo.toml (v4 uses CSS-first config) - Gitignore tailwind.config.js (cargo-leptos auto-generates it; v4 ignores it)
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,9 @@ dist/
 # Leptos build artifacts
 /pkg/
 
+# cargo-leptos auto-generates this; Tailwind v4 uses CSS-first config instead
+tailwind.config.js
+
 # Rust backup files (rustfmt)
 **/*.rs.bk
 
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -28,8 +28,7 @@ mise run build        # Production build (server + WASM)
 - `src/bin/prerender.rs` — Cross-platform static HTML pre-renderer (zero extra deps)
 - `build.rs` — Markdown pipeline: `content/docs/*.md` → `content_generated.rs` + `search_index.json` + `routes.txt`
 - `content/docs/` — 12 markdown files with YAML frontmatter
-- `style/` — Tailwind CSS + animations
-- `tailwind.config.js` — Bee-themed color tokens, Leptos `class:` transform
+- `style/` — Tailwind v4 CSS-first config + animations (no JS config)
 
 ## Commands
 
@@ -85,7 +84,7 @@ Valid sections: `Basics`, `Usage`, `Internals`, `Integration`, `Reference`
 - `cargo check --features ssr` and `cargo check --features hydrate --target wasm32-unknown-unknown` are independent — both must pass
 - The `search_index.json` is generated by `build.rs` into `$OUT_DIR` and also copied to `target/site/` for serving
 - `routes.txt` manifest is generated by `build.rs` — the prerender binary finds it by walking `target/build/`
-- Tailwind v4 warning about JS config is informational — the JS config still works and is needed for the Leptos `class:` transform
+- cargo-leptos auto-generates `tailwind.config.js` (gitignored) — Tailwind v4 ignores it since we use CSS-first config in `style/tailwind.css`
 
 ## Code Style
 
diff --git a/Cargo.toml b/Cargo.toml
@@ -84,7 +84,6 @@ output-name = "commitbee-web"
 site-root = "target/site"
 site-pkg-dir = "pkg"
 tailwind-input-file = "style/tailwind.css"
-tailwind-config-file = "tailwind.config.js"
 assets-dir = "public"
 site-addr = "127.0.0.1:3000"
 reload-port = 3001
diff --git a/src/app.rs b/src/app.rs
@@ -29,6 +29,9 @@ pub fn App() -> impl IntoView {
 }
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
+    let pkg_path = &options.site_pkg_dir;
+    let css_href = resolve_css_href(&options, pkg_path);
+
     view! {
         <!DOCTYPE html>
         <html lang="en">
@@ -38,7 +41,8 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
                 <link rel="icon" href="/images/favicon.svg" type="image/svg+xml"/>
                 <link rel="alternate icon" href="/images/favicon.ico"/>
                 <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>
-                <link rel="preload" href="/fonts/Inter-Variable.woff2" as_="font" type_="font/woff2" crossorigin="anonymous"/>
+                <link rel="preload" href="/fonts/Inter-Variable.woff2" r#as="font" r#type="font/woff2" crossorigin="anonymous"/>
+                <link rel="stylesheet" href=css_href/>
                 // Inline theme script: prevents FOUC
                 <script>{r#"
                     (function(){
@@ -58,3 +62,24 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
         </html>
     }
 }
+
+fn resolve_css_href(options: &LeptosOptions, pkg_path: &str) -> String {
+    let mut css_file = options.output_name.to_string();
+    if options.hash_files {
+        let hash_path = std::env::current_exe()
+            .map(|path| path.parent().map(|p| p.to_path_buf()).unwrap_or_default())
+            .unwrap_or_default()
+            .join(options.hash_file.as_ref());
+        if let Ok(hashes) = std::fs::read_to_string(&hash_path) {
+            for line in hashes.lines() {
+                let line = line.trim();
+                if let Some((file, hash)) = line.split_once(':') {
+                    if file == "css" {
+                        css_file.push_str(&format!(".{}", hash.trim()));
+                    }
+                }
+            }
+        }
+    }
+    format!("/{pkg_path}/{css_file}.css")
+}
diff --git a/src/components/doc_search.rs b/src/components/doc_search.rs
@@ -118,7 +118,7 @@ pub fn DocSearch() -> impl IntoView {
         // Modal overlay
         <Show when=move || is_open.get()>
             <div
-                class="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh] bg-bark/50 backdrop-blur-sm"
+                class="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh] bg-bark/50 backdrop-blur-xs"
                 on:click=move |_| set_is_open.set(false)
             >
                 <div
@@ -133,7 +133,7 @@ pub fn DocSearch() -> impl IntoView {
                         <input
                             type="text"
                             placeholder="Search documentation..."
-                            class="flex-1 bg-transparent px-3 py-4 text-bark placeholder:text-comb/50 outline-none"
+                            class="flex-1 bg-transparent px-3 py-4 text-bark placeholder:text-comb/50 outline-hidden"
                             autofocus=true
                             on:input=move |e| set_query.set(event_target_value(&e))
                         />
diff --git a/src/main.rs b/src/main.rs
@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 
+#![recursion_limit = "256"]
+
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
diff --git a/style/tailwind.css b/style/tailwind.css
@@ -4,6 +4,35 @@
  * SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
  */
 
+@import "tailwindcss";
+@import "./animations.css";
+
+/* Scan Rust source files for utility classes */
+@source "../src/**/*.rs";
+
+/* Class-based dark mode (toggle via .dark on <html>) */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Bee-themed color tokens */
+  --color-honey: var(--honey);
+  --color-honey-light: var(--honey-light);
+  --color-honey-dark: var(--honey-dark);
+  --color-nectar: var(--nectar);
+  --color-comb: var(--comb);
+  --color-bark: var(--bark);
+  --color-pollen: var(--pollen);
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+
+  /* Typography */
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Max widths */
+  --container-prose: 75ch;
+}
+
 @font-face {
   font-family: "Inter";
   font-style: normal;
@@ -20,10 +49,6 @@
   src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
   :root {
     --honey: #f59e0b;
@@ -68,96 +93,152 @@
   }
 
   body {
-    font-family: "Inter", system-ui, sans-serif;
-    background-color: var(--surface);
-    color: var(--bark);
+    font-family: var(--font-sans);
+    background-color: var(--color-surface);
+    color: var(--color-bark);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   code,
   pre,
   kbd {
-    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-family: var(--font-mono);
   }
 }
 
 @layer components {
   .prose {
-    @apply text-bark leading-relaxed;
+    color: var(--color-bark);
+    line-height: 1.625;
   }
 
   .prose h1 {
-    @apply text-3xl font-bold mt-0 mb-6;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
   }
 
   .prose h2 {
-    @apply text-2xl font-semibold mt-12 mb-4 pb-2 border-b border-honey/10;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 600;
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-honey) 10%, transparent);
   }
 
   .prose h3 {
-    @apply text-xl font-semibold mt-8 mb-3;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
   }
 
   .prose h4 {
-    @apply text-lg font-medium mt-6 mb-2;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 500;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
   }
 
   .prose p {
-    @apply my-4;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
   }
 
   .prose a {
-    @apply text-honey hover:underline;
+    color: var(--color-honey);
+  }
+  .prose a:hover {
+    text-decoration: underline;
   }
 
   .prose ul {
-    @apply my-4 pl-6 list-disc;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    list-style-type: disc;
   }
 
   .prose ol {
-    @apply my-4 pl-6 list-decimal;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    list-style-type: decimal;
   }
 
   .prose li {
-    @apply my-1;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
 
   .prose code:not(pre code) {
-    @apply rounded bg-pollen px-1.5 py-0.5 text-sm font-mono;
+    border-radius: 0.25rem;
+    background-color: var(--color-pollen);
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    font-size: 0.875rem;
+    font-family: var(--font-mono);
   }
 
   .prose pre {
-    @apply my-6 rounded-lg bg-pollen p-4 overflow-x-auto;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-radius: 0.5rem;
+    background-color: var(--color-pollen);
+    padding: 1rem;
+    overflow-x: auto;
   }
 
   .prose blockquote {
-    @apply my-4 border-l-4 border-honey/30 pl-4 italic text-comb;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-left: 4px solid color-mix(in oklch, var(--color-honey) 30%, transparent);
+    padding-left: 1rem;
+    font-style: italic;
+    color: var(--color-comb);
   }
 
   .prose table {
-    @apply my-6 w-full border-collapse;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    width: 100%;
+    border-collapse: collapse;
   }
 
   .prose th {
-    @apply border-b border-honey/20 px-4 py-2 text-left font-semibold;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-honey) 20%, transparent);
+    padding: 0.5rem 1rem;
+    text-align: left;
+    font-weight: 600;
   }
 
   .prose td {
-    @apply border-b border-honey/5 px-4 py-2;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-honey) 5%, transparent);
+    padding: 0.5rem 1rem;
   }
 
   .prose hr {
-    @apply my-8 border-honey/10;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border-color: color-mix(in oklch, var(--color-honey) 10%, transparent);
   }
 
   .prose strong {
-    @apply font-semibold;
+    font-weight: 600;
   }
 
   .prose img {
-    @apply my-6 rounded-lg;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-radius: 0.5rem;
   }
 }
-
-@import "./animations.css";
diff --git a/tailwind.config.js b/tailwind.config.js
