mirrors/tailscale
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Mihai Parparita
2022-07-25 17:51:06 -07:00
committed by Mihai Parparita
parent 389629258b
commit 617a2ec7cc
8 changed files with 485 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cmd/tsconnect/index.html
View File

@ -5,12 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="dist/index.css" />
</head>
<body>
<div id="header">
<h1>Tailscale Connect</h1>
<div id="state">Loading…</div>
<body class="flex flex-col min-h-screen">
<div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2 mb-6">
<header class="container mx-auto px-4 flex flex-row items-center">
<h1 class="text-3xl font-bold grow">Tailscale Connect</h1>
<div class="text-gray-600" id="state">Loading…</div>
</header>
</div>
<div id="peers"></div>
<div id="peers" class="container mx-auto px-4"></div>
<script src="dist/index.js"></script>
</body>
</html>