From dd31ba48a3cbdf8afb9fd896b53c192f35c9e106 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 14 Jul 2026 10:02:38 -0400
Subject: [PATCH] =?UTF-8?q?fix(bitcoin-ui):=20vendor=20Tailwind=20CSS=20?=
 =?UTF-8?q?=E2=80=94=20drop=20cdn.tailwindcss.com?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Bitcoin UI loaded the Tailwind Play CDN at runtime: unstyled on
offline nodes + a production console warning. Replaced with a
hand-extracted static stylesheet (~125 utilities actually used, same
approach as lnd-ui), served from the container. podman build + runtime
smoke test verified (GET /tailwind.css 200, zero cdn references).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docker/bitcoin-ui/Dockerfile   |   1 +
 docker/bitcoin-ui/index.html   |   2 +-
 docker/bitcoin-ui/tailwind.css | 211 +++++++++++++++++++++++++++++++++
 3 files changed, 213 insertions(+), 1 deletion(-)
 create mode 100644 docker/bitcoin-ui/tailwind.css

diff --git a/docker/bitcoin-ui/Dockerfile b/docker/bitcoin-ui/Dockerfile
index 42367306..97a90bce 100644
--- a/docker/bitcoin-ui/Dockerfile
+++ b/docker/bitcoin-ui/Dockerfile
@@ -1,6 +1,7 @@
 FROM git.tx1138.com/lfg2025/nginx:1.27.4-alpine
 # Static site content.
 COPY index.html /usr/share/nginx/html/
+COPY tailwind.css /usr/share/nginx/html/
 COPY 50x.html /usr/share/nginx/html/
 COPY assets/ /usr/share/nginx/html/assets/
 #
diff --git a/docker/bitcoin-ui/index.html b/docker/bitcoin-ui/index.html
index 006e4922..5878b071 100644
--- a/docker/bitcoin-ui/index.html
+++ b/docker/bitcoin-ui/index.html
@@ -7,7 +7,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title id="pageTitle">Bitcoin Node - Archipelago</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/tailwind.css">
     <style>
         * {
             margin: 0;
diff --git a/docker/bitcoin-ui/tailwind.css b/docker/bitcoin-ui/tailwind.css
new file mode 100644
index 00000000..14de88a9
--- /dev/null
+++ b/docker/bitcoin-ui/tailwind.css
@@ -0,0 +1,211 @@
+/* Tailwind CSS utilities — manually extracted for bitcoin-ui */
+/* Replaces cdn.tailwindcss.com so the page styles offline and without
+   the Play-CDN production warning. Covers exactly the utility classes
+   used by index.html (static markup + JS-composed class strings).
+   Values match Tailwind v3.4 defaults. Same approach as docker/lnd-ui. */
+
+/* Minimal preflight subset (matches what the page relied on from the CDN) */
+*, ::before, ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+}
+img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
+button { cursor: pointer; background-color: transparent; background-image: none; }
+button, input, select, textarea {
+    font-family: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+h1, h2 { font-size: inherit; font-weight: inherit; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.inset-0 { inset: 0; }
+.z-50 { z-index: 50; }
+
+/* Display */
+.hidden { display: none; }
+.flex { display: flex; }
+.grid { display: grid; }
+
+/* Flex */
+.flex-col { flex-direction: column; }
+.flex-1 { flex: 1 1 0%; }
+.flex-shrink-0 { flex-shrink: 0; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+
+/* Gap */
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+
+/* Grid */
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+/* Width */
+.w-3 { width: 0.75rem; }
+.w-5 { width: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.w-12 { width: 3rem; }
+.w-16 { width: 4rem; }
+.w-full { width: 100%; }
+
+/* Height */
+.h-3 { height: 0.75rem; }
+.h-5 { height: 1.25rem; }
+.h-6 { height: 1.5rem; }
+.h-12 { height: 3rem; }
+.h-16 { height: 4rem; }
+.h-full { height: 100%; }
+
+/* Min/Max */
+.min-w-0 { min-width: 0px; }
+.min-h-\[1\.5rem\] { min-height: 1.5rem; }
+.min-h-\[5rem\] { min-height: 5rem; }
+.max-h-\[80vh\] { max-height: 80vh; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-4xl { max-width: 56rem; }
+
+/* Padding */
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+
+/* Margin */
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-5 { margin-bottom: 1.25rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.ml-2 { margin-left: 0.5rem; }
+
+/* Space between children */
+.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+
+/* Typography — Size */
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+
+/* Typography — Weight / Family / Transform */
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+.uppercase { text-transform: uppercase; }
+.tracking-wide { letter-spacing: 0.025em; }
+
+/* Typography — Wrapping */
+.break-all { word-break: break-all; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+
+/* Typography — Color */
+.text-white { color: #ffffff; }
+.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
+.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
+.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
+.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
+.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
+.text-green-300 { color: #86efac; }
+.text-green-400 { color: #4ade80; }
+.text-green-500 { color: #22c55e; }
+.text-red-300 { color: #fca5a5; }
+.text-yellow-300 { color: #fde047; }
+.text-amber-300 { color: #fcd34d; }
+.text-emerald-300 { color: #6ee7b7; }
+.text-orange-400 { color: #fb923c; }
+.text-orange-500 { color: #f97316; }
+
+/* Placeholder */
+.placeholder-white\/35::placeholder { color: rgba(255, 255, 255, 0.35); }
+
+/* Accent (checkboxes) */
+.accent-orange-500 { accent-color: #f97316; }
+
+/* Backgrounds */
+.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
+.bg-black\/80 { background-color: rgba(0, 0, 0, 0.8); }
+.bg-green-400 { background-color: #4ade80; }
+.bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.2); }
+.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
+.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
+
+/* Gradients */
+.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
+.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0)); }
+.to-yellow-400 { --tw-gradient-to: #facc15; }
+
+/* Border */
+.border { border-width: 1px; }
+.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-full { border-radius: 9999px; }
+
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+
+/* Opacity */
+.opacity-75 { opacity: 0.75; }
+
+/* Backdrop filter */
+.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
+
+/* Transitions */
+.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.duration-500 { transition-duration: 500ms; }
+
+/* Responsive: md (768px+) */
+@media (min-width: 768px) {
+    .md\:flex-row { flex-direction: row; }
+    .md\:items-center { align-items: center; }
+    .md\:gap-4 { gap: 1rem; }
+    .md\:gap-6 { gap: 1.5rem; }
+    .md\:w-auto { width: auto; }
+    .md\:mt-0 { margin-top: 0; }
+    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
+}
+
+/* Responsive: lg (1024px+) */
+@media (min-width: 1024px) {
+    .lg\:flex-row { flex-direction: row; }
+    .lg\:items-start { align-items: flex-start; }
+    .lg\:justify-between { justify-content: space-between; }
+    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+/* Responsive: xl (1280px+) */
+@media (min-width: 1280px) {
+    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}