diff --git a/assets/css/app.css b/assets/css/app.css
index 645b5998..54381dcb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -19,7 +19,7 @@ img {
 }
 
 a {
-  @apply text-blue no-underline;
+  @apply text-blue-600 no-underline;
 
   &:hover {
     @apply underline
diff --git a/assets/css/components/blockquote.css b/assets/css/components/blockquote.css
index ebd9152a..61c751e7 100644
--- a/assets/css/components/blockquote.css
+++ b/assets/css/components/blockquote.css
@@ -1,3 +1,3 @@
 blockquote {
-  @apply border-l-4 border-blue pl-4 px-6 py-2
+  @apply border-l-4 border-blue-600 pl-4 px-6 py-2
 }
diff --git a/assets/css/components/button.css b/assets/css/components/button.css
index 3ccbabca..33e1b668 100644
--- a/assets/css/components/button.css
+++ b/assets/css/components/button.css
@@ -1,5 +1,5 @@
 .button {
-  @apply bg-blue border-blue border inline-block text-white no-underline py-2 px-3 rounded text-sm;
+  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
 
   &:focus {
     @apply py-2 px-3 m-0
@@ -8,6 +8,6 @@
   &:active,
   &:focus,
   &:hover {
-    @apply bg-white text-blue
+    @apply bg-white text-blue-600
   }
 }
diff --git a/assets/css/components/markup.css b/assets/css/components/markup.css
index d55dce98..4f52baa2 100644
--- a/assets/css/components/markup.css
+++ b/assets/css/components/markup.css
@@ -22,14 +22,18 @@
     }
   }
 
+  ul {
+    @apply list-disc ml-5
+  }
+
   code {
-    @apply bg-grey-lighter font-mono text-sm
+    @apply bg-gray-200 font-mono text-sm
   }
 
   p,
   li {
     code {
-      @apply inline-block border border-grey-light font-bold mx-px p-1 leading-none
+      @apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
     }
   }
 
@@ -44,6 +48,6 @@
   }
 
   figcaption {
-    @apply italic text-sm text-grey-darker text-center mb-0 mt-1
+    @apply italic text-sm text-gray-800 text-center mb-0 mt-1
   }
 }
