Style the comment form

wp-content/themes/twentynineteen-tailwindcss/comments.php

@@ -101,10 +101,10 @@ $discussion = twentynineteen_get_discussion_data();
 		// Show comment form at bottom if showing newest comments at the bottom.
 		if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
 			?>
-			<div class="comment-form-flex">
+			<div>
 				<span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
 				<?php twentynineteen_comment_form( 'asc' ); ?>
-				<h2 class="comments-title" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
+				<h2 class="text-3xl font-bold mt-10" aria-hidden="true"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></h2>
 			</div>
 			<?php
 		endif;

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

@@ -0,0 +1,29 @@
+.comment-form {
+  @apply mt-20;
+
+  > * {
+    @apply mt-4;
+  }
+
+  label {
+    @apply w-full block pb-2;
+    @apply text-sm text-gray-700;
+  }
+
+  input,
+  textarea {
+    @apply w-full p-3 border border-gray-400;
+
+    &:focus {
+      @apply bg-white outline-none border-blue-700;
+    }
+  }
+
+  .form-submit {
+    @apply mt-6;
+  }
+
+  input[type=submit] {
+    @apply w-auto;
+  }
+}

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

@@ -26,6 +26,7 @@ h2:before {
 }
 
 @import 'components/avatars.css';
+@import 'components/comment-form.css';
 @import 'components/comment-list.css';
 @import 'components/content.css';
 @import 'components/discussion-avatar-list.css';