Re-order classes

src/App.vue

@@ -4,7 +4,7 @@
 
     <header class="bg-blue-300">
       <div class="py-4 text-white">
-        <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
+        <div id="header" class="mx-auto px-4 relative xl:max-w-6xl">
           <div class="flex flex-col-reverse">
             <div class="flex items-center">
               <img src="@/assets/img/logo.svg" alt="" class="mr-4">
@@ -33,10 +33,10 @@
           </p>
         </drupal-message>
 
-        <div class="md:flex md:flex-row-reverse -mx-6">
+        <div class="-mx-6 md:flex md:flex-row-reverse">
           <main id="main" class="flex-1 px-6 pb-8 lg:pb-12">
             <div class="font-serif">
-              <h1 class="text-3xl font-normal leading-tight mb-1">Welcome to {{ title }}</h1>
+              <h1 class="mb-1 text-3xl font-normal leading-tight">Welcome to {{ title }}</h1>
               <p>No front page content has been created yet.</p>
               <p>Follow the <a href="#0">User Guide</a> to start building your site.</p>
             </div>
@@ -44,15 +44,15 @@
             <div class="mt-6 lg:mt-10"><a href="#0"><img src="@/assets/img/feed.svg" alt=""></a></div>
           </main>
 
-          <aside class="w-full md:w-1/3 lg:w-1/4 px-6 -mb-4">
+          <aside class="w-full px-6 -mb-4 md:w-1/3 lg:w-1/4">
             <sidebar-block>
               <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300 mb-3">Search</h2>
 
               <div>
                 <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
+                  <input type="text" class="w-full py-1 px-2 border border-solid border-grey-400 xl:w-auto">
 
-                  <button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
+                  <button type="submit" class="flex-none ml-2 px-3 rounded-full bg-grey-200 border-b border-solid border-grey-500">
                     <img src="@/assets/img/search.svg" class="block">
                   </button>
                 </form>

src/components/DrupalMessage.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
-    <div class="py-4 pl-3 pr-4 mb-6 border flex items-center rounded-sm" :class="classes">
+    <div class="flex items-center py-4 pl-3 pr-4 mb-6 border rounded-sm" :class="classes">
       <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-300 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
       <slot></slot>
     </div>

src/components/MainMenu.vue

@@ -2,7 +2,7 @@
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-100 text-sm text-grey-600 text-left focus:outline-none"
+      class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden"
       @click="toggle"
     >
       <div class="flex items-center justify-between">
@@ -15,16 +15,16 @@
       </div>
     </button>
 
-    <div class="xl:max-w-6xl mx-auto px-4 sm:block" :class="[ isOpen ? 'block' : 'hidden' ]">
+    <div class="mx-auto px-4 sm:block xl:max-w-6xl" :class="[ isOpen ? 'block' : 'hidden' ]">
       <div class="mt-2 sm:mt-0">
-        <nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
+        <nav class="flex flex-wrap pb-1 -mx-3 sm:-mx-0 md:p-0">
           <div
-            class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
+            class="w-full inline-block px-1 mb-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"
             :key="link.title"
             v-for="(link, index) in links"
           >
             <a
-              class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
+              class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg"
               :class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
               :href="link.href"
             >

src/components/SidebarBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-100 p-4 mb-4">
+  <div class="p-4 mb-4 bg-grey-100">
     <slot></slot>
   </div>
 </template>

src/components/SkipLink.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <a href="#main-content" class="skip-link text-white bg-black-60 py-1 px-2 rounded-b-lg focus:no-underline focus:outline-none">Skip to main content</a>
+    <a href="#main-content" class="skip-link py-1 px-2 rounded-b-lg text-white bg-black-60 focus:no-underline focus:outline-none">Skip to main content</a>
   </div>
 </template>