Split mix commands

wp-content/themes/twentynineteen-tailwindcss/assets/css/app.css

@@ -1,3 +1,18 @@
+/*
+Theme Name: Twenty Nineteen - Tailwind CSS
+Template: twentynineteen
+*/
+
+/* Tailwind base styles */
+@import 'tailwindcss/base';
+
+/* Custom base styles */
+@import 'base';
+
+/* Tailwind components */
+@import 'tailwindcss/components';
+
+/* Custom components */
 @import 'components/avatars';
 @import 'components/comment-form';
 @import 'components/comment-list';
@@ -9,3 +24,6 @@
 @import 'components/post';
 @import 'components/screen-reader-text';
 @import 'components/widgets';
+
+/* Tailwind utilities */
+@import 'tailwindcss/utilities';

wp-content/themes/twentynineteen-tailwindcss/assets/css/base.css

@@ -4,10 +4,10 @@ a {
 
 a:hover,
 a:focus {
-  @apply text-blue-800
+  @apply text-blue-800;
 }
 
 h2:before {
   content: '';
-  @apply w-10 block mb-4 border-t-2 border-gray-600
+  @apply w-10 block border-t-2 border-gray-600 mb-4;
 }

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

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

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

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

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

@@ -0,0 +1,46 @@
+.comment-list .comment,
+.comment-author b.fn {
+  @apply mt-12 pl-24 relative w-full block;
+}
+
+.comment-list {
+  .comment-author .avatar {
+    @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 flex;
+  }
+  .comment-metadata > .edit-link-sep {
+    @apply mx-1;
+  }
+
+  .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/assets/css/components/content.css

@@ -4,42 +4,42 @@
   @apply font-serif text-lg leading-loose;
 
   @screen md {
-    @apply text-xl
+    @apply text-xl;
   }
 
   > * {
     @apply max-w-xl;
 
     @screen 2xl {
-      @apply max-w-full
+      @apply max-w-full;
     }
   }
 
   h2 {
-    @apply mt-8 -mb-5 text-2xl font-bold
+    @apply text-2xl font-bold mt-8 -mb-5;
   }
 
   a {
     @apply text-blue-700 underline;
 
     &:hover {
-      @apply text-blue-800 no-underline
+      @apply text-blue-800 no-underline;
     }
   }
 
   * + * {
-    @apply mt-6
+    @apply mt-6;
   }
 
   p {
-    @apply font-serif
+    @apply font-serif;
   }
 
   ul {
-    @apply ml-6 list-disc
+    @apply list-disc ml-6;
   }
 
   li + li {
-    @apply mt-0
+    @apply mt-0;
   }
 }

wp-content/themes/twentynineteen-tailwindcss/assets/css/components/discussion-avatar-list.css

@@ -1,15 +1,15 @@
 .discussion-avatar-list {
-  @apply flex
+    @apply flex;
 }
 
 .discussion-avatar-list li {
   @apply mb-1;
 
   &:not(:first-child) {
-    @apply -ml-3
+    @apply -ml-3;
   }
 }
 
 .discussion-avatar-list img {
-  @apply w-10 rounded-full
+    @apply rounded-full w-10;
 }

wp-content/themes/twentynineteen-tailwindcss/assets/css/components/forms.css

@@ -0,0 +1,22 @@
+textarea,
+input[type=search] {
+  @apply border border-gray-400 p-2 mb-2;
+
+  &:focus {
+    @apply outline-none bg-gray-100;
+  }
+
+  &::placeholder {
+    @apply text-black;
+  }
+}
+
+input[type=submit] {
+  @apply bg-blue-700 text-white block text-lg font-bold cursor-pointer;
+  @apply py-3 px-6 rounded mt-2;
+
+  &:hover,
+  &:focus {
+    @apply bg-blue-800;
+  }
+}

wp-content/themes/twentynineteen-tailwindcss/assets/css/components/page-title.css

@@ -0,0 +1,7 @@
+.page-title {
+  @apply font-serif text-2xl text-gray-700 mb-16;
+
+  span {
+    @apply font-sans font-bold text-black block
+  }
+}

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

@@ -1,8 +1,8 @@
 .entry-title {
-  @apply mt-6 mb-8 text-black text-4xl font-bold;
+  @apply text-black text-4xl font-bold mt-6 mb-8;
 
   @screen md {
-    @apply text-5xl
+    @apply text-5xl;
   }
 }
 
@@ -10,18 +10,18 @@
   @apply text-inherit;
 
   &:hover {
-    @apply text-gray-800 no-underline
+    @apply text-gray-800 no-underline;
   }
 }
 
 .entry-header,
 .entry-meta,
 .entry-footer {
-  @apply w-full flex flex-wrap
+  @apply flex flex-wrap w-full;
 }
 
 .entry-footer {
-  @apply mt-8
+  @apply mt-8;
 }
 
 .byline,
@@ -32,6 +32,6 @@
   @apply flex items-center mr-4 mb-2;
 
   svg {
-    @apply mr-2 fill-current text-gray-600
+    @apply mr-2 fill-current text-gray-600;
   }
 }

wp-content/themes/twentynineteen-tailwindcss/assets/css/components/screen-reader-text.css

