From b9c87fd77911b899405e0f8ffd18b96eb04ac98e Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Fri, 14 Jun 2019 11:30:43 -0700
Subject: [PATCH] updated tailwindcss to 1.0

---
 android/android.js          |   2 +-
 android/pages/home.js       |   8 +-
 app/main.css                |   7 +-
 app/ui/account.js           |   2 +-
 app/ui/archiveTile.js       |  18 +-
 app/ui/copyDialog.js        |   4 +-
 app/ui/download.js          |   8 +-
 app/ui/downloadCompleted.js |   2 +-
 app/ui/downloadPassword.js  |   4 +-
 app/ui/error.js             |   2 +-
 app/ui/footer.js            |   2 +-
 app/ui/home.js              |   6 +-
 app/ui/intro.js             |   2 +-
 app/ui/legal.js             |   4 +-
 app/ui/modal.js             |   4 +-
 app/ui/noStreams.js         |   8 +-
 app/ui/notFound.js          |   2 +-
 app/ui/okDialog.js          |   6 +-
 app/ui/shareDialog.js       |   4 +-
 app/ui/signupDialog.js      |   6 +-
 app/ui/surveyDialog.js      |   4 +-
 app/ui/unsupported.js       |   2 +-
 package-lock.json           | 423 ++++++++--------
 package.json                |   2 +-
 postcss.config.js           |   2 +-
 server/routes/index.js      |   1 +
 tailwind.config.js          | 429 +++++++++++++++++
 tailwind.js                 | 933 ------------------------------------
 28 files changed, 698 insertions(+), 1199 deletions(-)
 create mode 100644 tailwind.config.js
 delete mode 100644 tailwind.js

