@@ -1,2 +1,3 @@
 .direnv/
 build/
+static/tw.css

@@ -1,3 +1,5 @@
+preBuild:
+  - tailwindcss -i input.css -o static/tw.css
 title: tangled.sh engineering blog
 # note the trailing slash!
 url: "https://tangled.sh"

@@ -33,7 +33,7 @@ vite.packages.${system}.vite
               pkgs.gotools
               pkgs.gnumake
               pkgs.entr
-              pkgs.awscli2
+              pkgs.tailwindcss
             ];
           };
         }

@@ -0,0 +1,156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+    @font-face {
+        font-family: "iA Writer Quattro S";
+        src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
+            format("truetype");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Quattro S";
+        src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Quattro S";
+        src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
+        font-weight: normal;
+        font-style: italic;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Quattro S";
+        src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
+            format("truetype");
+        font-weight: bold;
+        font-style: italic;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+
+    @font-face {
+        font-family: "iA Writer Mono S";
+        src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Mono S";
+        src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Mono S";
+        src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
+        font-weight: normal;
+        font-style: italic;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    @font-face {
+        font-family: "iA Writer Mono S";
+        src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
+            format("truetype");
+        font-weight: bold;
+        font-style: italic;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+
+    @font-face {
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        font-feature-settings:
+            "calt" 1,
+            "kern" 1;
+    }
+    h1 {
+        @apply text-2xl;
+        @apply font-sans;
+        @apply text-black;
+        @apply py-4;
+    }
+
+    ::selection {
+        @apply bg-yellow-400;
+        @apply text-black;
+        @apply bg-opacity-30;
+    }
+
+    html {
+        letter-spacing: -0.01em;
+        word-spacing: -0.07em;
+    }
+
+    @layer base {
+        a {
+          @apply no-underline text-black hover:underline hover:text-gray-800;
+        }
+
+        label {
+            @apply block text-sm text-black;
+        }
+        input {
+            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+        }
+        textarea {
+            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+        }
+    }
+
+    @layer components {
+        .btn {
+            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
+            justify-center bg-transparent px-2 pb-[0.2rem] text-base
+            text-gray-900 before:absolute before:inset-0 before:-z-10
+            before:block before:rounded-sm before:border before:border-gray-200
+            before:bg-white before:drop-shadow-sm
+            before:content-[''] hover:before:border-gray-300
+            hover:before:bg-gray-50
+            hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
+            focus:outline-none focus-visible:before:outline
+            focus-visible:before:outline-4 focus-visible:before:outline-gray-500
+            active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
+        }
+    }
+    @layer utilities {
+        .error {
+            @apply py-1 text-red-400;
+        }
+        .success {
+            @apply py-1 text-black;
+        }
+    }
+}

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./appview/pages/templates/**/*.html"],
+  theme: {
+    container: {
+      padding: "2rem",
+      center: true,
+      screens: {
+        sm: "540px",
+        md: "650px",
+        lg: "900px",
+        xl: "1100px",
+        "2xl": "1300x",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["iA Writer Quattro S", "Inter", "system-ui", "sans-serif", "ui-sans-serif"],
+        mono: ["iA Writer Mono S", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
+      },
+    },
+  },
+};