diff --git a/package.json b/package.json
index 871e7d1..53fa31d 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next",
+    "tailwindcss": "^1.0.0-beta.3",
     "tailwindcss-skip-link": "^1.0.1",
     "vue": "^2.5.17"
   },
diff --git a/public/index.html b/public/index.html
index e9ed6b1..f7f7188 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Rebuilding Bartik with Vue.js and Tailwind CSS</title>
   </head>
-  <body class="text-black bg-black text-sm leading-normal">
+  <body class="font-sans text-black bg-black text-sm leading-normal">
     <noscript>
       <strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/components/DrupalMessage.vue b/src/components/DrupalMessage.vue
index eaf6dc1..9935268 100644
--- a/src/components/DrupalMessage.vue
+++ b/src/components/DrupalMessage.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
     <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
-      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-3 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>
+      <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>
   </div>
@@ -16,13 +16,13 @@ export default {
   computed: {
     classes: function () {
       return {
-        status: 'border-green-2 text-green-4 bg-green-1',
+        status: 'border-green-200 text-green-400 bg-green-100',
       }[this.type]
     },
 
     wrapperClasses: function () {
       return {
-        status: 'bg-green-3',
+        status: 'bg-green-300',
       }[this.type]
     },
   }
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 5da15e1..d1ff74f 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -2,7 +2,7 @@
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-1 text-sm text-grey-6 text-left focus:outline-none"
+      class="w-full p-3 block sm:hidden bg-blue-100 text-sm text-grey-600 text-left focus:outline-none"
       @click="open = !open"
     >
       <div class="flex items-center justify-between">
@@ -25,7 +25,7 @@
           >
             <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="[ index == activeTab ? 'bg-white' : 'bg-blue-1 hover:bg-white' ]"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
               :href="link.href"
             >
               {{ link.title }}
diff --git a/src/components/SidebarBlock.vue b/src/components/SidebarBlock.vue
index b3bb85c..f1b55ff 100644
--- a/src/components/SidebarBlock.vue
+++ b/src/components/SidebarBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-grey-1 p-4 mb-4">
+  <div class="bg-grey-100 p-4 mb-4">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 4faaa75..c344720 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-blue-3">
+    <div class="bg-blue-300">
       <div class="py-4 text-white">
         <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
           <div class="flex flex-col-reverse">
@@ -26,8 +26,8 @@
         <drupal-message type="status">
           <p>
             A Bartik clone, built with
-            <a href="https://vuejs.org" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Vue.js</a>
-            and <a href="https://tailwindcss.com" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Tailwind CSS</a>.
+            <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
           </p>
         </drupal-message>
 
@@ -48,13 +48,13 @@
 
           <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
             <sidebar-block>
-              <h2 class="font-serif font-normal text-base text-grey-6 border-b border-solid border-grey-3 mb-3">Search</h2>
+              <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-4 p-2 w-full xl:w-auto">
+                  <input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
 
-                  <button type="submit" class="bg-grey-2 px-3 rounded-full border-b border-solid border-grey-5 ml-2 flex-none">
+                  <button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
                     <img src="img/loupe.svg" class="block">
                   </button>
                 </form>
@@ -67,7 +67,7 @@
 
     <div id="footer" class="text-xs text-white">
       <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-6 pt-6 -mb-6">
+        <div class="border-t border-solid border-grey-600 pt-6 -mb-6">
           <div class="mb-6">
             <p><a href="#0">Contact</a></p>
           </div>
@@ -116,11 +116,11 @@ export default {
 }
 
 #main a {
-  @apply text-blue-3 no-underline border-b border-blue-1 border-dotted;
+  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
 
   &:hover,
   &:focus {
-    @apply text-blue-1 border-solid
+    @apply text-blue-100 border-solid
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 677cbb4..37f5521 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,28 +6,31 @@ module.exports = {
         60: 'rgba(0,0,0,.6)',
       },
       blue: {
-        1: '#bcdefa',
-        2: '#3490dc',
-        3: '#2779bd',
+        100: '#bcdefa',
+        200: '#3490dc',
+        300: '#2779bd',
       },
       green: {
-        1: '#f3faee',
-        2: '#cde2c2',
-        3: '#77b159',
-        4: '#325e1c',
+        100: '#f3faee',
+        200: '#cde2c2',
+        300: '#77b159',
+        400: '#325e1c',
       },
       grey: {
-        1: '#f6f6f2',
-        2: '#f0f0f0',
-        3: '#dae1e7',
-        4: '#b8c2cc',
-        5: '#8795a1',
-        6: '#3d4852',
+        100: '#f6f6f2',
+        200: '#f0f0f0',
+        300: '#dae1e7',
+        400: '#b8c2cc',
+        500: '#8795a1',
+        600: '#3d4852',
       },
       transparent: 'transparent',
       white: '#fff',
     },
     extend: {
+      fontFamily: {
+        sans: ['sans-serif'],
+      },
       fontSize: {
         '3xl': '1.75rem',
       },
@@ -37,10 +40,6 @@ module.exports = {
     },
   },
   plugins: [
-    require('tailwindcss/plugins/container')({
-      center: true,
-      padding: '1rem',
-    }),
     require('tailwindcss-skip-link')(),
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index a453a74..c7f0d3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1440,13 +1440,6 @@ babel-eslint@^10.0.1:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-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-loader@^8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
@@ -1464,32 +1457,6 @@ babel-plugin-dynamic-import-node@^2.2.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-syntax-object-rest-spread@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
-  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
-
-babel-plugin-transform-object-rest-spread@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
-  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2262,7 +2229,7 @@ copy-webpack-plugin@^4.6.0:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.4.0, core-js@^2.5.7:
+core-js@^2.5.7:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
   integrity sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==
@@ -6699,11 +6666,6 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@@ -7523,14 +7485,6 @@ strip-ansi@^5.0.0:
   dependencies:
     ansi-regex "^4.0.0"
 
-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"
@@ -7633,9 +7587,10 @@ tailwindcss-skip-link@^1.0.1:
   resolved "https://registry.yarnpkg.com/tailwindcss-skip-link/-/tailwindcss-skip-link-1.0.1.tgz#b965624ed0b007ddd33f0326f2719d9a88b857c7"
   integrity sha512-Hxivkqu7UEluZY+ZPv+aQv4dreqTfYRgniEtux4qb9yJPjyR4dXiHMIWk7LgNqsyCPKpoRL8FJq55uIQN4ms+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"
@@ -7651,7 +7606,6 @@ tailwindcss-skip-link@^1.0.1:
     postcss-nested "^4.1.1"
     postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
-    strip-comments "^1.0.2"
 
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.1"
