Adding tailwindcss build

.gitignore

@@ -0,0 +1 @@
+node_modules/

Dockerfile

@@ -1,2 +1,2 @@
 FROM nginx
-COPY . /usr/share/nginx/html
+COPY ./src /usr/share/nginx/html

Makefile

@@ -2,6 +2,10 @@ serve:
 	python3 -m http.server 8080
 .PHONY: serve
 
+watch:
+	npx tailwindcss -i ./src/dev.css -o ./src/main.css --watch
+.PHONY: watch
+
 build:
 	echo "Not implemented yet..."
 .PHONY: build

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.4.9"
+  }
+}

scatch.js

@@ -0,0 +1,12 @@
+port.onconnect = async () => {
+    console.log("connected to port")
+    connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
+    connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
+    connectButton.textContent = 'Disconnect';
+};
+
+port.ondisconnect = async () => {
+    connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500');
+    connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');
+    connectButton.textContent = 'Connect';
+};

src/dev.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Serial Console</title>
     <link rel="icon" type="image/x-icon" href="./favicon.ico">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" type="text/css" href="./main.css">
     <style>
       select:focus {
         outline: none;

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+