diff --git a/assets/css/components/note.css b/assets/css/components/note.css
index 0d8f1174..7f9909cd 100644
--- a/assets/css/components/note.css
+++ b/assets/css/components/note.css
@@ -1,5 +1,5 @@
 .note {
-  @apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded;
+  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
 
   > *:not(:first-child) {
     @apply mt-6
diff --git a/assets/css/components/talks/video.css b/assets/css/components/talks/video.css
index ed037900..90757995 100644
--- a/assets/css/components/talks/video.css
+++ b/assets/css/components/talks/video.css
@@ -1,6 +1,6 @@
 .talk-video {
   iframe,
   embed {
-    @apply absolute h-full pin-l pin-t w-full
+    @apply absolute h-full left-0 top-0 w-full
   }
 }
diff --git a/assets/js/components/Navbar.vue b/assets/js/components/Navbar.vue
index b6462dcc..960bc4ff 100644
--- a/assets/js/components/Navbar.vue
+++ b/assets/js/components/Navbar.vue
@@ -8,7 +8,7 @@
 
         <div class="w-1/4 text-right sm:hidden">
           <button type="button" class="nav-toggle appearance-none" @click="hidden = !hidden" aria-label="Toggle main menu">
-            <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
+            <svg class="fill-current text-gray-600 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
           </button>
         </div>
       </div>
@@ -20,8 +20,8 @@
       >
         <a
           v-for="item in items"
-          class="block text-black no-underline focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light focus:border-grey-light focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px"
-          :class="{'border-blue hover:border-blue': isActive(item)}"
+          class="block text-black no-underline focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-gray-300 focus:border-gray-300 focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px"
+          :class="{'border-blue-600 hover:border-blue-600': isActive(item)}"
           :href="item.href"
         >
           <span class="flex items-center h-full">{{ item.title }}</span>
diff --git a/package.json b/package.json
index 5d6ff9a0..fe9a8917 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "laravel-mix": "^2.1.11",
     "laravel-mix-purgecss": "^2.1.2",
     "postcss-nested": "^4.1.2",
-    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next",
+    "tailwindcss": "^1.0.0-beta.3",
     "tailwindcss-skip-link": "^1.0.0",
     "tailwindcss-visuallyhidden": "^1.0.1",
     "tailwindcss-vuejs": "^1.0.0",
diff --git a/source/_layouts/app.html.twig b/source/_layouts/app.html.twig
index b5536db6..c5763bf1 100644
--- a/source/_layouts/app.html.twig
+++ b/source/_layouts/app.html.twig
@@ -20,7 +20,7 @@
             <link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
         {% endfor %}
     </head>
-    <body class="antialiased font-sans text-grey-darkest leading-normal">
+    <body class="antialiased font-sans text-gray-800 leading-normal">
         <div id="app" v-cloak>
             {% block body %}{% endblock %}
         </div>
diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index f0f97bf2..f85264eb 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -1,7 +1,7 @@
 {% extends 'app' %}
 
 {% block body %}
-    <a href="#main-content" class="skip-link absolute pin-t pin-l text-white bg-blue p-4 focus:outline-none">
+    <a href="#main-content" class="skip-link absolute top-0 left-0 text-white bg-blue-600 p-4 focus:outline-none">
         Skip to main content
     </a>
 
diff --git a/source/_partials/about/availability.html.twig b/source/_partials/about/availability.html.twig
index b65db64d..a8275815 100644
--- a/source/_partials/about/availability.html.twig
+++ b/source/_partials/about/availability.html.twig
@@ -1,7 +1,7 @@
 <div class="widget">
     <h2 class="mb-2">Availability</h2>
 
-    <ul class="pl-5">
+    <ul class="list-disc pl-5">
         {% for type, value in site.availability %}
             <li>
                 {% include 'about/availability/' ~ value %}
diff --git a/source/_partials/about/badges.html.twig b/source/_partials/about/badges.html.twig
index b9419fbe..14120fcd 100644
--- a/source/_partials/about/badges.html.twig
+++ b/source/_partials/about/badges.html.twig
@@ -10,7 +10,7 @@
     </div>
 
     <div class="px-4">
-        <div class="widget bg-grey-light p-4 rounded">
+        <div class="widget bg-gray-300 p-4 rounded">
             <div class="-mb-3">
                 <h2 class="visuallyhidden">Certifications</h2>
 
diff --git a/source/_partials/blog/post-summary.html.twig b/source/_partials/blog/post-summary.html.twig
index d1dc9d8d..673031bc 100644
--- a/source/_partials/blog/post-summary.html.twig
+++ b/source/_partials/blog/post-summary.html.twig
@@ -14,7 +14,7 @@
     </div>
 
     <div>
-        <a href="{{ post.url }}" class="text-sm text-grey-dark hover:text-grey-darker">
+        <a href="{{ post.url }}" class="text-sm text-gray-600 hover:text-gray-800">
             Read more
             <span class="visuallyhidden">about '{{ post.title }}'</span>
             &rarr;
diff --git a/source/_partials/cv/experience.html.twig b/source/_partials/cv/experience.html.twig
index 42afd29a..31f3e07d 100644
--- a/source/_partials/cv/experience.html.twig
+++ b/source/_partials/cv/experience.html.twig
@@ -4,14 +4,14 @@
     {% for item in page.experience %}
         <li class="mb-12">
             {% if site.companies[item.company].url %}
-                <h3><a href="{{ site.companies[item.company].url }}" class="text-inherit no-underline hover:underline focus:bg-grey-darkest">{{ site.companies[item.company].name }}</a></h3>
+                <h3><a href="{{ site.companies[item.company].url }}" class="text-inherit no-underline hover:underline focus:bg-gray-900">{{ site.companies[item.company].name }}</a></h3>
             {% else %}
                 <h3>{{ site.companies[item.company].name }}</h3>
             {% endif %}
 
             {% for role in item.roles %}
                 <div>
-                    <h4 class="mb-3 text-grey-darker">{{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})</h4>
+                    <h4 class="mb-3 text-gray-800">{{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})</h4>
 
                     {{ role.description|markdown }}
                 </div>
diff --git a/source/_partials/layout/footer.html.twig b/source/_partials/layout/footer.html.twig
index 0eefa9a7..f6660fec 100644
--- a/source/_partials/layout/footer.html.twig
+++ b/source/_partials/layout/footer.html.twig
@@ -1,4 +1,4 @@
-<footer class="border-grey-light border-t mb-8 mt-10 pt-5 text-sm">
+<footer class="border-gray-300 border-t mb-8 mt-10 pt-5 text-sm">
     <div class="md:flex md:justify-between">
         <div>
             <p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p>
diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig
index cf7e0e4c..661206b7 100644
--- a/source/_partials/layout/navbar.html.twig
+++ b/source/_partials/layout/navbar.html.twig
@@ -1,4 +1,4 @@
-<div class="border-bottom border-b border-grey-light mb-6 fixed pin-t w-full bg-white z-20">
+<div class="border-bottom border-b border-gray-300 mb-6 fixed top-0 w-full bg-white z-20">
     <div class="px-4 md:px-8 mx-auto">
         <div class="block py-5 v-cloak-block">
             <div class="font-semibold text-sm">{{ site.title }}</div>
diff --git a/source/_partials/opensource/projects.html.twig b/source/_partials/opensource/projects.html.twig
index de73d7b0..f045b879 100644
--- a/source/_partials/opensource/projects.html.twig
+++ b/source/_partials/opensource/projects.html.twig
@@ -15,7 +15,7 @@
                 {% if project.versions %}
                     <div class="mt-4 text-right">
                         {% for version in project.versions %}
-                            <span class="text-xs ml-1 px-1 py-1 bg-grey-light text-grey-dark rounded">{% spaceless %}
+                            <span class="text-xs ml-1 px-1 py-1 bg-gray-300 text-gray-600 rounded">{% spaceless %}
                                 Drupal {{ version }}
                             {% endspaceless %}</span>
                         {% endfor %}
diff --git a/source/_partials/pages/book/signup-form.html.twig b/source/_partials/pages/book/signup-form.html.twig
index a1d7cec8..aefaebd1 100644
--- a/source/_partials/pages/book/signup-form.html.twig
+++ b/source/_partials/pages/book/signup-form.html.twig
@@ -6,8 +6,8 @@
         </div>
 
         <div class="flex overflow-hidden">
-            <input type="email" value="" name="EMAIL" class="required email block w-full border border-grey p-3 pl-5 rounded-l-full" placeholder="enter your email" aria-label="Email">
-            <button type="submit" name="subscribe" class="block w-auto border border-grey border-l-0 py-3 pl-5 pr-6 rounded-r-full bg-blue text-white">Subscribe</button>
+            <input type="email" value="" name="EMAIL" class="required email block w-full border border-gray p-3 pl-5 rounded-l-full" placeholder="enter your email" aria-label="Email">
+            <button type="submit" name="subscribe" class="block w-auto border border-gray border-l-0 py-3 pl-5 pr-6 rounded-r-full bg-blue-600 text-white">Subscribe</button>
         </div>
     </div>
 </form>
diff --git a/source/_partials/post-pager.html.twig b/source/_partials/post-pager.html.twig
index c6a28654..7e3ce2c8 100644
--- a/source/_partials/post-pager.html.twig
+++ b/source/_partials/post-pager.html.twig
@@ -2,11 +2,11 @@
     <ul class="list-reset inline-flex">
         <li>
             {% if page.pagination.page == 1 %}
-                <span class="rounded-l-lg p-3 border border-grey text-grey -mr-px cursor-not-allowed">
+                <span class="rounded-l-lg p-3 border border-gray text-gray -mr-px cursor-not-allowed">
                     Previous
                 </span>
             {% else %}
-                <a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
+                <a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
                     Previous
                 </a>
             {% endif %}
@@ -15,11 +15,11 @@
         {% for i in range(1, page.pagination.total_pages) %}
             <li class="{{ i > (page.pagination.page + 2) or i < (page.pagination.page - 2) ? 'hidden sm:block' }}">
                 {% if i == page.pagination.page %}
-                    <span class="p-3 border border-grey text-white bg-blue -mr-px">
+                    <span class="p-3 border border-gray text-white bg-blue-600 -mr-px">
                         {{ i }}
                     </span>
                 {% else %}
-                    <a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px">
+                    <a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
                         {{ i }}
                     </a>
                 {% endif %}
@@ -28,11 +28,11 @@
 
         <li>
             {% if page.pagination.next_page.url %}
-                <a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey">
+                <a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray">
                     Next
                 </a>
             {% else %}
-                <span class="rounded-r-lg p-3 border border-grey text-grey cursor-not-allowed">
+                <span class="rounded-r-lg p-3 border border-gray text-gray cursor-not-allowed">
                     Next
                 </span>
             {% endif %}
diff --git a/source/_partials/post/about-author.html.twig b/source/_partials/post/about-author.html.twig
index 1ed36071..d5b28208 100644
--- a/source/_partials/post/about-author.html.twig
+++ b/source/_partials/post/about-author.html.twig
@@ -3,7 +3,7 @@
 
     <div class="flex items-center">
         <div class="mr-4 flex-none leading-none">
-            <img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="w-16 rounded-full border border-grey">
+            <img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="w-16 rounded-full border border-gray">
         </div>
 
         <p class="mb-0">
diff --git a/source/_partials/post/feedback.html.twig b/source/_partials/post/feedback.html.twig
index 64ef2e2c..38dabff0 100644
--- a/source/_partials/post/feedback.html.twig
+++ b/source/_partials/post/feedback.html.twig
@@ -1,3 +1,3 @@
-<p class="mb-4 italic text-grey-dark">
+<p class="mb-4 italic text-gray-600">
     <b>Have feedback on this post?</b> <a href="mailto:{{ site.email }}?subject=Feedback: {{ page.title }}">Email me</a> or <a href="https://twitter.com/intent/tweet?text=@{{ site.twitter.name }}&url={{ site.url }}{{ page.url|url_encode }}">send me a tweet</a>.
 </p>
diff --git a/source/_partials/post/header.html.twig b/source/_partials/post/header.html.twig
index 5cdbcd1f..d90742cb 100644
--- a/source/_partials/post/header.html.twig
+++ b/source/_partials/post/header.html.twig
@@ -1,7 +1,7 @@
 <div class="mb-8">
     <h1 class="leading-tight mb-2">{{ page.title }}</h1>
 
-    <p class="text-grey-dark">
+    <p class="text-gray-600">
         {% include 'posts/post-date' with { post: page } %}
     </p>
 </div>
diff --git a/source/_partials/post/old-post-message.html.twig b/source/_partials/post/old-post-message.html.twig
index 4e0fa4ac..fc4ff660 100644
--- a/source/_partials/post/old-post-message.html.twig
+++ b/source/_partials/post/old-post-message.html.twig
@@ -1,5 +1,5 @@
 {% if page.date|date('U') < 'now'|date_modify('-12 months')|date('U') %}
-    <div class="border-2 border-blue p-4 mb-6">
+    <div class="border-2 border-blue-600 p-4 mb-6">
         <p class="text-sm mb-0">
             <span class="font-bold">Warning:</span>
             This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date.
diff --git a/source/_partials/post/tags.html.twig b/source/_partials/post/tags.html.twig
index dfe7c0e0..86c37575 100644
--- a/source/_partials/post/tags.html.twig
+++ b/source/_partials/post/tags.html.twig
@@ -4,7 +4,7 @@
     <ul class="list-reset flex flex-wrap">
         {% for tag in page.tags|sort %}
             <li>
-                <a href="/blog/tags/{{ tag }}" class="text-xs py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:bg-grey-darker focus:text-white focus:outline-none">
+                <a href="/blog/tags/{{ tag }}" class="text-xs py-1 px-2 mr-1 mb-1 bg-gray-200 text-gray-800 leading-none no-underline hover:underline focus:bg-gray-800 focus:text-white focus:outline-none">
                     {{- tag -}}
                 </a>
             </li>
diff --git a/source/_partials/talk/events.html.twig b/source/_partials/talk/events.html.twig
index ca02c7c6..54097f3a 100644
--- a/source/_partials/talk/events.html.twig
+++ b/source/_partials/talk/events.html.twig
@@ -2,7 +2,7 @@
     <div class="mt-8">
         <h2 class="mb-2">Presented at</h2>
 
-        <ul class="markup">
+        <ul class="markup list-disc ml-5">
             {% for event in page.events %}
                 <li>
                     {% set eventData = site.events[event.event] %}
@@ -14,7 +14,7 @@
                     {% if eventData.location %}
                         in {{ eventData.location }}
                     {% endif %}
-                    <span class="text-grey-darker">- {{ event.date|date('jS F Y') }}</span>
+                    <span class="text-gray-800">- {{ event.date|date('jS F Y') }}</span>
                 </li>
             {% endfor %}
         </ul>
diff --git a/source/_partials/talks/table.html.twig b/source/_partials/talks/table.html.twig
index 37e5983c..82cfef44 100644
--- a/source/_partials/talks/table.html.twig
+++ b/source/_partials/talks/table.html.twig
@@ -20,7 +20,7 @@
                         </span>
 
                         {% if talk.event.time is defined %}
-                            <div class="text-xs text-grey-dark">
+                            <div class="text-xs text-gray-600">
                                 {{ talk.event.time }}
                             </div>
                         {% endif %}
@@ -36,7 +36,7 @@
                                 {{ talk.talk.title }}
                             {% endif %}
 
-                            <div class="text-xs text-grey-dark">
+                            <div class="text-xs text-gray-600">
                                 {% if talk.talk.type %}
                                     {{ talk.talk.type }}
                                 {% else %}
@@ -56,7 +56,7 @@
                         {% endif %}
 
                         {% if talk.event.location is defined %}
-                            <div class="text-xs text-grey-dark">
+                            <div class="text-xs text-gray-600">
                                 {{ talk.event.location }}
                             </div>
                         {% endif %}
diff --git a/source/_partials/talks/talk.html.twig b/source/_partials/talks/talk.html.twig
index cfa475de..a26609a5 100644
--- a/source/_partials/talks/talk.html.twig
+++ b/source/_partials/talks/talk.html.twig
@@ -1,13 +1,15 @@
 <article>
-    <h3 class="text-lg text-black mb-1">{{ talk.title }}</h3>
+    <h3 class="text-lg text-black mb-1">
+        {{ talk.title }}
+    </h3>
 
-    <div class="text-grey-darkest">
+    <div>
         <p>{{ talk.description }}</p>
     </div>
 
     {% if talk.url %}
         <footer class="mt-1">
-            <a href="{{ talk.url }}" class="text-sm text-grey-dark hover:text-grey-darkest focus:text-grey-darkest no-underline hover:underline">
+            <a href="{{ talk.url }}" class="text-sm text-gray-600 hover:text-gray-900 focus:text-gray-900 no-underline hover:underline">
                 Find out more
                 <span class="visuallyhidden">about {{ talk.title }}</span>
                 &rarr;
diff --git a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
index eab5e8be..7d232911 100644
--- a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
+++ b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
@@ -93,7 +93,7 @@ export default {
             <div class="font-serif">
               <h1 class="font-normal">Welcome to {{ title }}</h1>
               <p>No front page content has been created yet.</p>
-              <p>Follow the <a href="#0" class="text-blue-dark hover:text-blue no-underline border-b border-blue border-dotted hover:bg-solid">User Guide</a> to start building your site.</p>
+              <p>Follow the <a href="#0" class="text-blue-dark hover:text-blue-600 no-underline border-b border-blue-600 border-dotted hover:bg-solid">User Guide</a> to start building your site.</p>
             </div>
 
             <div class="mt-10">
@@ -106,13 +106,13 @@ export default {
           <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
             <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
                 <div class="p-4" style="background-color: #f6f6f2">
-                  <h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
+                  <h2 class="font-serif font-normal text-base text-gray-900 border-b border-solid border-gray-300 mb-3">Search</h2>
 
                   <div>
                     <form action="#" class="flex">
-                      <input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
+                      <input type="text" class="border border-solid border-gray p-2 w-full xl:w-auto">
 
-                      <button type="submit" class="bg-grey-light px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" style="background-color: #f0f0f0">
+                      <button type="submit" class="bg-gray-300 px-3 rounded-full border-b border-solid border-gray-600 ml-2 flex-none" style="background-color: #f0f0f0">
                         <img src="img/loupe.svg" class="block">
                       </button>
                     </form>
@@ -127,7 +127,7 @@ export default {
 
     <div id="footer" class="text-xs text-white">
       <div class="container mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-darkest pt-6 -mb-6">
+        <div class="border-t border-solid border-gray-900 pt-6 -mb-6">
           <div class="mb-6">
             <p><a href="#0">Contact</a></p>
           </div>
@@ -197,7 +197,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none"
+      class="w-full p-3 block sm:hidden bg-blue-light text-sm text-gray-800 text-left focus:outline-none"
       @click="open = !open"
     >
       <div class="flex items-center justify-between">
diff --git a/source/_posts/2018-12-16-published-my-first-npm-package.md b/source/_posts/2018-12-16-published-my-first-npm-package.md
index f34b410b..ace4cc99 100644
--- a/source/_posts/2018-12-16-published-my-first-npm-package.md
+++ b/source/_posts/2018-12-16-published-my-first-npm-package.md
@@ -68,7 +68,7 @@ Within my `navbar.html.twig` partial, I have a placeholder div that also contain
 
 {% raw %}<div v-pre markdown="1">
 ```twig
-<div class="border-bottom border-b border-grey-light mb-6">
+<div class="border-bottom border-b border-gray-300 mb-6">
     <div class="container mx-auto">
         <div class="block py-5 v-cloak-block">
             {{ site.title }}
diff --git a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
index b503c73a..a85e48f5 100644
--- a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
+++ b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
@@ -59,7 +59,7 @@ I added a `style` section within `Welcome.vue`, and added some default styling f
 
   <div id="footer" class="text-xs text-white">
     <div class="container mx-auto px-4 pt-16 pb-4">
-      <div class="border-t border-solid border-grey-darkest pt-6 -mb-6">
+      <div class="border-t border-solid border-gray-900 pt-6 -mb-6">
         <div class="mb-6">
           <p><a href="#0">Contact</a></p>
         </div>
@@ -90,11 +90,11 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc
     @apply underline
 
 #main a
-  @apply text-blue-dark no-underline border-b border-blue border-dotted
+  @apply text-blue-dark no-underline border-b border-blue-600 border-dotted
 
   &:hover,
   &:focus
-    @apply text-blue border-solid
+    @apply text-blue-600 border-solid
 
 #footer a
   @apply text-white no-underline border-b border-dotted border-white
@@ -114,7 +114,7 @@ As well as being able to extract re-usable components within Tailwind, the same
 // src/components/Sidebar.vue
 
 <template>
-  <div class="bg-grey-lighter p-4 mb-4">
+  <div class="bg-gray-200 p-4 mb-4">
     <slot></slot>
   </div>
 </template>
diff --git a/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md b/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
index 9a2a434c..dd437f31 100644
--- a/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
+++ b/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
@@ -108,21 +108,21 @@ This was the first page that I rebuilt - the Environments page for an applicatio
 Vue Router is configured to show the 
 
 <figure>
-  <img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-2">
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-gray-300 p-2">
   <figcaption>The rebuilt Environments page for an application.</figcaption>
 </figure>
 
 ## The applications page
 
 <figure>
-  <img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-grey-light p-2">
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-gray-300 p-2">
   <figcaption>The rebuilt Applications page.</figcaption>
 </figure>
 
 ## An environment page
 
 <figure>
-  <img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-grey-light p-2">
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-gray-300 p-2">
   <figcaption>The rebuilt page for an environment within an application.</figcaption>
 </figure>
 
diff --git a/source/about.html.twig b/source/about.html.twig
index cacf4ee6..ac10217f 100644
--- a/source/about.html.twig
+++ b/source/about.html.twig
@@ -13,7 +13,7 @@ wide: true
 <div class="md:flex -mx-6">
     <div class="w-auto md:flex-1 px-6 mb-12 md:mb-0">
         <div class="markup spaced-y-4 mb-8">
-            <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-grey"/></div>
+            <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-gray"/></div>
 
             <p>Hi, I’m Oliver Davies (aka <a href="https://www.google.com/#q=opdavies">opdavies</a>) - a Full Stack Web Developer and System Administrator based in Wales, UK.</p>
 
diff --git a/source/articles/archive.html.twig b/source/articles/archive.html.twig
index ccc3899f..964fcae1 100644
--- a/source/articles/archive.html.twig
+++ b/source/articles/archive.html.twig
@@ -11,7 +11,7 @@ use: [posts]
 
     <div class="-mx-4 spaced-y-4">
         {% for post in data.posts %}
-            <article class="p-4 {{ post.draft ? 'bg-blue-lighter' }}">
+            <article class="p-4 {{ post.draft ? 'bg-blue-200' }}">
                 {% include 'blog/post-summary' with {
                     show_date: true,
                 } %}
diff --git a/source/experience.html.twig b/source/experience.html.twig
index 36dffbd8..f01412e2 100644
--- a/source/experience.html.twig
+++ b/source/experience.html.twig
@@ -146,7 +146,7 @@ experiences:
                                 </a>
                             {%- endif %}
 
-                            <div class="text-sm text-grey-dark">
+                            <div class="text-sm text-gray-600">
                                 {{ helpers.roleText(experience) }}
                             </div>
                         </div>
diff --git a/source/podcasts.html.twig b/source/podcasts.html.twig
index 9c95b8e5..a3bc80a8 100644
--- a/source/podcasts.html.twig
+++ b/source/podcasts.html.twig
@@ -24,13 +24,13 @@ episodes:
         <article>
             <h2 class="text-lg">{{ podcast.name }}: {{ episode.title }}</h2>
 
-            <time class="text-sm text-grey-darker block mt-px mb-2" datetime="{{ episode.date|date('Y-m-d') }}">
+            <time class="text-sm text-gray-800 block mt-px mb-2" datetime="{{ episode.date|date('Y-m-d') }}">
                 {{ episode.date|date('jS F Y') }}
             </time>
 
             <p>{{ episode.description }}</p>
 
-            <a href="{{ episode.url }}" class="inline-block mt-2 text-sm text-grey-dark hover:text-grey-darker focus:text-grey-darker">
+            <a href="{{ episode.url }}" class="inline-block mt-2 text-sm text-gray-600 hover:text-gray-800 focus:text-gray-800">
                 {{ episode.video ? 'Watch' : 'Listen to' }} this
                 <span class="visuallyhidden">{{ podcast.name }}</span>
                 episode &rarr;
diff --git a/source/testimonials.html.twig b/source/testimonials.html.twig
index 53ea573f..ddb978a4 100644
--- a/source/testimonials.html.twig
+++ b/source/testimonials.html.twig
@@ -5,13 +5,13 @@ use: [posts]
 testimonials:
     - name: Ed Welsby
       image: ed-welsby.png
-      role: Senior Developer at <a class="text-blue inline-block" href="http://www.proctors.co.uk">Proctor & Stevenson</a>
+      role: Senior Developer at <a class="text-blue-600 inline-block" href="http://www.proctors.co.uk">Proctor & Stevenson</a>
       text: |
           Oliver was great to work with, he has a solid knowledge of the various aspects of web development and never minded helping me out with Linux commands!
 
     - name: Brian Healy
       image: brian-healy.png
-      role: Director of Business Development at <a class="text-blue inline-block" href="http://tincan.co.uk">Tincan</a>.
+      role: Director of Business Development at <a class="text-blue-600 inline-block" href="http://tincan.co.uk">Tincan</a>.
       text: |
           Oliver was fantastic to work with - pro-active and highly responsive, he worked well remotely and as part of a project team. His understanding of the project requirement(s) and ability to translate it into working code was essential and he delivered.
 
@@ -31,21 +31,21 @@ testimonials:
           Oliver is seasoned Drupal and all round highly skilled and experienced web developer. I have worked with Oliver on an important project where he was reliable, prompt and ensured strict client deadline delivery and confidentiality at all times.
 
     - name: James Chapman
-      role: Director at <a class="text-blue inline-block" href="http://www.developmentdoneright.co.uk">Development Done Right</a>
+      role: Director at <a class="text-blue-600 inline-block" href="http://www.developmentdoneright.co.uk">Development Done Right</a>
       image: james-chapman.png
       text: |
           We used Oliver on a number of occasions throughout 2012 and I have to say we've been delighted with his work. His skills working with Drupal are excellent particularly with custom module development and we wouldn’t hesitate to recommend him others.
 
     - name: Léonie Watson
       role: >
-          Director of Accessibility at <a class="text-blue inline-block" href="http://www.nomensa.com">Nomensa</a>
+          Director of Accessibility at <a class="text-blue-600 inline-block" href="http://www.nomensa.com">Nomensa</a>
       image: leonie-watson.jpg
       text: |
           Oliver is a flexible and hardworking developer, with a terrific knowledge of Drupal. He promotes accessibility best practice within the Drupal community, and is always happy to share his knowledge with other people.
 
     - name: Holly Ross
       role: >
-          Executive Director at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a>
+          Executive Director at the <a class="text-blue-600 inline-block" href="https://assoc.drupal.org">Drupal Association</a>
       image: holly-ross.png
       text: |
           Oliver has been an outstanding contributor to the Drupal Association team. He is a talented developer who writes great code and applies his curiosity and love of learning to every project. He is also a fantastic team member, who gives to the team as much as he gets.
@@ -53,7 +53,7 @@ testimonials:
           Oliver is the embodiment of everything good about the Drupal community.
 
     - name: Josh Mitchell
-      role: CTO at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a>
+      role: CTO at the <a class="text-blue-600 inline-block" href="https://assoc.drupal.org">Drupal Association</a>
       image: josh-mitchell.png
       text: |
           Oliver is a skilled Drupal developer with a passion for the Drupal community. As his direct supervisor, I was able to watch Oliver grow with the Drupal Association and contribute an amazing amount of effort and integrity to all of his work.
@@ -62,7 +62,7 @@ testimonials:
 
     - name: Chris Jarvis
       image: chris-jarvis.jpg
-      role: Developer at <a class="text-blue inline-block" href="https://microserve.io">Microserve</a>
+      role: Developer at <a class="text-blue-600 inline-block" href="https://microserve.io">Microserve</a>
       text: |
           Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more.
 ---
@@ -85,7 +85,7 @@ testimonials:
                         <h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
 
                         {% if testimonial.role %}
-                            <div class="text-grey-dark text-sm">
+                            <div class="text-gray-600 text-sm">
                                 {{ testimonial.role|raw }}
                             </div>
                         {% endif %}
diff --git a/tailwind.config.js b/tailwind.config.js
index 01c7b0c1..9065cfc9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,24 +1,9 @@
-let defaultConfig = require('tailwindcss/defaultConfig')()
-let defaultTheme = require('tailwindcss/defaultTheme')()
+let defaultConfig = require('tailwindcss/defaultConfig')
+let defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   theme: {
     extend: {
-      color: {
-        blue: {
-          dark: '#2779bd',
-          default: 'hsl(203, 94%, 38%)',
-          lighter: '#bcdefa',
-        },
-        grey: {
-          dark: '#70818a',
-          darker: '#596a73',
-          default: '#9babb4',
-          light: 'hsl(203, 25%, 88%)',
-          lighter: 'hsl(203, 22%, 95%)',
-          lightest: '#fafcfc',
-        },
-      },
       fontFamily: {
         mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
       },
diff --git a/yarn.lock b/yarn.lock
index 5257b8b3..6da83aea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -361,13 +361,6 @@ babel-core@^6.24.1, babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.7"
 
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
-  dependencies:
-    babylon "^6.18.0"
-
 babel-generator@^6.26.0:
   version "6.26.1"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@@ -6528,14 +6521,6 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
-strip-comments@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -6626,9 +6611,10 @@ tailwindcss-vuejs@^1.0.0:
   resolved "https://registry.yarnpkg.com/tailwindcss-vuejs/-/tailwindcss-vuejs-1.1.2.tgz#1c7b6de4ad8b8c841e9e3fc3d7565e6a09819f7b"
   integrity sha512-6P5EXM9XW6qprbEuh26pNLM2lj1nbgHT9oeSqsAcrrVx5u0uxywch86x5Bq/VRNqieNbdCZht5zC/3QNW4nE+w==
 
-"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next":
-  version "0.7.3"
-  resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a"
+tailwindcss@^1.0.0-beta.3:
+  version "1.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.3.tgz#66ac8e15377f4038cea6877e834a54edbc5ca295"
+  integrity sha512-J3KZ0gtpz1XVQ/D2xTuBMII1KmEb9LrQibIWtFRAXpa81yIeDM3v1g88M3Qr/lnjrJymi7zC3T2f9AdGuZ4oMw==
   dependencies:
     autoprefixer "^9.4.5"
     bytes "^3.0.0"
@@ -6644,7 +6630,6 @@ tailwindcss-vuejs@^1.0.0:
     postcss-nested "^4.1.1"
     postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
-    strip-comments "^1.0.2"
 
 tapable@^0.2.7:
   version "0.2.9"