diff --git a/android/android.js b/android/android.js
index d5c10fe5..a99a047b 100644
--- a/android/android.js
+++ b/android/android.js
@@ -53,7 +53,7 @@ function body(main) {
 
     const menu = html`<a
         id="hamburger"
-        class="absolute pin-t pin-r z-50"
+        class="absolute top-0 right-0 z-50"
         href="#"
         onclick="${clickPreferences}"
       >
diff --git a/android/pages/home.js b/android/pages/home.js
index 84f227ab..f1259dfb 100644
--- a/android/pages/home.js
+++ b/android/pages/home.js
@@ -42,11 +42,7 @@ module.exports = function(state, emit) {
     content =
       archives.length < 1
         ? intro(state)
-        : list(
-            archives,
-            'list-reset h-full overflow-y-auto w-full',
-            'mb-3 w-full'
-          );
+        : list(archives, 'h-full overflow-y-auto w-full', 'mb-3 w-full');
   }
 
   return html`
@@ -57,7 +53,7 @@ module.exports = function(state, emit) {
       >
         ${content}
       </section>
-      <div class="fixed pin-r pin-b z-20">
+      <div class="fixed right-0 bottom-0 z-20">
         ${button}
         <input
           id="file-upload"
diff --git a/app/main.css b/app/main.css
index abdc23a2..71161f6a 100644
--- a/app/main.css
+++ b/app/main.css
@@ -1,4 +1,9 @@
-@tailwind preflight;
+@tailwind base;
+
+html {
+  line-height: 1.15;
+}
+
 @tailwind components;
 
 :not(input) {
diff --git a/app/ui/account.js b/app/ui/account.js
index cc7d4456..a870d92b 100644
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -85,7 +85,7 @@ class Account extends Component {
         />
         <ul
           id="accountMenu"
-          class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
           onblur="${e => this.hideMenu(e)}"
         >
           <li class="p-2 text-grey-dark">${user.email}</li>
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index 31df9e17..39b98165 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -120,7 +120,7 @@ function fileInfo(file, action) {
 function archiveInfo(archive, action) {
   return html`
     <p class="w-full flex items-center">
-      <img class="mr-3 flex-no-shrink" src="${assets.get('blue_file.svg')}"/>
+      <img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/>
       <p class="flex-grow">
         <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
         <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@@ -155,7 +155,7 @@ function archiveDetails(translate, archive) {
             num: archive.manifest.files.length
           })}
         </summary>
-        ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset')}
+        ${list(archive.manifest.files.map(f => fileInfo(f)))}
       </details>
     `;
   }
@@ -213,7 +213,7 @@ module.exports = function(state, emit, archive) {
         html`
           <input
             type="image"
-            class="self-start flex-no-shrink text-white hover:opacity-75 focus:outline"
+            class="self-start flex-shrink-0 text-white hover:opacity-75 focus:outline"
             alt="${state.translate('deleteButtonHover')}"
             title="${state.translate('deleteButtonHover')}"
             src="${assets.get('close-16.svg')}"
@@ -256,9 +256,7 @@ module.exports = function(state, emit, archive) {
       try {
         await navigator.share({
           title: state.translate('-send-brand'),
-          text: `Download "${
-            archive.name
-          }" with Firefox Send: simple, safe file sharing`,
+          text: `Download "${archive.name}" with Firefox Send: simple, safe file sharing`,
           //state.translate('shareMessage', { name }),
           url: archive.url
         });
@@ -278,11 +276,11 @@ module.exports.wip = function(state, emit) {
           .map(f =>
             fileInfo(f, remove(f, state.translate('deleteButtonHover')))
           ),
-        'flex-shrink bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
+        'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
         'bg-white px-2 my-2 shadow-light rounded'
       )}
       <div
-        class="flex-no-shrink flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
+        class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
       >
         <input
           id="file-upload"
@@ -315,7 +313,7 @@ module.exports.wip = function(state, emit) {
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
         id="upload-btn"
-        class="btn rounded-lg flex-no-shrink focus:outline"
+        class="btn rounded-lg flex-shrink-0 focus:outline"
         title="${state.translate('uploadButton')}"
         onclick="${upload}"
       >
@@ -509,7 +507,7 @@ module.exports.preview = function(state, emit) {
       </div>
       <button
         id="download-btn"
-        class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
+        class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline"
         title="${state.translate('downloadButtonLabel')}"
         onclick=${download}
       >
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
index 58c3cff9..79b4421e 100644
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -7,7 +7,7 @@ module.exports = function(name, url) {
       <send-copy-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
@@ -22,7 +22,7 @@ module.exports = function(name, url) {
           readonly="true"
         />
         <button
-          class="btn rounded-lg w-full flex-no-shrink focus:outline"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${copy}"
           title="${state.translate('copyLinkButton')}"
         >
diff --git a/app/ui/download.js b/app/ui/download.js
index 15c3c208..dbf9243c 100644
--- a/app/ui/download.js
+++ b/app/ui/download.js
@@ -22,7 +22,9 @@ function downloading(state, emit) {
     <div
       class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
     >
-      <h1 class="mb-4">${state.translate('downloadingTitle')}</h1>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadingTitle')}
+      </h1>
       ${archiveTile.downloading(state, emit)}
     </div>
   `;
@@ -36,7 +38,9 @@ function preview(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
       <p class="w-full text-grey-darkest text-center leading-normal">
         ${state.translate('downloadDescription')}
       </p>
diff --git a/app/ui/downloadCompleted.js b/app/ui/downloadCompleted.js
index 7cc7a997..1cb02a0b 100644
--- a/app/ui/downloadCompleted.js
+++ b/app/ui/downloadCompleted.js
@@ -7,7 +7,7 @@ module.exports = function(state) {
       id="download-complete"
       class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
     >
-      <h1 class="text-center font-bold my-2">
+      <h1 class="text-center text-3xl font-bold my-2">
         ${state.translate('downloadFinish')}
       </h1>
       <img src="${assets.get('completed.svg')}" class="my-12 h-48" />
diff --git a/app/ui/downloadPassword.js b/app/ui/downloadPassword.js
index e339f6df..1b505618 100644
--- a/app/ui/downloadPassword.js
+++ b/app/ui/downloadPassword.js
@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
     <div
       class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
       <p class="w-full mb-4 text-center text-grey-darkest leading-normal">
         ${state.translate('downloadDescription')}
       </p>
diff --git a/app/ui/error.js b/app/ui/error.js
index 5f2ed59f..2476e359 100644
--- a/app/ui/error.js
+++ b/app/ui/error.js
@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
       <section
         class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
-        <h1 class="text-center font-bold my-2">
+        <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('errorPageHeader')}
         </h1>
         <img class="my-12 h-48" src="${assets.get('error.svg')}" />
diff --git a/app/ui/footer.js b/app/ui/footer.js
index 8a5fba21..fab82a0c 100644
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@@ -28,7 +28,7 @@ class Footer extends Component {
           Mozilla
         </a>
         <ul
-          class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end"
+          class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
         >
           <li class="m-2">
             <a href="https://www.mozilla.org/about/legal/terms/services/#send">
diff --git a/app/ui/home.js b/app/ui/home.js
index 38012fac..cfa38564 100644
--- a/app/ui/home.js
+++ b/app/ui/home.js
@@ -20,11 +20,7 @@ module.exports = function(state, emit) {
   const right =
     archives.length === 0
       ? intro(state)
-      : list(
-          archives,
-          'list-reset p-2 h-full overflow-y-auto w-full',
-          'mb-4 w-full'
-        );
+      : list(archives, 'p-2 h-full overflow-y-auto w-full', 'mb-4 w-full');
 
   return html`
     <main class="main">
diff --git a/app/ui/intro.js b/app/ui/intro.js
index 106b00db..12ba3110 100644
--- a/app/ui/intro.js
+++ b/app/ui/intro.js
@@ -7,7 +7,7 @@ module.exports = function intro(state) {
       class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
     >
       <div class="mt-12 flex flex-col h-full">
-        <h1 class="font-bold md:pb-2">
+        <h1 class="text-3xl font-bold md:pb-2">
           ${state.translate('introTitle')}
         </h1>
         <p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14">
diff --git a/app/ui/legal.js b/app/ui/legal.js
index 7c1ec0a3..88fd3338 100644
--- a/app/ui/legal.js
+++ b/app/ui/legal.js
@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
       <div
         class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
       >
-        <h1 class="text-center">${state.translate('legalTitle')}</h1>
+        <h1 class="text-center text-3xl font-bold">
+          ${state.translate('legalTitle')}
+        </h1>
         <p class="mt-2">${state.translate('legalDateStamp')}</p>
         <div class="overflow-y-scroll py-8 px-12">
           <p class="leading-normal">
diff --git a/app/ui/modal.js b/app/ui/modal.js
index 65843fe9..365935b8 100644
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@@ -3,11 +3,11 @@ const html = require('choo/html');
 module.exports = function(state, emit) {
   return html`
     <send-modal
-      class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
+      class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
       onclick="${close}"
     >
       <div
-        class="h-full w-full max-h-screen absolute pin-t flex items-center justify-center"
+        class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center"
       >
         <div class="w-full" onclick="${e => e.stopPropagation()}">
           ${state.modal(state, emit, close)}
diff --git a/app/ui/noStreams.js b/app/ui/noStreams.js
index 8949c42c..4ec77e7b 100644
--- a/app/ui/noStreams.js
+++ b/app/ui/noStreams.js
@@ -8,7 +8,9 @@ module.exports = function(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
+      <h1 class="mb-4 text-3xl font-bold">${state.translate(
+        'downloadTitle'
+      )}</h1>
       <p
         class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
       >
@@ -17,7 +19,7 @@ module.exports = function(state, emit) {
       <form class="md:w-128" onsubmit=${submit}>
         <fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
           <div class="flex items-center mb-2">
-            <img class="mr-3 flex-no-shrink" src="${assets.get(
+            <img class="mr-3 flex-shrink-0" src="${assets.get(
               'blue_file.svg'
             )}"/>
             <p class="flex-grow">
@@ -49,7 +51,7 @@ module.exports = function(state, emit) {
           </div>
         </fieldset>
         <input
-            class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
+            class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center"
             value="${state.translate('copyLinkButton')}"
             title="${state.translate('copyLinkButton')}"
             type="submit" />
diff --git a/app/ui/notFound.js b/app/ui/notFound.js
index a560057a..7d3b8444 100644
--- a/app/ui/notFound.js
+++ b/app/ui/notFound.js
@@ -9,7 +9,7 @@ module.exports = function(state, emit) {
       <section
         class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
       >
-        <h1 class="text-center font-bold my-2">
+        <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('expiredTitle')}
         </h1>
         <img src="${assets.get('notFound.svg')}" class="my-12" />
diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js
index 27ab1bb3..cb8c3c6a 100644
--- a/app/ui/okDialog.js
+++ b/app/ui/okDialog.js
@@ -4,9 +4,11 @@ module.exports = function(message) {
   return function(state, emit, close) {
     return html`
       <send-ok-dialog class="flex flex-col max-w-sm p-4 m-auto">
-        <h2 class="text-center m-8 leading-normal">${message}</h2>
+        <h2 class="text-center text-xl font-bold m-8 leading-normal">
+          ${message}
+        </h2>
         <button
-          class="btn rounded-lg w-full flex-no-shrink"
+          class="btn rounded-lg w-full flex-shrink-0"
           onclick="${close}"
           title="${state.translate('okButton')}"
         >
diff --git a/app/ui/shareDialog.js b/app/ui/shareDialog.js
index 0e83fe93..940dc118 100644
--- a/app/ui/shareDialog.js
+++ b/app/ui/shareDialog.js
@@ -6,7 +6,7 @@ module.exports = function(name, url) {
       <send-share-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
@@ -21,7 +21,7 @@ module.exports = function(name, url) {
           readonly="true"
         />
         <button
-          class="btn rounded-lg w-full flex-no-shrink focus:outline"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${share}"
           title="${state.translate('shareLinkButton')}"
         >
diff --git a/app/ui/signupDialog.js b/app/ui/signupDialog.js
index 2c188fa3..908f5faa 100644
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@@ -14,9 +14,9 @@ module.exports = function(trigger) {
       >
         <img src="${assets.get('master-logo.svg')}" class="h-16 mt-1 mb-4" />
         <section
-          class="flex flex-col flex-no-shrink self-center lg:mx-6 lg:max-w-xs"
+          class="flex flex-col flex-shrink-0 self-center lg:mx-6 lg:max-w-xs"
         >
-          <h1 class="font-bold text-center lg:text-left">
+          <h1 class="text-3xl font-bold text-center lg:text-left">
             ${state.translate('accountBenefitTitle')}
           </h1>
           <ul
@@ -46,7 +46,7 @@ module.exports = function(trigger) {
               placeholder=${state.translate('emailPlaceholder')}
             />
             <input
-              class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
+              class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center"
               value="${state.translate('signInOnlyButton')}"
               title="${state.translate('signInOnlyButton')}"
               id="email-submit"
diff --git a/app/ui/surveyDialog.js b/app/ui/surveyDialog.js
index b2dd3541..d3e7bb62 100644
--- a/app/ui/surveyDialog.js
+++ b/app/ui/surveyDialog.js
@@ -13,7 +13,7 @@ module.exports = function() {
       <send-survey-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
       >
-        <h1 class="font-bold my-4">
+        <h1 class="text-3xl font-bold my-4">
           Tell us what you think.
         </h1>
         <p class="font-normal leading-normal text-grey-darkest px-4">
@@ -21,7 +21,7 @@ module.exports = function() {
           it better.
         </p>
         <a
-          class="btn rounded-lg w-full flex-no-shrink focus:outline my-5"
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline my-5"
           onclick="${() => emit('closeModal')}"
           title="Give feedback"
           href="${surveyUrl}"
diff --git a/app/ui/unsupported.js b/app/ui/unsupported.js
index 012126ff..b449e673 100644
--- a/app/ui/unsupported.js
+++ b/app/ui/unsupported.js
@@ -29,7 +29,7 @@ module.exports = function(state, emit) {
       <section
         class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
       >
-        <h1 class="">${strings.header}</h1>
+        <h1 class="text-3xl font-bold">${strings.header}</h1>
         <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
         ${why}
         <a href="${url}" class="btn rounded-lg mt-8 px-8">
diff --git a/package-lock.json b/package-lock.json
index 4f174dff..0c4cced6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1862,17 +1862,109 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.4.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
-      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.0.tgz",
+      "integrity": "sha512-kuip9YilBqhirhHEGHaBTZKXL//xxGnzvsD0FtBQa6z+A69qZD6s/BAX9VzDF1i9VKDquTJDQaPLSEhOnL6FvQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.4.1",
-        "caniuse-lite": "^1.0.30000929",
+        "browserslist": "^4.6.1",
+        "caniuse-lite": "^1.0.30000971",
+        "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.13",
+        "postcss": "^7.0.16",
         "postcss-value-parser": "^3.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.6.1",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.1.tgz",
+          "integrity": "sha512-1MC18ooMPRG2UuVFJTHFIAkk6mpByJfxCrnUyvSlu/hyQSFHMrlhM02SzNuCV+quTP4CKmqtOMAIjrifrpBJXQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30000971",
+            "electron-to-chromium": "^1.3.137",
+            "node-releases": "^1.1.21"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30000974",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz",
+          "integrity": "sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.3.150",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.150.tgz",
+          "integrity": "sha512-5wuYlaXhXbBvavSTij5ZyidICB6sAK/1BwgZZoPCgsniid1oDgzVvDOV/Dw6J25lKV9QZ9ZdQCp8MEfF0/OIKA==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.23",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.23.tgz",
+          "integrity": "sha512-uq1iL79YjfYC0WXoHbC/z28q/9pOl8kSHaXdWmAAc8No+bDwqkZbzIJz55g/MUsPgSGm9LZ7QSUbzTcH5tz47w==",
+          "dev": true,
+          "requires": {
+            "semver": "^5.3.0"
+          }
+        },
+        "postcss": {
+          "version": "7.0.17",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
+          "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "aws-sdk": {
@@ -1901,15 +1993,6 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
-    "babel-extract-comments": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
-      "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==",
-      "dev": true,
-      "requires": {
-        "babylon": "^6.18.0"
-      }
-    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
@@ -1978,22 +2061,6 @@
         }
       }
     },
-    "babel-plugin-syntax-object-rest-spread": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
-      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
-      "dev": true
-    },
-    "babel-plugin-transform-object-rest-spread": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
-      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
-      "dev": true,
-      "requires": {
-        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
-        "babel-runtime": "^6.26.0"
-      }
-    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -2012,12 +2079,6 @@
         }
       }
     },
-    "babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true
-    },
     "bail": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
@@ -3046,12 +3107,6 @@
       "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
       "dev": true
     },
-    "comment-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/comment-regex/-/comment-regex-1.0.1.tgz",
-      "integrity": "sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ==",
-      "dev": true
-    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -3210,16 +3265,30 @@
       }
     },
     "convict": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/convict/-/convict-4.4.1.tgz",
-      "integrity": "sha512-celpR4hOWWwb/S8azhzgQwDon6muAJlNe2LTLeOGyoSgH390TsaqoieAe9BLbAv7+9wNfG7DTA2q3IfFp2viKw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/convict/-/convict-5.0.0.tgz",
+      "integrity": "sha512-bMaU2aeQcK8ynDiCU9GFzBngfGMEPlslNmd0PkXakGgNd85U4K4bygYfWXk0OxiSAH2eVolItLYxDuWPHlXwsg==",
       "requires": {
-        "depd": "1.1.2",
-        "json5": "1.0.1",
+        "json5": "2.1.0",
         "lodash.clonedeep": "4.5.0",
-        "moment": "2.22.2",
-        "validator": "10.8.0",
-        "yargs-parser": "11.0.0"
+        "moment": "2.24.0",
+        "validator": "10.11.0",
+        "yargs-parser": "13.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz",
+          "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "moment": {
+          "version": "2.24.0",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+          "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+        }
       }
     },
     "cookie": {
@@ -3920,12 +3989,6 @@
       "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
       "dev": true
     },
-    "css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
-      "dev": true
-    },
     "cssdb": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.3.0.tgz",
@@ -4213,12 +4276,6 @@
         }
       }
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
-      "dev": true
-    },
     "del": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
