diff --git a/Cargo.toml b/Cargo.toml
index c7a6419..1aaad02 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -120,6 +120,8 @@ assets-dir = "assets"
 bin-features = ["ssr"]
 lib-features = ["hydrate"]
 lib-profile-release = "wasm-release"
+tailwind-input-file = "assets/tailwind.css"
+tailwind-config-file = "tailwind.config.js"
 
 [lib]
 crate-type = ["cdylib", "rlib"]
diff --git a/README.md b/README.md
index 5cfca71..ec16a15 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ psql -c "CREATE USER ibis WITH PASSWORD 'ibis' SUPERUSER;" -U postgres
 psql -c "CREATE DATABASE ibis WITH OWNER ibis;" -U postgres
 ```
 
-You need to install [cargo](https://rustup.rs/), and [cargo-leptos](https://github.com/leptos-rs/cargo-leptos). Run `cargo leptos watch` which automatically rebuilds the project after changes. Then open the site at [localhost:3000](http://localhost:3000/). You can login with user `ibis` and password `ibis`.
+You need to install [cargo](https://rustup.rs/), [pnpm](https://pnpm.io/) and [cargo-leptos](https://github.com/leptos-rs/cargo-leptos). Use `pnpm install` to get Javascript dependencies. Then run `cargo leptos watch` which automatically rebuilds the project after changes. Open the site at [localhost:3000](http://localhost:3000/). You can login with user `ibis` and password `ibis`.
 
 By default the frontend runs on port 3000, which can be changed with env var `TRUNK_SERVE_PORT`. The backend port is 8081 and can be changed with `IBIS_BACKEND_PORT`.
 
diff --git a/assets/tailwind.css b/assets/tailwind.css
new file mode 100644
index 0000000..8d6981e
--- /dev/null
+++ b/assets/tailwind.css
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind typography;
diff --git a/package.json b/package.json
index d96e610..3dce4da 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
 	"devDependencies": {
+		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"tailwindcss": "^3.4.14"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17c9256..2c07948 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,9 @@ importers:
         specifier: ^4.12.13
         version: 4.12.13(postcss@8.4.47)
     devDependencies:
+      '@tailwindcss/forms':
+        specifier: ^0.5.9
+        version: 0.5.9(tailwindcss@3.4.14)
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.15(tailwindcss@3.4.14)
@@ -63,6 +66,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@tailwindcss/forms@0.5.9':
+    resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
+
   '@tailwindcss/typography@0.5.15':
     resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
     peerDependencies:
@@ -269,6 +277,10 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -518,6 +530,11 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@tailwindcss/forms@0.5.9(tailwindcss@3.4.14)':
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.4.14
+
   '@tailwindcss/typography@0.5.15(tailwindcss@3.4.14)':
     dependencies:
       lodash.castarray: 4.4.0
@@ -711,6 +728,8 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mini-svg-data-uri@1.4.4: {}
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
diff --git a/src/frontend/app.rs b/src/frontend/app.rs
index e612d59..fbd6e82 100644
--- a/src/frontend/app.rs
+++ b/src/frontend/app.rs
@@ -30,6 +30,7 @@ use leptos::{
     provide_context,
     use_context,
     view,
+    DynAttrs,
     IntoView,
     RwSignal,
     SignalGet,
@@ -90,6 +91,7 @@ pub fn App() -> impl IntoView {
     provide_context(create_rw_signal(global_state));
 
     view! {
+        <Html attr:data-theme="emerald"/>
         <>
             <Stylesheet id="daisyui" href="/daisyui.css" />
             <Stylesheet id="ibis" href="/ibis.css" />
diff --git a/src/frontend/mod.rs b/src/frontend/mod.rs
index 995713f..fec58e6 100644
--- a/src/frontend/mod.rs
+++ b/src/frontend/mod.rs
@@ -15,12 +15,6 @@ pub fn hydrate() {
     use crate::frontend::app::App;
     console_error_panic_hook::set_once();
     leptos::mount_to_body(App);
-
-    // set theme
-    // https://daisyui.com/docs/themes/
-    let document = web_sys::window().unwrap().document().unwrap();
-    let html_element = document.document_element().unwrap();
-    html_element.set_attribute("data-theme", "emerald").unwrap();
 }
 
 fn article_link(article: &DbArticle) -> String {
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a04ef0..754b9c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,6 @@ module.exports = {
     require('@tailwindcss/typography')
   ],
   daisyui: {
-    themes: ["emerald"],
+    themes: ["emerald"]
   },
-  darkMode: 'class'
 }