feat: Updates tailwind config to properly track swift files.

Sources/ViewControllerLive/Live.swift

@@ -7,7 +7,7 @@ extension ViewController: DependencyKey {
   public static var liveValue: ViewController {
     .init(view: { _ in
       MainPage {
-        h1(.class("text-red-100")) { "It works!" }
+        h1(.class("text-sky-500")) { "It works!" }
       }
     })
   }

Sources/ViewControllerLive/Views/MainPage.swift

@@ -1,7 +1,7 @@
 import Elementary
 
 struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
-  let title = "HVAC Toolbox"
+  let title = "HVAC-Toolbox"
   let lang = "en-US"
   let inner: @Sendable () -> Inner
 
@@ -30,16 +30,39 @@ struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
   }
 
   var body: some HTML {
-    main {
+    main(.class("bg-white dark:bg-gray-800")) {
-      div(.class("min-h-screen bg-linear-to-br from-green-50 to-blue-50")) {
+      div(.class("min-h-screen")) {
-        header(.class("header")) {
+        Header()
-          h1(.class("text-red-600")) { title }
+        div(.class("container")) {
-        }
           inner()
         }
       }
     }
+  }
+}
 
+struct Header: HTML {
+
+  var content: some HTML {
+    header(.class("bg-blue-500")) {
+      a(.href("/")) {
+        div(.class("flex flex-row gap-2 p-2 mb-8")) {
+          img(.src("/favicon-32x32.png"))
+          h2(.class("text-2xl text-white font-extrabold")) { "HVAC-Toolbox" }
+          // img(.class("text-yellow-300"), .src("/images/wind.svg"))
+          HTMLRaw("""
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+               class="w-8 h-8 text-yellow-300">
+            <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
+            <path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
+            <path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
+          </svg>
+          """)
+        }
+      }
+    }
+  }
 }
 
 protocol SendableHTMLDocument: HTMLDocument, Sendable {}

tailwind.config.js

@@ -3,101 +3,9 @@ const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./Sources/ViewControllerLive/Views/*.swift", "./Sources/ViewControllerLive/*.swift"],
+  content: [
-  theme: {
+    "./Sources/ViewControllerLive/Views/*.swift",
-    container: {
+    "./Sources/ViewControllerLive/*.swift",
-      center: true,
+    "./Public/images/*.svg"
-      padding: {
-        DEFAULT: "0",
-      },
-    },
-    screens: {
-      sm: "315px",
-      lg: "800px",
-    },
-    colors: {
-      inherit: "inherit",
-      transparent: "transparent",
-      white: "#f1f5f9",
-      orange: "#F5A87F",
-      red: colors.red,
-      blue: "#B4BEFE",
-      green: "#A6E3A1",
-      page: "#1E1E2E",
-      nav: "#0e1112",
-      sub: "#252f3f",
-      light: "#64748b",
-      gray: "#93a3b8",
-      pink: "#EE72F1",
-    },
-    extend: {
-      colors: {
-        sky: colors.sky,
-        blue: colors.blue
-      },
-      fontFamily: {
-        avenir: ["Avenir", ...defaultTheme.fontFamily.sans],
-        anonymous: ["Anonymous Pro", ...defaultTheme.fontFamily.mono],
-      },
-      typography: theme => ({
-        DEFAULT: {
-          css: {
-            maxWidth: "100%",
-            "--tw-prose-body": theme("colors.white"),
-            "--tw-prose-headings": theme("colors.white"),
-            "--tw-prose-code": theme("colors.white"),
-            "--tw-prose-pre-bg": theme("colors.sub"),
-            "--tw-prose-hr": theme("colors.light"),
-            "--tw-prose-bullets": theme("colors.gray"),
-            "--tw-prose-counters": theme("colors.gray"),
-            "--tw-prose-quotes": theme("colors.gray"),
-            "--tw-prose-quote-borders": theme("colors.gray"),
-            a: {
-              color: theme("colors.green"),
-              textDecoration: "none",
-              fontWeight: "400",
-            },
-            strong: {
-              color: theme("colors.white"),
-              fontWeight: "800",
-            },
-            pre: {
-              fontSize: "1rem",
-              lineHeight: "1.5rem",
-            },
-          },
-        },
-      }),
-    },
-  },
-  corePlugins: {
-    contain: false,
-    ringWidth: false,
-    backdropFilter: false,
-    transform: false,
-    filter: false,
-    backgroundOpacity: false,
-    textOpacity: false,
-  },
-  plugins: [
-
-    function ({ addBase, theme }) {
-      function extractColorVars(colorObj, colorGroup = "") {
-        return Object.keys(colorObj).reduce((vars, colorKey) => {
-          const value = colorObj[colorKey];
-
-          const newVars =
-            typeof value === "string"
-              ? { [`--color${colorGroup}-${colorKey}`]: value }
-              : extractColorVars(value, `-${colorKey}`);
-
-          return { ...vars, ...newVars };
-        }, {});
-      }
-
-      addBase({
-        ":root": extractColorVars(theme("colors")),
-      });
-    },
   ],
 };