diff --git a/.gitignore b/.gitignore
index 82c337b..54c903b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@ package-lock.json
 AGENTS.md
 docs/
 theme-export/
+theme-export-v*/
 *.zip
 local-ghost/
 .docker/
+node_modules/
diff --git a/assets/built/tailwind.css b/assets/built/tailwind.css
new file mode 100644
index 0000000..186bee7
--- /dev/null
+++ b/assets/built/tailwind.css
@@ -0,0 +1 @@
+.visible{visibility:visible}.flex{display:flex}.hidden{display:none}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
\ No newline at end of file
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
new file mode 100644
index 0000000..7c05d4d
--- /dev/null
+++ b/assets/styles/tailwind.css
@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;
diff --git a/default.hbs b/default.hbs
index 2e9b87f..9d3b646 100644
--- a/default.hbs
+++ b/default.hbs
@@ -6,6 +6,7 @@
     <title>{{meta_title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" type="text/css" href="{{asset "built/tailwind.css"}}">
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">
 
     {{ghost_head}}
diff --git a/package.json b/package.json
index e817ca3..83509a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [
@@ -75,13 +75,18 @@
     }
   },
   "scripts": {
+    "build:tailwind": "tailwindcss -c ./tailwind.config.js -i ./assets/styles/tailwind.css -o ./assets/built/tailwind.css --minify",
     "dev": "npm run dev:ghost:start",
+    "dev:prepare": "npm run build:tailwind && npm run dev:sync",
     "dev:sync": "sh ./scripts/sync-theme.sh",
     "dev:seed": "node ./scripts/build-sample-content.js",
     "dev:seed:zip": "npm run dev:seed && cd seed && zip -q -r thred-inspired-sample-content.ghost.zip thred-inspired-sample-content.ghost.json",
-    "dev:ghost:start": "npm run dev:sync && docker compose up -d && printf '\\nGhost local: http://localhost:2368\\nGhost admin: http://localhost:2368/ghost\\n\\n'",
-    "dev:ghost:restart": "npm run dev:sync && docker compose restart ghost && printf '\\nGhost local: http://localhost:2368\\nGhost admin: http://localhost:2368/ghost\\n\\n'",
+    "dev:ghost:start": "npm run dev:prepare && docker compose up -d && printf '\\nGhost local: http://localhost:2368\\nGhost admin: http://localhost:2368/ghost\\n\\n'",
+    "dev:ghost:restart": "npm run dev:prepare && docker compose restart ghost && printf '\\nGhost local: http://localhost:2368\\nGhost admin: http://localhost:2368/ghost\\n\\n'",
     "dev:ghost:stop": "docker compose down",
     "zip": "zip -r theme.zip . -x '*.git*' -x 'node_modules/*' -x 'theme.zip'"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/partials/site/topbar.hbs b/partials/site/topbar.hbs
index 6259956..d46931e 100644
--- a/partials/site/topbar.hbs
+++ b/partials/site/topbar.hbs
@@ -1,6 +1,6 @@
 <header class="topbar">
     <div class="topbar__inner">
-        <div class="topbar__brand">
+        <div class="topbar__brand flex items-center gap-3">
             <button class="topbar__sidebar-toggle" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
                 <img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open" src="{{asset "icons/left_panel_open.svg"}}" alt="">
                 <img class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--close" src="{{asset "icons/left_panel_close.svg"}}" alt="">
@@ -16,7 +16,7 @@
                 <span class="search-shortcut">/</span>
             </button>
         </div>
-        <div class="topbar__actions">
+        <div class="topbar__actions flex items-center justify-end gap-2">
             <button class="icon-button icon-button--search-mobile" type="button" data-search-open aria-label="Open search">
                 <img class="search-trigger__icon" src="{{asset "icons/search.svg"}}" alt="">
             </button>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..ce5e746
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+    content: [
+        "./*.hbs",
+        "./partials/**/*.hbs",
+        "./assets/built/theme.js"
+    ],
+    theme: {
+        extend: {
+            colors: {
+                brand: "#ff4400",
+                "brand-strong": "#e13b00"
+            }
+        }
+    },
+    corePlugins: {
+        preflight: false
+    }
+}