cmd/tsconnect: add Tailwind CSS support and switch to using it

Integrates Tailwind CSS as an esbuild plugin that invokes the CLI
to process the input. It takes ~400ms, so it seems like the easiest
option (vs running a separate process for dev mode).

Existing minimal look and feel is replicated with Tailwind classes,
mostly to prove that the entire system works, including unused
class removal.

Also fixes yarn warnings about package.json not having a license
(which were showing up when invoking any scripts).

Fixes #5136
Fixes #5129

Signed-off-by: Mihai Parparita <mihai@tailscale.com>

cmd/tsconnect/src/index.css

@@ -2,90 +2,8 @@
 /* Use of this source code is governed by a BSD-style */
 /* license that can be found in the LICENSE file. */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "xterm/css/xterm.css";
-
-html {
-    background: #fff;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-body {
-    margin: 0;
-}
-
-button {
-    font-family: inherit;
-    border: solid 1px #ccc;
-    background: #fff;
-    color: #000;
-    padding: 4px 8px;
-    border-radius: 4px;
-}
-
-#header {
-    background: #f7f5f4;
-    border-bottom: 1px solid #eeebea;
-    padding: 12px;
-    display: flex;
-    align-items: center;
-}
-
-#header h1 {
-    margin: 0;
-    flex-grow: 1;
-}
-
-#header #state {
-    padding: 0 8px;
-    color: #444342;
-}
-
-#peers {
-    box-sizing: border-box;
-    width: 100%;
-    padding: 12px;
-}
-
-.login {
-    text-align: center;
-}
-
-.logout {
-    font-weight: bold;
-}
-
-.peer {
-    display: flex;
-    justify-content: space-between;
-    padding: 2px;
-}
-
-.peer:hover {
-    background: #eee;
-}
-
-.peer .name {
-    font-family: monospace;
-}
-
-.peer .ssh {
-    background-color: #cbf4c9;
-}
-
-.term-container {
-    padding: 12px;
-}
-
-.xterm-viewport.xterm-viewport {
-    scrollbar-width: thin;
-}
-.xterm-viewport::-webkit-scrollbar {
-    width: 10px;
-}
-.xterm-viewport::-webkit-scrollbar-track {
-    opacity: 0;
-}
-.xterm-viewport::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-color: #ffffff20;
-}

cmd/tsconnect/src/login.ts

@@ -9,8 +9,9 @@ export async function showLoginURL(url: string) {
     loginNode.remove()
   }
   loginNode = document.createElement("div")
-  loginNode.className = "login"
+  loginNode.className = "flex flex-col items-center justify-items-center"
   const linkNode = document.createElement("a")
+  linkNode.className = "text-blue-600 hover:underline"
   linkNode.href = url
   linkNode.target = "_blank"
   loginNode.appendChild(linkNode)
@@ -18,16 +19,15 @@ export async function showLoginURL(url: string) {
   try {
     const dataURL = await qrcode.toDataURL(url, { width: 512 })
     const imageNode = document.createElement("img")
+    imageNode.className = "mx-auto"
     imageNode.src = dataURL
     imageNode.width = 256
     imageNode.height = 256
-    imageNode.border = "0"
     linkNode.appendChild(imageNode)
   } catch (err) {
     console.error("Could not generate QR code:", err)
   }
 
-  linkNode.appendChild(document.createElement("br"))
   linkNode.appendChild(document.createTextNode(url))
 
   document.body.appendChild(loginNode)
@@ -48,7 +48,8 @@ export function showLogoutButton(ipn: IPN) {
     logoutButtonNode.remove()
   }
   logoutButtonNode = document.createElement("button")
-  logoutButtonNode.className = "logout"
+  logoutButtonNode.className =
+    "py-1 px-2 rounded bg-gray-500 border-gray-500 text-white hover:bg-gray-600 hover:border-gray-600 ml-2 font-bold"
   logoutButtonNode.textContent = "Logout"
   logoutButtonNode.addEventListener(
     "click",
@@ -57,7 +58,7 @@ export function showLogoutButton(ipn: IPN) {
     },
     { once: true }
   )
-  const headerNode = document.getElementById("header") as HTMLDivElement
+  const headerNode = document.getElementsByTagName("header")[0]!
   headerNode.appendChild(logoutButtonNode)
 }
 

cmd/tsconnect/src/ssh.ts

@@ -16,14 +16,15 @@ export function showSSHPeers(peers: IPNNetMapPeerNode[], ipn: IPN) {
 
   for (const peer of sshPeers) {
     const peerNode = document.createElement("div")
-    peerNode.className = "peer"
+    peerNode.className = "flex justify-between p-0.5 hover:bg-gray-100"
     const nameNode = document.createElement("div")
-    nameNode.className = "name"
+    nameNode.className = "font-mono"
     nameNode.textContent = peer.name
     peerNode.appendChild(nameNode)
 
     const sshButtonNode = document.createElement("button")
-    sshButtonNode.className = "ssh"
+    sshButtonNode.className =
+      "py-1 px-2 rounded bg-green-500 border-green-500 text-white hover:bg-green-600 hover:border-green-600"
     sshButtonNode.addEventListener("click", function () {
       ssh(peer.name, ipn)
     })
@@ -41,7 +42,7 @@ export function hideSSHPeers() {
 
 function ssh(hostname: string, ipn: IPN) {
   const termContainerNode = document.createElement("div")
-  termContainerNode.className = "term-container"
+  termContainerNode.className = "p-3"
   document.body.appendChild(termContainerNode)
 
   const term = new Terminal({