Port shared CSS for tables to Tailwind

app/assets/stylesheets/application.tailwind.css

@@ -7,3 +7,4 @@
 @import "components/forms";
 @import "components/links";
 @import "components/notifications";
+@import "components/tables";

app/assets/stylesheets/components/tables.css

@@ -0,0 +1,22 @@
+@layer components {
+  table {
+    @apply w-full;
+  }
+
+  table thead tr {
+    @apply text-left;
+  }
+
+  table th {
+    @apply pb-3.5 text-sm font-normal uppercase text-gray-500;
+  }
+
+  table th:not(:last-of-type),
+  table td:not(:last-of-type) {
+    @apply pr-2;
+  }
+
+  table td {
+    @apply py-2;
+  }
+}

app/assets/stylesheets/legacy/_layout.scss

@@ -24,49 +24,6 @@ body#admin {
   }
 }
 
-#wrapper {
-  width: 100%;
-  text-align: center;
-
-  > header {
-    margin: 0 auto;
-    padding: 4rem 0;
-    text-align: center;
-    background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-                url('/img/bg-1.jpg');
-    background-size: cover;
-
-    @include media-max(small) {
-      padding: 3rem 0;
-    }
-
-    h1 {
-      color: #fff;
-
-      span.project-name {
-        display: none;
-      }
-    }
-
-    p.current-user {
-      color: rgba(255,255,255,0.6);
-
-      @include media-max(small) {
-        font-size: 0.85rem;
-      }
-    }
-
-    a {
-      color: rgba(255,255,255,0.6);
-      transition: color 0.1s linear;
-
-      &:hover, &:active {
-        color: #fff;
-      }
-    }
-  }
-}
-
 main {
   p {
     line-height: 1.5rem;
@@ -84,23 +41,6 @@ main {
       line-height: 1.5rem;
     }
   }
-
-  table {
-    width: 100%;
-
-    th {
-      color: $text-color-discreet;
-      font-weight: normal;
-      text-transform: uppercase;
-      font-size: 0.85rem;
-      padding-bottom: 0.825rem;
-    }
-
-    td {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-  }
 }
 
 .grid {