Extract entry-title into a component

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

@@ -0,0 +1,15 @@
+.entry-title {
+  @apply text-black text-4xl font-bold mt-6 mb-8;
+
+  @screen md {
+    @apply text-5xl
+  }
+}
+
+.entry-title a {
+  @apply text-inherit;
+
+  &:hover {
+    @apply text-gray-800 no-underline
+  }
+}

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

@@ -39,6 +39,8 @@ h2 {
   @apply absolute opacity-0 pointer-events-none
 }
 
+@import 'components/post.css';
+
 .content {
   @apply font-serif text-lg leading-loose;
   @screen md {

wp-content/themes/twentynineteen-tailwindcss/tailwind.config.js

@@ -3,6 +3,7 @@ module.exports = {
     extend: {
       colors: {
         'gray-600': '#767676',
+        inherit: 'inherit',
       },
     },
   },

wp-content/themes/twentynineteen-tailwindcss/template-parts/content/content.php

@@ -18,9 +18,9 @@
       printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
     }
     if ( is_singular() ) :
-      the_title( '<h1 class="text-4xl md:text-5xl font-bold mt-6 mb-8">', '</h1>' );
+      the_title( '<h1 class="entry-title">', '</h1>' );
     else :
-      the_title( sprintf( '<h2 class="text-4xl md:text-5xl font-bold mt-6 mb-8"><a class="text-black hover:text-gray-800 hover:no-underline" href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
+      the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
     endif;
     ?>
   </header><!-- .entry-header -->