v0.1.17 Tailwind 부분 도입 기반 추가

.gitignore

@@ -5,6 +5,8 @@ package-lock.json
 AGENTS.md
 docs/
 theme-export/
+theme-export-v*/
 *.zip
 local-ghost/
 .docker/
+node_modules/

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)}

assets/styles/tailwind.css

@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;

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}}

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: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:sync && docker compose restart ghost && 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"
   }
 }

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>

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
+    }
+}