Merge pull request #46 from tightenco/kd-tailwind-fixes

Fixes for Tailwind upgrade

source/_assets/js/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-1 justify-end items-center text-right px-4">
         <div
-            class="absolute md:relative w-full justify-end bg-white pin-l pin-t z-10 mt-7 md:mt-0 px-4 md:px-0"
+            class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
             :class="{'hidden md:flex': ! searching}"
         >
             <label for="search" class="hidden">Search</label>
@@ -10,7 +10,7 @@
                 id="search"
                 v-model="query"
                 ref="search"
-                class="transition-fast relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-light outline-none cursor-pointer text-gray-700 px-4 pb-0"
+                class="transition-fast relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px"
                 :class="{ 'transition-border': query }"
                 autocomplete="off"
                 name="search"
@@ -22,12 +22,12 @@
 
             <button
                 v-if="query || searching"
-                class="absolute pin-t pin-r h-10 font-400 text-3xl text-blue hover:text-blue-600 focus:outline-none -mt-px pr-7 md:pr-3"
+                class="absolute top-0 right-0 leading-snug font-400 text-3xl text-blue-500 hover:text-blue-600 focus:outline-none pr-7 md:pr-3"
                 @click="reset"
             >&times;</button>
 
             <transition name="fade">
-                <div v-if="query" class="absolute pin-l pin-r md:pin-none w-full lg:w-3/4 text-left mb-4 md:mt-10">
+                <div v-if="query" class="absolute left-0 right-0 md:inset-auto w-full lg:w-3/4 text-left mb-4 md:mt-10">
                     <div class="flex flex-col bg-white border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-lg mx-4 md:mx-0">
                         <a
                             v-for="(result, index) in results"

source/_assets/sass/_base.scss

@@ -24,7 +24,7 @@ blockquote {
 }
 
 code {
-    @apply .bg-gray-400;
+    @apply .bg-gray-300;
     @apply .px-2;
     @apply .py-px;
     @apply .rounded;
@@ -134,6 +134,6 @@ pre {
 }
 
 ::selection {
-    @apply .bg-blue;
+    @apply .bg-blue-500;
     @apply .text-white;
-    }
+}

source/_assets/sass/_mailchimp.scss

@@ -59,7 +59,7 @@
 }
 
 #mc-embedded-subscribe {
-    @apply .bg-blue;
+    @apply .bg-blue-500;
     @apply .cursor-pointer;
     @apply .leading-normal;
     @apply .px-6;

source/_layouts/post.blade.php

@@ -21,7 +21,7 @@
             <a
                 href="{{ '/blog/categories/' . $category }}"
                 title="View posts in {{ $category }}"
-                class="inline-block bg-gray-400 hover:bg-blue-200 leading-loose tracking-wide text-gray-800 uppercase text-xs font-semibold rounded mr-4 px-3 pt-px"
+                class="inline-block bg-gray-300 hover:bg-blue-200 leading-loose tracking-wide text-gray-800 uppercase text-xs font-semibold rounded mr-4 px-3 pt-px"
             >{{ $category }}</a>
         @endforeach
     @endif

source/_nav/menu-responsive.blade.php

@@ -4,21 +4,21 @@
             <a
                 title="{{ $page->siteName }} Blog"
                 href="/blog"
-                class="nav-menu__item hover:text-blue {{ $page->isActive('/blog') ? 'active text-blue' : '' }}"
+                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/blog') ? 'active text-blue' : '' }}"
             >Blog</a>
         </li>
         <li class="pl-4">
             <a
                 title="{{ $page->siteName }} About"
                 href="/about"
-                class="nav-menu__item hover:text-blue {{ $page->isActive('/about') ? 'active text-blue' : '' }}"
+                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/about') ? 'active text-blue' : '' }}"
             >About</a>
         </li>
         <li class="pl-4">
             <a
                 title="{{ $page->siteName }} Contact"
                 href="/contact"
-                class="nav-menu__item hover:text-blue {{ $page->isActive('/contact') ? 'active text-blue' : '' }}"
+                class="nav-menu__item hover:text-blue-500 {{ $page->isActive('/contact') ? 'active text-blue' : '' }}"
             >Contact</a>
         </li>
     </ul>

source/_nav/menu-toggle.blade.php

@@ -1,4 +1,4 @@
-<button class="flex justify-center items-center bg-blue border border-blue h-10 px-5 rounded-full lg:hidden focus:outline-none"
+<button class="flex justify-center items-center bg-blue-500 border border-blue-500 h-10 px-5 rounded-full lg:hidden focus:outline-none"
     onclick="navMenu.toggle()"
 >
     <svg id="js-nav-menu-show" xmlns="http://www.w3.org/2000/svg"

source/contact.blade.php

@@ -26,7 +26,7 @@
                 id="contact-name"
                 placeholder="Jane Doe"
                 name="name"
-                class="block w-full border shadow rounded-lg outline-none mb-2 p-4"
+                class="block w-full border shadow rounded-lg outline-none mb-2 px-4 py-3"
                 required
             >
         </div>
@@ -41,7 +41,7 @@ class="block w-full border shadow rounded-lg outline-none mb-2 p-4"
                 id="contact-email"
                 placeholder="[email protected]"
                 name="email"
-                class="block w-full border shadow rounded-lg outline-none mb-2 p-4"
+                class="block w-full border shadow rounded-lg outline-none mb-2 px-4 py-3"
                 required
             >
         </div>
@@ -56,7 +56,7 @@ class="block w-full border shadow rounded-lg outline-none mb-2 p-4"
             id="contact-message"
             rows="4"
             name="message"
-            class="block w-full border shadow rounded-lg outline-none appearance-none mb-2 px-4 py-6"
+            class="block w-full border shadow rounded-lg outline-none appearance-none mb-2 px-4 py-3"
             placeholder="A lovely message here."
             required
         ></textarea>
@@ -66,7 +66,7 @@ class="block w-full border shadow rounded-lg outline-none appearance-none mb-2 p
         <input
             type="submit"
             value="Submit"
-            class="block bg-blue hover:bg-blue-600 text-white text-sm font-semibold tracking-wide uppercase shadow rounded-lg cursor-pointer px-6 py-3"
+            class="block bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold leading-snug tracking-wide uppercase shadow rounded-lg cursor-pointer px-6 py-3"
         >
     </div>
 </form>

tailwind.config.js

@@ -1,32 +1,13 @@
-const { colors } = require('tailwindcss/defaultTheme')
-
 module.exports = {
   theme: {
     extend: {
-      colors: {
-        gray: {
-          ...colors.gray,
-          '100': '#f9f9f9',
-          '200': '#ecf0f3',
-          '400': '#e2e8ee',
-          '800': '#3e4852',
-          '900': '#1f2e41'
-        },
-        blue: {
-          ...colors.blue,
-          '100': '#eff8ff',
-          '200': '#bcdefa',
-          '400': '#6cb2eb',
-          '500': '#3490dc',
-          '600': '#0174d4',
-          '800': '#1a4d8c',
-          '900': '#24548f'
-        }
-      },
       fontFamily: {
         sans: [
           'Nunito Sans'
-        ]
+        ],
+        mono: [
+          'monospace',
+        ],
       },
       lineHeight: {
         normal: '1.6',
@@ -57,10 +38,6 @@ module.exports = {
       '5xl': '2.625rem',
       '6xl': '10rem',
     },
-    lineHeight: {
-      normal: '1.6',
-      loose: '1.75',
-    },
   },
   variants: {
     borderRadius: ['responsive', 'focus'],