refactor: extract common table styles

src/assets/styles/tailwind.css

@@ -151,4 +151,29 @@ thead .fc-day-selected:hover {
   .btn-default {
     @apply tw-bg-gray-100 tw-border tw-border-solid tw-border-black/5 tw-transition hover:enabled:tw-brightness-95 focus-visible:enabled:tw-brightness-95;
   }
+
+  .aura-table-wrapper {
+    @apply tw-bg-white tw-rounded tw-shadow tw-mb-12;
+    contain: paint;
+  }
+
+  .aura-table {
+    @apply tw-border-separate tw-border-spacing-0 tw-w-full;
+
+    & thead th {
+      @apply tw-text-sm tw-text-gray-500 tw-border-0 tw-border-b tw-border-solid tw-border-gray-200 tw-font-bold;
+    }
+
+    & :is(th, td) {
+      @apply tw-py-2 tw-px-4 tw-font-normal;
+    }
+
+    & :is(th, td):first-child {
+      @apply tw-pl-6;
+    }
+
+    & :is(th, td):first-child {
+      @apply tw-pr-6;
+    }
+  }
 }

src/components/shows/TimeSlotList.vue

@@ -20,8 +20,8 @@
       </Popover>
     </header>
 
-    <div class="tw-bg-white tw-rounded tw-shadow tw-mb-12" style="contain: paint">
-      <table ref="tableEl" class="tw-table">
+    <div class="aura-table-wrapper">
+      <table ref="tableEl" class="aura-table">
         <thead class="tw-sticky tw-top-0 tw-bg-white">
           <tr>
             <th></th>
@@ -102,28 +102,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.tw-table {
-  @apply tw-border-separate tw-border-spacing-0 tw-w-full;
-}
-
-.tw-table th {
-  @apply tw-text-sm tw-text-gray-500 tw-border-0 tw-border-b tw-border-solid tw-border-gray-200;
-}
-
-.tw-table th,
-.tw-table :deep(td) {
-  @apply tw-py-2 tw-px-4;
-}
-
-.tw-table th:first-child,
-.tw-table :deep(td:first-child) {
-  @apply tw-pl-6;
-}
-
-.tw-table th:first-child,
-.tw-table :deep(td:last-child) {
-  @apply tw-pr-6;
-}
-</style>