Add Tailwind CSS (#425)

* Install and configure tailwind

* Fix style issues

src/styles/global.css

@@ -126,12 +126,6 @@
 	}
 }
 
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
 ::selection {
 	background-color: var(--selection);
 }
@@ -1444,7 +1438,7 @@ main.has-project {
 	box-shadow: none;
 }
 
-.container {
+.legacy-container {
 	padding: 16px;
 	max-width: 960px;
 	margin: 0 auto;
@@ -2421,8 +2415,8 @@ hr {
 	background-color: var(--background-1);
 	border: 3px solid var(--text-1);
 	border-radius: 10px;
-	width: 10px;
-	height: 10px;
+	width: 16px;
+	height: 16px;
 }
 
 .whats-new-entry > a {
@@ -2650,6 +2644,7 @@ hr {
 	padding: 8px 16px;
 	line-height: 1.2;
 	font-size: 90%;
+	list-style-type: decimal;
 }
 
 .guide-content {

src/styles/main.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+	line-height: normal;
+}
+
+a {
+	text-decoration: underline;
+}
+
+input::placeholder {
+	color: rgb(117, 117, 117);
+}

src/styles/nodes.css

@@ -165,7 +165,7 @@
   background-color: var(--node-background-input);
 }
 
-.object-node > .node-header > .collapse {
+.object-node > .node-header > .node-collapse {
   cursor: pointer;
 }
 
@@ -215,40 +215,37 @@ button:not([disabled]).selected:hover {
   background-color: var(--node-selected-hover);
 }
 
-.collapse svg {
+.node-collapse svg {
   fill: var(--node-text);
 }
 
-.collapse.closed,
+.node-collapse.closed,
 button.add {
   background-color: var(--node-add);
   border-color: var(--node-add-border);
 }
 
-.collapse:not([disabled]).closed:hover,
+.node-collapse:not([disabled]).closed:hover,
 button:not([disabled]).add:hover {
   background-color: var(--node-add-hover);
 }
 
-.collapse.open,
+.node-collapse.open,
 button.remove {
   background-color: var(--node-remove);
   border-color: var(--node-remove-border);
 }
 
-.collapse:not([disabled]).open:hover,
+.node-collapse:not([disabled]).open:hover,
 button:not([disabled]).remove:hover {
   background-color: var(--node-remove-hover);
 }
 
 .node-header > button svg {
-  display: inline-block;
-  position: relative;
-  top: 2px;
   fill: var(--node-text);
 }
 
-.node-header > button.collapse:last-child,
+.node-header > button.node-collapse:last-child,
 .node-header > button.add:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;