parcel/style/components/table.css

@layer components {
  div.table {
    @apply bg-slate-50 dark:bg-slate-800/25;
    @apply rounded-xl flex flex-col;

    table {
      @apply text-slate-800 dark:text-slate-200;
      @apply border-collapse;
      @apply w-full mb-8 text-sm;

      thead {
        tr {
          th {
            @apply border-b dark:border-slate-600 font-medium p-2;

            &.slim {
              @apply px-0;
            }

            &:first-child {
              @apply pl-4;
            }

            &:last-child {
              @apply pr-4;
            }
          }
        }
      }

      tbody {
        @apply bg-white dark:bg-slate-800;
        @apply text-slate-500 dark:text-slate-400;

        tr {
          td {
            @apply border-b border-slate-100 dark:border-slate-700 p-2;

            &.slim {
              @apply px-0;
            }

            &:first-child {
              @apply pl-4;
            }

            &:last-child {
              @apply pr-4;
            }
          }

          &:last-child {
            td {
              @apply border-slate-200 dark:border-slate-600;
            }
          }

          &:hover {
            @apply bg-slate-200 dark:bg-slate-700/25;
          }
        }
      }
    }
  }
}