Update dashboard side to tailwindcss

dashboard/src/style/app.pcss

@@ -5,6 +5,7 @@
 @import "~vue-material-design-icons/styles.css";
 
 @import "components.pcss";
+@import "content.pcss";
 
 @import "docs.pcss";
 

dashboard/src/style/components.pcss

@@ -1,3 +1,12 @@
+.link {
+  @apply text-blue-400;
+  @apply underline;
+
+  &:hover {
+    @apply text-blue-200;
+  }
+}
+
 .inline-code {
   @apply inline-block;
   @apply bg-gray-800;

dashboard/src/style/content.pcss

@@ -0,0 +1,45 @@
+.main-content {
+  & h1 {
+    @apply text-5xl;
+    @apply font-semibold;
+    @apply leading-none;
+    @apply mb-4;
+  }
+
+  & h2 {
+    @apply text-2xl;
+    @apply font-semibold;
+    @apply mt-2;
+    @apply mb-1;
+  }
+
+  & h3 {
+    @apply font-semibold;
+    @apply mb-1;
+  }
+
+  & p {
+    @apply mb-4;
+  }
+
+  & a:not([class]) {
+    @apply link;
+  }
+
+  & ul:not([class]) {
+    @apply list-disc;
+    @apply mb-4;
+
+    & li {
+      @apply ml-6;
+    }
+  }
+
+  & code:not([class]) {
+    @apply inline-code;
+  }
+
+  & .expandable {
+    max-width: 600px;
+  }
+}

dashboard/src/style/docs.pcss

@@ -3,58 +3,3 @@
     @apply underline;
   }
 }
-
-.docs-content {
-  & h1 {
-    @apply text-5xl;
-    @apply font-semibold;
-    @apply leading-none;
-    @apply pb-4;
-  }
-
-  & h2 {
-    @apply text-2xl;
-    @apply font-semibold;
-    @apply pt-2;
-    @apply pb-1;
-  }
-
-  & h3 {
-    @apply font-semibold;
-    @apply pb-1;
-  }
-
-  & p {
-    @apply pb-4;
-
-    & code {
-      @apply inline-code;
-    }
-  }
-
-  & a:not([class]) {
-    @apply text-blue-400;
-    @apply underline;
-
-    &:hover {
-      @apply text-blue-200;
-    }
-  }
-
-  & ul:not([class]) {
-    @apply list-disc;
-    @apply mb-4;
-
-    & li {
-      @apply ml-6;
-    }
-
-    & code {
-      @apply inline-code;
-    }
-  }
-
-  & .expandable {
-    max-width: 600px;
-  }
-}