@@ -5144,23 +5201,38 @@
       }
     },
     "eslint-plugin-node": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-8.0.1.tgz",
-      "integrity": "sha512-ZjOjbjEi6jd82rIpFSgagv4CHWzG9xsQAVp1ZPlhRnnYxcTgENUVBvhYmkQ7GvT1QFijUSo69RaiOJKhMu6i8w==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-9.1.0.tgz",
+      "integrity": "sha512-ZwQYGm6EoV2cfLpE1wxJWsfnKUIXfM/KM09/TlorkukgCAwmkgajEJnPCmyzoFPQQkmvo5DrW/nyKutNIw36Mw==",
       "dev": true,
       "requires": {
-        "eslint-plugin-es": "^1.3.1",
+        "eslint-plugin-es": "^1.4.0",
         "eslint-utils": "^1.3.1",
-        "ignore": "^5.0.2",
+        "ignore": "^5.1.1",
         "minimatch": "^3.0.4",
-        "resolve": "^1.8.1",
-        "semver": "^5.5.0"
+        "resolve": "^1.10.1",
+        "semver": "^6.1.0"
       },
       "dependencies": {
         "ignore": {
-          "version": "5.0.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.0.4.tgz",
-          "integrity": "sha512-WLsTMEhsQuXpCiG173+f3aymI43SXa+fB1rSfbzyP4GkPP+ZFVuO0/3sFUGNBtifisPeDcl/uD/Y2NxZ7xFq4g==",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz",
+          "integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.11.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
+          "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        },
+        "semver": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz",
+          "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==",
           "dev": true
         }
       }
@@ -5746,12 +5818,12 @@
       }
     },
     "file-loader": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-3.0.1.tgz",
-      "integrity": "sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.0.0.tgz",
+      "integrity": "sha512-roAbL6IdSGczwfXxhMi6Zq+jD4IfUpL0jWHD7fvmjdOVb7xBfdRUHe4LpBgO23VtVK5AW1OlWZo0p34Jvx3iWg==",
       "dev": true,
       "requires": {
-        "loader-utils": "^1.0.2",
+        "loader-utils": "^1.2.2",
         "schema-utils": "^1.0.0"
       }
     },
@@ -6116,9 +6188,9 @@
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
     },
     "fs-extra": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+      "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -6735,12 +6807,6 @@
         "simple-git": "^1.85.0"
       }
     },
