Style comment list

wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css

@@ -0,0 +1,3 @@
+.avatar {
+  @apply rounded-full;
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css

@@ -0,0 +1,44 @@
+.comment-list .comment,
+.comment-author b.fn {
+  @apply mt-12 pl-24 relative w-full block;
+}
+
+.comment-list {
+  .comment-author .avatar,
+  .comment-author > a.url {
+    @apply absolute top-0 left-0;
+  }
+
+  .comment-author > b.fn {
+    @apply pl-0 text-2xl text-black;
+  }
+  .comment-author > b.fn a {
+    @apply text-inherit;
+  }
+
+  .comment-author img {
+    @apply w-16;
+  }
+
+  .comment-metadata {
+    @apply text-sm text-gray-900;
+  }
+
+  .comment-content {
+    @apply mt-8 text-base;
+  }
+
+  .comment-reply {
+    @apply mt-6 text-sm;
+  }
+}
+
+.post-author-badge {
+  @apply absolute top-0 left-0 ml-10 w-6 h-6;
+  @apply flex items-center;
+  @apply bg-blue-500 rounded-full p-1;
+
+  > svg {
+    @apply fill-current text-white block;
+  }
+}

wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css

@@ -1,3 +1,5 @@
+.markup,
+.comment-content,
 .entry-content {
   @apply font-serif text-lg leading-loose;
 

wp-content/themes/twentynineteen-tailwindcss/src/css/style.css

@@ -25,8 +25,10 @@ h2:before {
   @apply absolute opacity-0 pointer-events-none;
 }
 
-@import 'components/comments.css';
+@import 'components/avatars.css';
+@import 'components/comment-list.css';
 @import 'components/content.css';
+@import 'components/discussion-avatar-list.css';
 @import 'components/forms.css';
 @import 'components/post.css';
 @import 'components/widgets.css';