@@ -0,0 +1,3 @@
+.screen-reader-text {
+  @apply absolute opacity-0 pointer-events-none;
+}

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

@@ -104,7 +104,7 @@ $discussion = twentynineteen_get_discussion_data();
 			<div>
 				<span class="screen-reader-text"><?php _e( 'Leave a comment', 'twentynineteen' ); ?></span>
 				<?php twentynineteen_comment_form( 'asc' ); ?>
-				<h2 class="mt-10 text-3xl font-bold" 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/functions.php

@@ -19,9 +19,9 @@ add_action('widgets_init', function () {
     array(
       'name' => 'Sidebar',
       'id' => 'sidebar-1',
-      'before_title' => '<h2 class="mt-6 mb-4 text-2xl font-bold tracking-tight md:text-5xl">',
+      'before_title' => '<h2 class="text-2xl md:text-5xl font-bold mt-6 mb-4 tracking-tight">',
       'after_title' => '</h2>',
-      'before_widget' => '<div class="w-full mt-10 px-6 text-2xl md:w-1/2">',
+      'before_widget' => '<div class="mt-10 w-full md:w-1/2 px-6 text-2xl">',
       'after_widget' => '</div>',
     )
   );

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

@@ -7,11 +7,11 @@
     <?php wp_head(); ?>
   </head>
   <body class="font-sans bg-white text-gray-900 leading-normal antialiased">
-    <div class="max-w-5xl mx-auto px-4 2xl:max-w-6xl">
+    <div class="max-w-5xl 2xl:max-w-6xl mx-auto px-4">
       <header class="mt-16 mb-24">
         <div>
           <p class="text-2xl">
-            <a href="<?php echo esc_url(home_url( '/' )); ?>" class="text-black hover:text-gray-800">
+            <a href="<?php echo esc_url(home_url( '/' )); ?>" class="text-black hover:text-gray-800 hover:underline_">
               <?php bloginfo('slogan'); ?>
             </a>
             <span class="font-serif font-thin text-gray-700">

wp-content/themes/twentynineteen-tailwindcss/resources/css/app.css

@@ -1,12 +0,0 @@
-/*
-Theme Name: Twenty Nineteen - Tailwind CSS
-Template: twentynineteen
-*/
-
-@import 'tailwindcss/base';
-@import 'custom-base';
-
-@import 'tailwindcss/components';
-@import 'custom-components';
-
-@import 'tailwindcss/utilities';

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

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

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

@@ -1,46 +0,0 @@
-.comment-list .comment,
-.comment-author b.fn {
-  @apply w-full block mt-12 pl-24 relative
-}
-
-.comment-list {
-  .comment-author .avatar {
-    @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 flex text-sm text-gray-900
-  }
-  .comment-metadata > .edit-link-sep {
-    @apply mx-1
-  }
-
-  .comment-content {
-    @apply mt-8 text-base
-  }
-
-  .comment-reply {
-    @apply mt-6 text-sm
-  }
-}
-
-.post-author-badge {
-  @apply h-6 w-6 ml-10 p-1 flex items-center;
-  @apply absolute top-0 left-0;
-  @apply bg-blue-500 rounded-full;
-
-  > svg {
-    @apply block fill-current text-white
-  }
-}

wp-content/themes/twentynineteen-tailwindcss/resources/css/components/forms.css

@@ -1,22 +0,0 @@
-textarea,
-input[type=search] {
-  @apply p-2 mb-2 border border-gray-400;
-
-  &:focus {
-    @apply outline-none bg-gray-100
-  }
-
-  &::placeholder {
-    @apply text-black
-  }
-}
-
-input[type=submit] {
-  @apply block py-3 px-6 mt-2 rounded;
-  @apply bg-blue-700 text-white text-lg font-bold cursor-pointer;
-
-  &:hover,
-  &:focus {
-    @apply bg-blue-800
-  }
-}

wp-content/themes/twentynineteen-tailwindcss/resources/css/components/page-title.css

@@ -1,7 +0,0 @@
-.page-title {
-  @apply mb-16 font-serif text-2xl text-gray-700;
-
-  span {
-    @apply block font-sans font-bold text-black
-  }
-}

wp-content/themes/twentynineteen-tailwindcss/resources/css/components/screen-reader-text.css

@@ -1,3 +0,0 @@
-.screen-reader-text {
-  @apply absolute opacity-0 pointer-events-none
-}

wp-content/themes/twentynineteen-tailwindcss/webpack.mix.js

@@ -2,7 +2,7 @@ let mix = require('laravel-mix')
 
 mix.disableNotifications()
 
-mix.postCss('resources/css/app.css', 'style.css', [
+mix.postCss('assets/css/app.css', 'style.css', [
   require('postcss-import')(),
   require('tailwindcss')(),
   require('postcss-nested')()
@@ -12,8 +12,11 @@ mix.browserSync({
   proxy: 'wordcamp2019.docksal',
   notify: false,
   open: false,
-  files: ['**/*.php', {
-    match: 'style.css',
-    fn: function (event, file) { this.reload() }
-  }]
+  files: [
+    '**/*.php',
+    {
+      match: 'style.css',
+      fn: function (event, file) { this.reload() }
+    }
+  ]
 })