-    "gather-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gather-stream/-/gather-stream-1.0.0.tgz",
-      "integrity": "sha1-szmUr0V6gRVwDUEPMXczy+egkEs=",
-      "dev": true
-    },
     "gaxios": {
       "version": "1.8.3",
       "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-1.8.3.tgz",
@@ -8442,12 +8508,6 @@
       "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
       "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
     },
-    "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
-      "dev": true
-    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -8526,6 +8586,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
       "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dev": true,
       "requires": {
         "minimist": "^1.2.0"
       }
@@ -10003,9 +10064,9 @@
       "integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q=="
     },
     "node-emoji": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
-      "integrity": "sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
       "dev": true,
       "requires": {
         "lodash.toarray": "^4.4.0"
@@ -10161,6 +10222,12 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
     "npm-install-package": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/npm-install-package/-/npm-install-package-2.1.0.tgz",
@@ -10921,62 +10988,6 @@
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
     },
-    "perfectionist": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/perfectionist/-/perfectionist-2.4.0.tgz",
-      "integrity": "sha1-wUetNxThJkZ/F2QSnuct+GHUfqA=",
-      "dev": true,
-      "requires": {
-        "comment-regex": "^1.0.0",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.0",
-        "postcss": "^5.0.8",
-        "postcss-scss": "^0.3.0",
-        "postcss-value-parser": "^3.3.0",
-        "read-file-stdin": "^0.2.0",
-        "string.prototype.repeat": "^0.2.0",
-        "vendors": "^1.0.0",
-        "write-file-stdout": "0.0.2"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "5.2.18",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^1.1.3",
-            "js-base64": "^2.1.9",
-            "source-map": "^0.5.6",
-            "supports-color": "^3.2.3"
-          }
-        },
-        "postcss-scss": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.3.1.tgz",
-          "integrity": "sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks=",
-          "dev": true,
-          "requires": {
-            "postcss": "^5.2.4"
-          }
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
-      }
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11493,13 +11504,13 @@
       }
     },
     "postcss-js": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.0.tgz",
-      "integrity": "sha512-9kAApW9G5kN8FkQ0ZdvSmbgbHIRrKmXtde2ZWYbwrW51gfEWfGsLlUu57mTpioPrmQlQFOgEvaeGYp+poqlX0A==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.1.tgz",
+      "integrity": "sha512-8XQGohCbj6+kq8e3w6WlexkGaSjb5S8zoXnH49eB8JC6+qN2kQW+ib6fTjRgCpRRN9eeFOhMlD0NDjThW1DCBg==",
       "dev": true,
       "requires": {
-        "camelcase-css": "^2.0.0",
-        "postcss": "^7.0.0"
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.14"
       }
     },
     "postcss-jsx": {
@@ -11790,13 +11801,13 @@
       }
     },
     "postcss-nested": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.1.tgz",
-      "integrity": "sha512-3+V8+g+i9zUQ/AADNtBj3DVVvSOhRCV7W8Kzn9n4ViWJtSQrSdtIJnxZaupfdTrnhCkY86sAsuKVxBCuyfJDeA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz",
+      "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.6",
-        "postcss-selector-parser": "^5.0.0-rc.4"
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^5.0.0"
       }
     },
     "postcss-nesting": {
@@ -12573,24 +12584,15 @@
       }
     },
     "raw-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-2.0.0.tgz",
-      "integrity": "sha512-kZnO5MoIyrojfrPWqrhFNLZemIAX8edMOCp++yC5RKxzFB3m92DqKNhKlU6+FvpOhWtvyh3jOaD7J6/9tpdIKg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-3.0.0.tgz",
+      "integrity": "sha512-FsELYliOpX5HdPdxa7PzTmEc5OTchmLUs/r4f8oLDGCYE+xC2FjVbDXzdyLcBrdlDnvkx1x5wzphixcWpxJG5w==",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
         "schema-utils": "^1.0.0"
       }
     },
-    "read-file-stdin": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz",
-      "integrity": "sha1-JezP86FTtoCa+ssj7hU4fbng7mE=",
-      "dev": true,
-      "requires": {
-        "gather-stream": "^1.0.0"
-      }
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -12727,9 +12729,9 @@
       "integrity": "sha512-cu8EF+MtkwI4DLIT0x9P8qNTLFhQD4jLfxLR0cCNkeGzs87FN6879JOJwNQR/1zD7aSYNbU0hgsV9zGY71Itvw=="
     },
     "redis-mock": {
-      "version": "0.43.0",
-      "resolved": "https://registry.npmjs.org/redis-mock/-/redis-mock-0.43.0.tgz",
-      "integrity": "sha512-ayNlCxbeaVp16U5HU220C24lFk7TEzW8hL4RE5SXv/GeKq+P4ek1QqKKbu0K2QkGRdO2bvHE2ymJ/pbBLqyUww==",
+      "version": "0.44.0",
+      "resolved": "https://registry.npmjs.org/redis-mock/-/redis-mock-0.44.0.tgz",
+      "integrity": "sha512-n28zlPa8BWX34XnaIfNDZc/SJn2H6xlnP5c01+s/86rBm+8VGuOltcFFZXaI9IKwIPA4kJD2cdf1dP3P+eNjPA==",
       "dev": true
     },
     "redis-parser": {
@@ -14293,12 +14295,6 @@
         "function-bind": "^1.0.2"
       }
     },
-    "string.prototype.repeat": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz",
-      "integrity": "sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=",
-      "dev": true
-    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -14344,16 +14340,6 @@
       "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
       "dev": true
     },
-    "strip-comments": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
-      "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==",
-      "dev": true,
-      "requires": {
-        "babel-extract-comments": "^1.0.0",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0"
-      }
-    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -15036,26 +15022,24 @@
       }
     },
     "tailwindcss": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-0.7.4.tgz",
-      "integrity": "sha512-+GeQjHRJ2VmeLkrNwMCbPDfm2cc5P8eoc7n+DtZfI8oQdlo5eSHqsIlPEuZOtoqQlIALsd2jAggWrUUBFGP2ow==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.0.3.tgz",
+      "integrity": "sha512-myjuB0hqqLiXQCea0hEeZfrQVxzmkhtgi7HsuwJgXaVPgBp+7r/wywOvkDTUS8sQ1LraF43OLatip0yhfo/FtA==",
       "dev": true,
       "requires": {
         "autoprefixer": "^9.4.5",
         "bytes": "^3.0.0",
         "chalk": "^2.4.1",
-        "css.escape": "^1.5.1",
-        "fs-extra": "^4.0.2",
-        "lodash": "^4.17.5",
+        "fs-extra": "^8.0.0",
+        "lodash": "^4.17.11",
         "node-emoji": "^1.8.1",
-        "perfectionist": "^2.4.0",
+        "normalize.css": "^8.0.1",
         "postcss": "^7.0.11",
         "postcss-functions": "^3.0.0",
         "postcss-js": "^2.0.0",
         "postcss-nested": "^4.1.1",
-        "postcss-selector-parser": "^5.0.0",
-        "pretty-hrtime": "^1.0.3",
-        "strip-comments": "^1.0.2"
+        "postcss-selector-parser": "^6.0.0",
+        "pretty-hrtime": "^1.0.3"
       },
       "dependencies": {
         "ansi-styles": {
@@ -15078,6 +15062,23 @@
             "supports-color": "^5.3.0"
           }
         },
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15887,9 +15888,9 @@
       }
     },
     "validator": {
-      "version": "10.8.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-10.8.0.tgz",
-      "integrity": "sha512-mXqMxfCh5NLsVgYVKl9WvnHNDPCcbNppHSPPowu0VjtSsGWVY+z8hJF44edLR1nbLNzi3jYoYsIl8KZpioIk6g=="
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-10.11.0.tgz",
+      "integrity": "sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw=="
     },
     "vary": {
       "version": "1.1.2",
@@ -17005,12 +17006,6 @@
         "signal-exit": "^3.0.2"
       }
     },
-    "write-file-stdout": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-stdout/-/write-file-stdout-0.0.2.tgz",
-      "integrity": "sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=",
-      "dev": true
-    },
     "ws": {
       "version": "github:dannycoates/ws#c83cbb3bce478122cedcb8c475d9e86e1112824a",
       "from": "github:dannycoates/ws",
@@ -17279,9 +17274,9 @@
       }
     },
     "yargs-parser": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.0.0.tgz",
-      "integrity": "sha512-dvsafRjM45h79WOTvS/dP35Sb31SlGAKz6tFjI97kGC4MJFBuzTZY6TTYHrz0QSMQdkyd8Y+RsOMLr+JY0nPFQ==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.0.0.tgz",
+      "integrity": "sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==",
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
diff --git a/package.json b/package.json
index 20a62db8..1f3f4127 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "stylelint-no-unsupported-browser-features": "^3.0.2",
     "svgo": "^1.2.2",
     "svgo-loader": "^2.2.0",
-    "tailwindcss": "^0.7.4",
+    "tailwindcss": "^1.0.3",
     "val-loader": "^1.1.1",
     "wdio-docker-service": "^1.4.2",
     "wdio-dot-reporter": "0.0.10",
diff --git a/postcss.config.js b/postcss.config.js
index 2cd81fe6..bef8b68f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -6,7 +6,7 @@ class TailwindExtractor {
 
 const options = {
   plugins: [
-    require('tailwindcss')('./tailwind.js'),
+    require('tailwindcss')('./tailwind.config.js'),
     require('postcss-preset-env')
   ]
 };
diff --git a/server/routes/index.js b/server/routes/index.js
index f9688bfc..44572348 100644
--- a/server/routes/index.js
+++ b/server/routes/index.js
@@ -104,6 +104,7 @@ module.exports = function(app) {
   app.post(`/api/info/:id${ID_REGEX}`, auth.owner, require('./info'));
   app.post('/api/metrics', require('./metrics'));
   app.get('/__version__', function(req, res) {
+    // eslint-disable-next-line node/no-missing-require
     res.sendFile(require.resolve('../../dist/version.json'));
   });
 
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..b64a4def
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,429 @@
+const colors = {
+  transparent: 'transparent',
+
+  black: '#22292f',
+  'grey-darkest': '#4a4a4f',
+  'grey-darker': '#606f7b',
+  'grey-dark': '#8795a1',
+  grey: '#B1B1B3',
+  'grey-light': '#dae1e7',
+  'grey-banner': '#f0f0f4',
+  'grey-transparent': 'hsla(250, 13%, 9%, .2)',
+  'grey-lighter': '#f1f5f8',
+  'grey-lightest': '#F9F9FA',
+  white: '#ffffff',
+
+  'red-darkest': '#3b0d0c',
+  'red-darker': '#621b18',
+  'red-dark': '#cc1f1a',
+  red: '#e3342f',
+  'red-light': '#ef5753',
+  'red-lighter': '#f9acaa',
+  'red-lightest': '#fcebea',
+
+  'orange-darkest': '#462a16',
+  'orange-darker': '#613b1f',
+  'orange-dark': '#de751f',
+  orange: '#f6993f',
+  'orange-light': '#faad63',
+  'orange-lighter': '#fcd9b6',
+  'orange-lightest': '#fff5eb',
+
+  'yellow-darkest': '#453411',
+  'yellow-darker': '#684f1d',
+  'yellow-dark': '#f2d024',
+  yellow: '#ffed4a',
+  'yellow-light': '#fff382',
+  'yellow-lighter': '#fff9c2',
+  'yellow-lightest': '#fcfbeb',
+
+  'green-darkest': '#003706',
+  'green-darker': '#006504',
+  'green-dark': '#058b00',
+  green: '#12bc00',
+  'green-light': '#51d88a',
+  'green-lighter': '#a2f5bf',
+  'green-lightest': '#e3fcec',
+
+  'teal-darkest': '#0d3331',
+  'teal-darker': '#20504f',
+  'teal-dark': '#38a89d',
+  teal: '#4dc0b5',
+  'teal-light': '#64d5ca',
+  'teal-lighter': '#a0f0ed',
+  'teal-lightest': '#e8fffe',
+
+  'blue-darkest': '#002275',
+  'blue-darker': '#003eaa',
+  'blue-dark': '#0060df',
+  blue: '#0a84ff',
+  'blue-light': '#6cb2eb',
+  'blue-lighter': '#bcdefa',
+  'blue-lightest': '#eff8ff',
+
+  'indigo-darkest': '#191e38',
+  'indigo-darker': '#2f365f',
+  'indigo-dark': '#5661b3',
+  indigo: '#6574cd',
+  'indigo-light': '#7886d7',
+  'indigo-lighter': '#b2b7ff',
+  'indigo-lightest': '#e6e8ff',
+
+  'purple-darkest': '#21183c',
+  'purple-darker': '#382b5f',
+  'purple-dark': '#794acf',
+  purple: '#9561e2',
+  'purple-light': '#a779e9',
+  'purple-lighter': '#d6bbfc',
+  'purple-lightest': '#f3ebff',
+
+  'pink-darkest': '#451225',
+  'pink-darker': '#6f213f',
+  'pink-dark': '#eb5286',
+  pink: '#f66d9b',
+  'pink-light': '#fa7ea8',
+  'pink-lighter': '#ffbbca',
+  'pink-lightest': '#ffebef',
+  cloud: 'rgba(255, 255, 255, 0.8)',
+  violet: 'hsl(258, 57%, 35%)'
+};
+
+module.exports = {
+  theme: {
+    colors: colors,
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px'
+    },
+    fontFamily: {
+      sans: [
+        'Inter',
+        'system-ui',
+        'BlinkMacSystemFont',
+        '-apple-system',
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Cantarell',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        'sans-serif'
+      ],
+      serif: [
+        'Constantia',
+        'Lucida Bright',
+        'Lucidabright',
+        'Lucida Serif',
+        'Lucida',
+        'DejaVu Serif',
+        'Bitstream Vera Serif',
+        'Liberation Serif',
+        'Georgia',
+        'serif'
+      ],
+      mono: [
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace'
+      ]
+    },
+    fontSize: {
+      xs: '.75rem', // 12px
+      sm: '.875rem', // 14px
+      base: '1rem', // 16px
+      lg: '1.125rem', // 18px
+      xl: '1.25rem', // 20px
+      '2xl': '1.5rem', // 24px
+      '3xl': '2rem', // 32px
+      '4xl': '2.25rem', // 36px
+      '5xl': '3rem' // 48px
+    },
+    fontWeight: {
+      hairline: 100,
+      thin: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900
+    },
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      normal: 1.5,
+      loose: 1.75
+    },
+    letterSpacing: {
+      tight: '-0.05em',
+      normal: '0',
+      wide: '0.05em'
+    },
+    textColor: colors,
+    backgroundColor: colors,
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain'
+    },
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px'
+    },
+    borderColor: global.Object.assign(
+      { default: colors['grey-light'] },
+      colors
+    ),
+    borderRadius: {
+      none: '0',
+      sm: '.125rem',
+      default: '.25rem',
+      lg: '.5rem',
+      xl: '1rem',
+      full: '9999px'
+    },
+    width: {
+      auto: 'auto',
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '48': '12rem',
+      '64': '16rem',
+      '128': '32rem',
+      '1/2': '50%',
+      '1/3': '33.33333%',
+      '2/3': '66.66667%',
+      '1/4': '25%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.66667%',
+      '5/6': '83.33333%',
+      full: '100%',
+      screen: '100vw'
+    },
+    height: {
+      auto: 'auto',
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '48': '12rem',
+      '64': '16rem',
+      full: '100%',
+      screen: '100vh'
+    },
+    minWidth: {
+      '0': '0',
+      full: '100%'
+    },
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh'
+    },
+    maxWidth: {
+      xs: '20rem',
+      sm: '30rem',
+      md: '40rem',
+      lg: '50rem',
+      xl: '60rem',
+      '2xl': '70rem',
+      '3xl': '80rem',
+      '4xl': '90rem',
+      '5xl': '100rem',
+      full: '100%'
+    },
+    maxHeight: {
+      full: '100%',
+      'half-screen': '50vh',
+      screen: '100vh'
+    },
+    padding: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem'
+    },
+    margin: {
+      auto: 'auto',
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '-px': '-1px',
+      '-1': '-0.25rem',
+      '-2': '-0.5rem',
+      '-3': '-0.75rem',
+      '-4': '-1rem',
+      '-5': '-1.25rem',
+      '-6': '-1.5rem',
+      '-8': '-2rem',
+      '-10': '-2.5rem',
+      '-12': '-3rem',
+      '-16': '-4rem',
+      '-20': '-5rem',
+      '-24': '-6rem',
+      '-32': '-8rem'
+    },
+    boxShadow: {
+      default: '0 2px 4px 0 rgba(0,0,0,0.10)',
+      md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
+      lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+      inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+      outline: '0 0 0 3px rgba(52,144,220,0.5)',
+      none: 'none',
+      cloud: '0 0 5rem 5rem white',
+      btn:
+        'inset 0 -6px 12px 0 rgba(0,70,144,0.25), 0 4px 6px 0 rgba(34,0,51,0.04), 0 1px 10px 0 rgba(7,48,114,0.12), 0 2px 8px -1px rgba(14,13,26,0.08)'
+    },
+    opacity: {
+      '0': '0',
+      '25': '.25',
+      '50': '.5',
+      '75': '.75',
+      '100': '1'
+    },
+    fill: {
+      current: 'currentColor'
+    },
+    stroke: {
+      current: 'currentColor'
+    },
+
+    zIndex: {
+      auto: 'auto',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50
+    }
+  },
+
+  variants: {
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: [],
+    borderColor: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexDirection: ['responsive'],
+    flexWrap: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    alignContent: ['responsive'],
+    justifyContent: ['responsive'],
+    flex: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    float: ['responsive'],
+    fontFamily: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    opacity: ['responsive', 'hover'],
+    outline: ['focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    inset: ['responsive'],
+    resize: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    fill: [],
+    stroke: [],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus'],
+    fontSize: ['responsive'],
+    fontStyle: ['responsive', 'hover', 'focus'],
+    fontSmoothing: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive', 'hover', 'focus'],
+    letterSpacing: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    wordBreak: ['responsive'],
+    width: ['responsive'],
+    zIndex: ['responsive']
+  },
+  corePlugins: {
+    container: false
+  },
+  plugins: []
+};
diff --git a/tailwind.js b/tailwind.js
deleted file mode 100644
index 5a24b05b..00000000
--- a/tailwind.js
+++ /dev/null
@@ -1,933 +0,0 @@
-/*
-
-Tailwind - The Utility-First CSS Framework
-
-A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
-David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
-
-Welcome to the Tailwind config file. This is where you can customize
-Tailwind specifically for your project. Don't be intimidated by the
-length of this file. It's really just a big JavaScript object and
-we've done our very best to explain each section.
-
-View the full documentation at https://tailwindcss.com.
-
-
-|-------------------------------------------------------------------------------
-| The default config
-|-------------------------------------------------------------------------------
-|
-| This variable contains the default Tailwind config. You don't have
-| to use it, but it can sometimes be helpful to have available. For
-| example, you may choose to merge your custom configuration
-| values with some of the Tailwind defaults.
-|
-*/
-
-// let defaultConfig = require('tailwindcss/defaultConfig')()
-
-/*
-|-------------------------------------------------------------------------------
-| Colors                                    https://tailwindcss.com/docs/colors
-|-------------------------------------------------------------------------------
-|
-| Here you can specify the colors used in your project. To get you started,
-| we've provided a generous palette of great looking colors that are perfect
-| for prototyping, but don't hesitate to change them for your project. You
-| own these colors, nothing will break if you change everything about them.
-|
-| We've used literal color names ("red", "blue", etc.) for the default
-| palette, but if you'd rather use functional names like "primary" and
-| "secondary", or even a numeric scale like "100" and "200", go for it.
-|
-*/
-
-const colors = {
-  transparent: 'transparent',
-
-  black: '#22292f',
-  'grey-darkest': '#4a4a4f',
-  'grey-darker': '#606f7b',
-  'grey-dark': '#8795a1',
-  grey: '#B1B1B3',
-  'grey-light': '#dae1e7',
-  'grey-banner': '#f0f0f4',
-  'grey-transparent': 'hsla(250, 13%, 9%, .2)',
-  'grey-lighter': '#f1f5f8',
-  'grey-lightest': '#F9F9FA',
-  white: '#ffffff',
-
-  'red-darkest': '#3b0d0c',
-  'red-darker': '#621b18',
-  'red-dark': '#cc1f1a',
-  red: '#e3342f',
-  'red-light': '#ef5753',
-  'red-lighter': '#f9acaa',
-  'red-lightest': '#fcebea',
-
-  'orange-darkest': '#462a16',
-  'orange-darker': '#613b1f',
-  'orange-dark': '#de751f',
-  orange: '#f6993f',
-  'orange-light': '#faad63',
-  'orange-lighter': '#fcd9b6',
-  'orange-lightest': '#fff5eb',
-
-  'yellow-darkest': '#453411',
-  'yellow-darker': '#684f1d',
-  'yellow-dark': '#f2d024',
-  yellow: '#ffed4a',
-  'yellow-light': '#fff382',
-  'yellow-lighter': '#fff9c2',
-  'yellow-lightest': '#fcfbeb',
-
-  'green-darkest': '#003706',
-  'green-darker': '#006504',
-  'green-dark': '#058b00',
-  green: '#12bc00',
-  'green-light': '#51d88a',
-  'green-lighter': '#a2f5bf',
-  'green-lightest': '#e3fcec',
-
-  'teal-darkest': '#0d3331',
-  'teal-darker': '#20504f',
-  'teal-dark': '#38a89d',
-  teal: '#4dc0b5',
-  'teal-light': '#64d5ca',
-  'teal-lighter': '#a0f0ed',
-  'teal-lightest': '#e8fffe',
-
-  'blue-darkest': '#002275',
-  'blue-darker': '#003eaa',
-  'blue-dark': '#0060df',
-  blue: '#0a84ff',
-  'blue-light': '#6cb2eb',
-  'blue-lighter': '#bcdefa',
-  'blue-lightest': '#eff8ff',
-
-  'indigo-darkest': '#191e38',
-  'indigo-darker': '#2f365f',
-  'indigo-dark': '#5661b3',
-  indigo: '#6574cd',
-  'indigo-light': '#7886d7',
-  'indigo-lighter': '#b2b7ff',
-  'indigo-lightest': '#e6e8ff',
-
-  'purple-darkest': '#21183c',
-  'purple-darker': '#382b5f',
-  'purple-dark': '#794acf',
-  purple: '#9561e2',
-  'purple-light': '#a779e9',
-  'purple-lighter': '#d6bbfc',
-  'purple-lightest': '#f3ebff',
-
-  'pink-darkest': '#451225',
-  'pink-darker': '#6f213f',
-  'pink-dark': '#eb5286',
-  pink: '#f66d9b',
-  'pink-light': '#fa7ea8',
-  'pink-lighter': '#ffbbca',
-  'pink-lightest': '#ffebef',
-  cloud: 'rgba(255, 255, 255, 0.8)',
-  violet: 'hsl(258, 57%, 35%)'
-};
-
-module.exports = {
-  /*
-  |-----------------------------------------------------------------------------
-  | Colors                                  https://tailwindcss.com/docs/colors
-  |-----------------------------------------------------------------------------
-  |
-  | The color palette defined above is also assigned to the "colors" key of
-  | your Tailwind config. This makes it easy to access them in your CSS
-  | using Tailwind's config helper. For example:
-  |
-  | .error { color: config('colors.red') }
-  |
-  */
-
-  colors: colors,
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Screens                      https://tailwindcss.com/docs/responsive-design
-  |-----------------------------------------------------------------------------
-  |
-  | Screens in Tailwind are translated to CSS media queries. They define the
-  | responsive breakpoints for your project. By default Tailwind takes a
-  | "mobile first" approach, where each screen size represents a minimum
-  | viewport width. Feel free to have as few or as many screens as you
-  | want, naming them in whatever way you'd prefer for your project.
-  |
-  | Tailwind also allows for more complex screen definitions, which can be
-  | useful in certain situations. Be sure to see the full responsive
-  | documentation for a complete list of options.
-  |
-  | Class name: .{screen}:{utility}
-  |
-  */
-
-  screens: {
-    sm: '576px',
-    md: '768px',
-    lg: '992px',
-    xl: '1200px'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Fonts                                    https://tailwindcss.com/docs/fonts
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your project's font stack, or font families.
-  | Keep in mind that Tailwind doesn't actually load any fonts for you.
-  | If you're using custom fonts you'll need to import them prior to
-  | defining them here.
-  |
-  | By default we provide a native font stack that works remarkably well on
-  | any device or OS you're using, since it just uses the default fonts
-  | provided by the platform.
-  |
-  | Class name: .font-{name}
-  |
-  */
-
-  fonts: {
-    sans: [
-      'Inter',
-      'system-ui',
-      'BlinkMacSystemFont',
-      '-apple-system',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      'sans-serif'
-    ],
-    serif: [
-      'Constantia',
-      'Lucida Bright',
-      'Lucidabright',
-      'Lucida Serif',
-      'Lucida',
-      'DejaVu Serif',
-      'Bitstream Vera Serif',
-      'Liberation Serif',
-      'Georgia',
-      'serif'
-    ],
-    mono: [
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      'Liberation Mono',
-      'Courier New',
-      'monospace'
-    ]
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Text sizes                         https://tailwindcss.com/docs/text-sizing
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your text sizes. Name these in whatever way
-  | makes the most sense to you. We use size names by default, but
-  | you're welcome to use a numeric scale or even something else
-  | entirely.
-  |
-  | By default Tailwind uses the "rem" unit type for most measurements.
-  | This allows you to set a root font size which all other sizes are
-  | then based on. That said, you are free to use whatever units you
-  | prefer, be it rems, ems, pixels or other.
-  |
-  | Class name: .text-{size}
-  |
-  */
-
-  textSizes: {
-    xs: '.75rem', // 12px
-    sm: '.875rem', // 14px
-    base: '1rem', // 16px
-    lg: '1.125rem', // 18px
-    xl: '1.25rem', // 20px
-    '2xl': '1.5rem', // 24px
-    '3xl': '1.875rem', // 30px
-    '4xl': '2.25rem', // 36px
-    '5xl': '3rem' // 48px
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Font weights                       https://tailwindcss.com/docs/font-weight
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your font weights. We've provided a list of
-  | common font weight names with their respective numeric scale values
-  | to get you started. It's unlikely that your project will require
-  | all of these, so we recommend removing those you don't need.
-  |
-  | Class name: .font-{weight}
-  |
-  */
-
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Leading (line height)              https://tailwindcss.com/docs/line-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your line height values, or as we call
-  | them in Tailwind, leadings.
-  |
-  | Class name: .leading-{size}
-  |
-  */
-
-  leading: {
-    none: 1,
-    tight: 1.25,
-    normal: 1.5,
-    loose: 1.75
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your letter spacing values, or as we call
-  | them in Tailwind, tracking.
-  |
-  | Class name: .tracking-{size}
-  |
-  */
-
-  tracking: {
-    tight: '-0.05em',
-    normal: '0',
-    wide: '0.05em'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Text colors                         https://tailwindcss.com/docs/text-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your text colors. By default these use the
-  | color palette we defined above, however you're welcome to set these
-  | independently if that makes sense for your project.
-  |
-  | Class name: .text-{color}
-  |
-  */
-
-  textColors: colors,
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Background colors             https://tailwindcss.com/docs/background-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your background colors. By default these use
-  | the color palette we defined above, however you're welcome to set
-  | these independently if that makes sense for your project.
-  |
-  | Class name: .bg-{color}
-  |
-  */
-
-  backgroundColors: colors,
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Background sizes               https://tailwindcss.com/docs/background-size
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your background sizes. We provide some common
-  | values that are useful in most projects, but feel free to add other sizes
-  | that are specific to your project here as well.
-  |
-  | Class name: .bg-{size}
-  |
-  */
-
-  backgroundSize: {
-    auto: 'auto',
-    cover: 'cover',
-    contain: 'contain'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border widths                     https://tailwindcss.com/docs/border-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border widths. Take note that border
-  | widths require a special "default" value set as well. This is the
-  | width that will be used when you do not specify a border width.
-  |
-  | Class name: .border{-side?}{-width?}
-  |
-  */
-
-  borderWidths: {
-    default: '1px',
-    '0': '0',
-    '2': '2px',
-    '4': '4px',
-    '8': '8px'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border colors                     https://tailwindcss.com/docs/border-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border colors. By default these use the
-  | color palette we defined above, however you're welcome to set these
-  | independently if that makes sense for your project.
-  |
-  | Take note that border colors require a special "default" value set
-  | as well. This is the color that will be used when you do not
-  | specify a border color.
-  |
-  | Class name: .border-{color}
-  |
-  */
-
-  borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border radius                    https://tailwindcss.com/docs/border-radius
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border radius values. If a `default` radius
-  | is provided, it will be made available as the non-suffixed `.rounded`
-  | utility.
-  |
-  | If your scale includes a `0` value to reset already rounded corners, it's
-  | a good idea to put it first so other values are able to override it.
-  |
-  | Class name: .rounded{-side?}{-size?}
-  |
-  */
-
-  borderRadius: {
-    none: '0',
-    sm: '.125rem',
-    default: '.25rem',
-    lg: '.5rem',
-    xl: '1rem',
-    full: '9999px'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Width                                    https://tailwindcss.com/docs/width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your width utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based numeric scale, a percentage
-  | based fraction scale, plus some other common use-cases. You
-  | can, of course, modify these values as needed.
-  |
-  |
-  | It's also worth mentioning that Tailwind automatically escapes
-  | invalid CSS class name characters, which allows you to have
-  | awesome classes like .w-2/3.
-  |
-  | Class name: .w-{size}
-  |
-  */
-
-  width: {
-    auto: 'auto',
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '64': '16rem',
-    '128': '32rem',
-    '1/2': '50%',
-    '1/3': '33.33333%',
-    '2/3': '66.66667%',
-    '1/4': '25%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.66667%',
-    '5/6': '83.33333%',
-    full: '100%',
-    screen: '100vw'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Height                                  https://tailwindcss.com/docs/height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your height utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based numeric scale plus some other
-  | common use-cases. You can, of course, modify these values as
-  | needed.
-  |
-  | Class name: .h-{size}
-  |
-  */
-
-  height: {
-    auto: 'auto',
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '64': '16rem',
-    full: '100%',
-    screen: '100vh'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Minimum width                        https://tailwindcss.com/docs/min-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your minimum width utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | couple common use-cases by default. You can, of course, modify
-  | these values as needed.
-  |
-  | Class name: .min-w-{size}
-  |
-  */
-
-  minWidth: {
-    '0': '0',
-    full: '100%'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Minimum height                      https://tailwindcss.com/docs/min-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your minimum height utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | few common use-cases by default. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .min-h-{size}
-  |
-  */
-
-  minHeight: {
-    '0': '0',
-    full: '100%',
-    screen: '100vh'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Maximum width                        https://tailwindcss.com/docs/max-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your maximum width utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based scale and a "full width" size,
-  | which is basically a reset utility. You can, of course,
-  | modify these values as needed.
-  |
-  | Class name: .max-w-{size}
-  |
-  */
-
-  maxWidth: {
-    xs: '20rem',
-    sm: '30rem',
-    md: '40rem',
-    lg: '50rem',
-    xl: '60rem',
-    '2xl': '70rem',
-    '3xl': '80rem',
-    '4xl': '90rem',
-    '5xl': '100rem',
-    full: '100%'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Maximum height                      https://tailwindcss.com/docs/max-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your maximum height utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | couple common use-cases by default. You can, of course, modify
-  | these values as needed.
-  |
-  | Class name: .max-h-{size}
-  |
-  */
-
-  maxHeight: {
-    full: '100%',
-    'half-screen': '50vh',
-    screen: '100vh'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Padding                                https://tailwindcss.com/docs/padding
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your padding utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default we
-  | provide a sensible rem based numeric scale plus a couple other
-  | common use-cases like "1px". You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .p{side?}-{size}
-  |
-  */
-
-  padding: {
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Margin                                  https://tailwindcss.com/docs/margin
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your margin utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default we
-  | provide a sensible rem based numeric scale plus a couple other
-  | common use-cases like "1px". You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .m{side?}-{size}
-  |
-  */
-
-  margin: {
-    auto: 'auto',
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Negative margin                https://tailwindcss.com/docs/negative-margin
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your negative margin utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. By default we
-  | provide matching values to the padding scale since these utilities
-  | generally get used together. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .-m{side?}-{size}
-  |
-  */
-
-  negativeMargin: {
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Shadows                                https://tailwindcss.com/docs/shadows
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your shadow utilities. As you can see from
-  | the defaults we provide, it's possible to apply multiple shadows
-  | per utility using comma separation.
-  |
-  | If a `default` shadow is provided, it will be made available as the non-
-  | suffixed `.shadow` utility.
-  |
-  | Class name: .shadow-{size?}
-  |
-  */
-
-  shadows: {
-    default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-    md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-    lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-    outline: '0 0 0 3px rgba(52,144,220,0.5)',
-    none: 'none',
-    cloud: '0 0 5rem 5rem white',
-    btn:
-      'inset 0 -6px 12px 0 rgba(0,70,144,0.25), 0 4px 6px 0 rgba(34,0,51,0.04), 0 1px 10px 0 rgba(7,48,114,0.12), 0 2px 8px -1px rgba(14,13,26,0.08)'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Z-index                                https://tailwindcss.com/docs/z-index
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your z-index utility values. By default we
-  | provide a sensible numeric scale. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .z-{index}
-  |
-  */
-
-  zIndex: {
-    auto: 'auto',
-    '0': 0,
-    '10': 10,
-    '20': 20,
-    '30': 30,
-    '40': 40,
-    '50': 50
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Opacity                                https://tailwindcss.com/docs/opacity
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your opacity utility values. By default we
-  | provide a sensible numeric scale. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .opacity-{name}
-  |
-  */
-
-  opacity: {
-    '0': '0',
-    '25': '.25',
-    '50': '.5',
-    '75': '.75',
-    '100': '1'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | SVG fill                                   https://tailwindcss.com/docs/svg
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your SVG fill colors. By default we just provide
-  | `fill-current` which sets the fill to the current text color. This lets you
-  | specify a fill color using existing text color utilities and helps keep the
-  | generated CSS file size down.
-  |
-  | Class name: .fill-{name}
-  |
-  */
-
-  svgFill: {
-    current: 'currentColor'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | SVG stroke                                 https://tailwindcss.com/docs/svg
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your SVG stroke colors. By default we just provide
-  | `stroke-current` which sets the stroke to the current text color. This lets
-  | you specify a stroke color using existing text color utilities and helps
-  | keep the generated CSS file size down.
-  |
-  | Class name: .stroke-{name}
-  |
-  */
-
-  svgStroke: {
-    current: 'currentColor'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Modules                  https://tailwindcss.com/docs/configuration#modules
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you control which modules are generated and what variants are
-  | generated for each of those modules.
-  |
-  | Currently supported variants:
-  |   - responsive
-  |   - hover
-  |   - focus
-  |   - active
-  |   - group-hover
-  |
-  | To disable a module completely, use `false` instead of an array.
-  |
-  */
-
-  modules: {
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover', 'focus'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderCollapse: [],
-    borderColors: ['responsive', 'hover', 'focus'],
-    borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
-    borderWidths: ['responsive'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    flexbox: ['responsive'],
-    float: ['responsive'],
-    fonts: ['responsive'],
-    fontWeights: ['responsive', 'hover', 'focus'],
-    height: ['responsive'],
-    leading: ['responsive'],
-    lists: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    negativeMargin: ['responsive'],
-    opacity: ['responsive', 'hover'],
-    outline: ['focus'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    shadows: ['responsive', 'hover', 'focus'],
-    svgFill: [],
-    svgStroke: [],
-    tableLayout: ['responsive'],
-    textAlign: ['responsive'],
-    textColors: ['responsive', 'hover', 'focus'],
-    textSizes: ['responsive'],
-    textStyle: ['responsive', 'hover', 'focus'],
-    tracking: ['responsive'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    zIndex: ['responsive']
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Plugins                                https://tailwindcss.com/docs/plugins
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you can register any plugins you'd like to use in your
-  | project. Tailwind's built-in `container` plugin is enabled by default to
-  | give you a Bootstrap-style responsive container component out of the box.
-  |
-  | Be sure to view the complete plugin documentation to learn more about how
-  | the plugin system works.
-  |
-  */
-
-  plugins: [
-    require('tailwindcss/plugins/container')({
-      // center: true,
-      // padding: '1rem',
-    })
-  ],
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Advanced Options         https://tailwindcss.com/docs/configuration#options
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you can tweak advanced configuration options. We recommend
-  | leaving these options alone unless you absolutely need to change them.
-  |
-  */
-
-  options: {
-    prefix: '',
-    important: false,
-    separator: ':'
-  }
-};