diff --git a/addon/components/api/x-toggles/template.hbs b/addon/components/api/x-toggles/template.hbs
index 48a8baa9b..a7c36d430 100644
--- a/addon/components/api/x-toggles/template.hbs
+++ b/addon/components/api/x-toggles/template.hbs
@@ -1,4 +1,4 @@
-<ul class="docs-list-reset docs-mb-6">
+<ul class="docs-mb-6">
   {{#each-in toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
       <li class="docs-inline docs-ml-4">
diff --git a/addon/components/docs-header/search-box/template.hbs b/addon/components/docs-header/search-box/template.hbs
index baf753299..be126f46d 100644
--- a/addon/components/docs-header/search-box/template.hbs
+++ b/addon/components/docs-header/search-box/template.hbs
@@ -1,5 +1,5 @@
 <div class="docs-relative docs-text-grey-darkest" data-search-box>
-  {{svg-jar "search" width=12 height=12 class="docs-absolute docs-pin-t docs-h-full docs-ml-1"}}
+  {{svg-jar "search" width=12 height=12 class="docs-absolute docs-top-0 docs-h-full docs-ml-1"}}
 
   {{!--
     This is a dumb input - so why not use the {{input}} helper? Because apparently
diff --git a/addon/components/docs-header/search-results/template.hbs b/addon/components/docs-header/search-results/template.hbs
index 7aba76b7d..aaa7a4198 100644
--- a/addon/components/docs-header/search-results/template.hbs
+++ b/addon/components/docs-header/search-results/template.hbs
@@ -7,7 +7,7 @@
     targetAttachment="bottom left"
     constraints=(array (hash to="window" attachment="together" pin=true))}}
 
-    <ul class="docs-w-76 docs-bg-white docs-shadow-md docs-list-reset" data-test-search-result-list>
+    <ul class="docs-w-76 docs-bg-white docs-shadow-md" data-test-search-result-list>
       {{#each (take 5 searchResults) as |result index|}}
         <li>
           {{docs-header/search-result
diff --git a/addon/components/docs-header/version-selector/template.hbs b/addon/components/docs-header/version-selector/template.hbs
index cd4b9a1f6..245fc5c84 100644
--- a/addon/components/docs-header/version-selector/template.hbs
+++ b/addon/components/docs-header/version-selector/template.hbs
@@ -4,7 +4,7 @@
   clickOutsideToClose=true
   onClose=(action on-close)
   targetAttachment="bottom right"}}
-  <ul class="docs-list-reset docs-mt-2 docs-bg-white docs-shadow-md docs-text-xs docs-rounded docs-z-10">
+  <ul class="docs-mt-2 docs-bg-white docs-shadow-md docs-text-xs docs-rounded docs-z-10">
     {{#each sortedVersions as |version|}}
       <li data-test-id="version">
         <a {{action "changeVersion" version}} href="#"
diff --git a/addon/components/docs-snippet/template.hbs b/addon/components/docs-snippet/template.hbs
index 1bc9ba33f..e87a112e1 100644
--- a/addon/components/docs-snippet/template.hbs
+++ b/addon/components/docs-snippet/template.hbs
@@ -19,7 +19,7 @@
       clipboardText=snippetText
       title="copy to clipboard"
       class="
-        docs-absolute docs-pin-t docs-pin-r docs-bg-transparent hover:docs-bg-transparent
+        docs-absolute docs-top-0 docs-right-0 docs-bg-transparent hover:docs-bg-transparent
         docs-border-none docs-opacity-50 hover:docs-opacity-100 docs-p-3 docs-text-white
       "
     }}
diff --git a/addon/components/docs-viewer/x-current-page-index/template.hbs b/addon/components/docs-viewer/x-current-page-index/template.hbs
index 008bc0c2e..c6e7a0d85 100644
--- a/addon/components/docs-viewer/x-current-page-index/template.hbs
+++ b/addon/components/docs-viewer/x-current-page-index/template.hbs
@@ -1,6 +1,6 @@
 <nav class="AddonDocs-DocsViewer-CurrentPageIndex docs-hidden xl:docs-block docs-flex-no-shrink docs-mr-auto" data-test-current-page-index>
-  <div class="docs-sticky docs-pin-t docs-pt-4 docs-pb-8 docs-pr-8 docs-max-h-screen docs-overflow-y-scroll">
-    <ul class="docs-list-reset docs-border-l docs-border-grey-lighter docs-pl-6 docs-leading-normal">
+  <div class="docs-sticky docs-top-0 docs-pt-4 docs-pb-8 docs-pr-8 docs-max-h-screen docs-overflow-y-scroll">
+    <ul class="docs-border-l docs-border-grey-lighter docs-pl-6 docs-leading-normal">
       {{#if pageIndex.length}}
         <li class="docs-mt-12 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs">
           On This Page
diff --git a/addon/components/docs-viewer/x-nav-list/component.js b/addon/components/docs-viewer/x-nav-list/component.js
index 1996d16e0..fbcee4154 100644
--- a/addon/components/docs-viewer/x-nav-list/component.js
+++ b/addon/components/docs-viewer/x-nav-list/component.js
@@ -1,11 +1,9 @@
-import { hbs } from 'ember-cli-htmlbars';
 import Component from '@ember/component';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default Component.extend({
   tagName: 'ul',
 
-  classNames: ['docs-list-reset'],
-
   layout: hbs`
     {{yield (hash
       item=(component 'docs-viewer/x-nav-item')
diff --git a/addon/components/docs-viewer/x-nav/template.hbs b/addon/components/docs-viewer/x-nav/template.hbs
index 8ed443e87..2e42f0945 100644
--- a/addon/components/docs-viewer/x-nav/template.hbs
+++ b/addon/components/docs-viewer/x-nav/template.hbs
@@ -10,8 +10,8 @@
 <div class="AddonDocs-DocsViewer-Nav docs-bg-grey-lightest docs-border-r docs-flex-no-shrink">
   <nav onclick={{action (mut isShowingMenu) false}}
     class="
-      docs-absolute docs-pin-r md:docs-relative docs-shadow-lg md:docs-shadow-none docs-mr-2 md:docs-mr-0 md:docs-pl-2
-      docs-max-w-xs docs-w-90% md:docs-w-72 docs-z-10 docs-transition md:docs-sticky md:docs-pin-t
+      docs-absolute docs-right-0 md:docs-relative docs-shadow-lg md:docs-shadow-none docs-mr-2 md:docs-mr-0 md:docs-pl-2
+      docs-max-w-xs docs-w-90% md:docs-w-72 docs-z-10 docs-transition md:docs-sticky md:docs-top-0
       {{if media.isMobile
         (if isShowingMenu "docs-opacity-100 docs-bg-white" "docs-opacity-0 docs-pointer-events-none")
       }}
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 105e6a112..26a785f80 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -1,7 +1,7 @@
 // Global settings
 $site-container: 1400px;
 
-@tailwind preflight;
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
diff --git a/addon/styles/components/_docs-container.scss b/addon/styles/components/_docs-container.scss
index debab6f85..3cb09e3dd 100644
--- a/addon/styles/components/_docs-container.scss
+++ b/addon/styles/components/_docs-container.scss
@@ -1,7 +1,7 @@
 .docs-container {
   @apply docs-px-4 docs-max-w-site-container docs-mx-auto;
 }
-@media (min-width: config('screens.md')) {
+@media (min-width: theme('screens.md')) {
   .docs-container {
     @apply docs-px-6;
   }
diff --git a/addon/styles/tailwind.config.js b/addon/styles/tailwind.config.js
new file mode 100644
index 000000000..cf8558b31
--- /dev/null
+++ b/addon/styles/tailwind.config.js
@@ -0,0 +1,840 @@
+/* eslint-disable */
+/*
+
+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 textSizesMap = {
+  xxs: '12px',
+  xs: '14px',
+  sm: '15px',
+  base: '16px',
+  'large-1': '18px',
+  'large-2': '20px',
+  'large-3': '22px',
+  'large-4': '24px',
+  'large-5': '30px',
+  'large-6': '36px',
+  'large-7': '42px',
+  'jumbo-1': '60px',
+  'jumbo-2': '74px',
+  'jumbo-3': '86px'
+};
+
+// Convert pixel sizes to REMs
+let fontSize = Object.keys(textSizesMap).reduce((memo, textSize) => {
+  let pixelValue = textSizesMap[textSize];
+  let remValue = `${+pixelValue.replace('px', '') / 16}rem`;
+
+  memo[textSize] = remValue;
+
+  return memo;
+}, {});
+
+module.exports = {
+  prefix: 'docs-',
+
+  theme: {
+    /*
+    |-----------------------------------------------------------------------------
+    | 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: {
+      transparent: 'transparent',
+      inherit: 'inherit',
+
+      black: '#22292f',
+      'grey-darkest': '#3d4852',
+      'grey-darker': '#606f7b',
+      'grey-dark': '#8795a1',
+      grey: '#b8c2cc',
+      'grey-light': '#dae1e7',
+      'grey-lighter': '#f1f5f8',
+      'grey-lightest': '#f8fafc',
+      white: 'white',
+
+      yellow: '#ffed4a',
+
+      'code-base': '#282c34',
+
+      // See the note in tailwind/compnents/docs-brand-colors.css
+      'brand-var': 'var(--brand-primary, #E04E39)'
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: font-family
+    |
+    */
+
+    fontFamily: {
+      title: ['"Crimson Text"', 'serif'],
+      sans: [
+        '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}
+    | CSS property: font-size
+    |
+    */
+
+    fontSize,
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: font-weight
+    |
+    */
+
+    fontWeight: {
+      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}
+    | CSS property: line-height
+    |
+    */
+
+    lineHeight: {
+      none: 1,
+      tight: 1.25,
+      small: 1.45,
+      normal: 1.625,
+      loose: 2
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: letter-spacing
+    |
+    */
+
+    letterSpacing: {
+      tight: '-0.2px',
+      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}
+    | CSS property: color
+    |
+    */
+
+    textColor: theme => theme('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}
+    | CSS property: background-color
+    |
+    */
+
+    backgroundColor: theme => theme('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}
+    | CSS property: background-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?}
+    | CSS property: border-width
+    |
+    */
+
+    borderWidth: {
+      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}
+    | CSS property: border-color
+    |
+    */
+
+    borderColor: theme => ({
+      default: theme('colors.grey-light'),
+      ...theme('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?}
+    | CSS property: border-radius
+    |
+    */
+
+    borderRadius: {
+      none: '0',
+      sm: '.125rem',
+      default: '.25rem',
+      lg: '.5rem',
+      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}
+    | CSS property: width
+    |
+    */
+
+    width: {
+      'site-container': '1400px',
+
+      auto: 'auto',
+      px: '1px',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+      '72': '18rem',
+      '76': '19rem',
+      '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%',
+      '90%': '90%',
+      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}
+    | CSS property: height
+    |
+    */
+
+    height: {
+      auto: 'auto',
+      px: '1px',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '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}
+    | CSS property: min-width
+    |
+    */
+
+    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}
+    | CSS property: min-height
+    |
+    */
+
+    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}
+    | CSS property: max-width
+    |
+    */
+
+    maxWidth: {
+      'site-container': '1400px',
+      'measure-byline': '12rem',
+
+      none: 'none',
+      xxs: '17rem',
+      xs: '20rem',
+      sm: '30rem',
+      md: '40rem',
+      lg: '50rem',
+      xl: '60rem',
+      '2xl': '70rem',
+      '3xl': '80rem',
+      '4xl': '90rem',
+      '5xl': '100rem',
+      full: '100%',
+
+      '2/3': '66.67%'
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: max-height
+    |
+    */
+
+    maxHeight: {
+      full: '100%',
+      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}
+    | CSS property: padding
+    |
+    */
+
+    padding: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '16': '4rem',
+      '20': '5rem'
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: margin
+    |
+    */
+
+    margin: {
+      auto: 'auto',
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '-px': '-1px',
+      '-2px': '-2px',
+      '-0': '-0',
+      '-1': '-0.25rem',
+      '-2': '-0.5rem',
+      '-3': '-0.75rem',
+      '-4': '-1rem',
+      '-6': '-1.5rem',
+      '-8': '-2rem',
+      '-16': '-4rem',
+      '-20': '-5rem'
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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?}
+    | CSS property: box-shadow
+    |
+    */
+
+    boxShadow: {
+      sm: '0 1px 1px 0 rgba(116, 129, 141, 0.1)',
+      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)',
+      none: 'none'
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: z-index
+    |
+    */
+
+    zIndex: {
+      auto: 'auto',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50
+    },
+
+    /*
+    |-----------------------------------------------------------------------------
+    | 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}
+    | CSS property: fill
+    |
+    */
+
+    fill: {
+      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}
+    | CSS property: stroke
+    |
+    */
+
+    stroke: {
+      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
+  |   - focus-within
+  |   - active
+  |   - group-hover
+  |
+  | To disable a module completely, use `false` instead of an array.
+  |
+  */
+  variants: {
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderColor: ['responsive', 'hover'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexDirection: ['responsive'],
+    flexWrap: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    justifyContent: ['responsive'],
+    alignContent: ['responsive'],
+    flex: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    float: ['responsive'],
+    fonts: ['responsive'],
+    fontWeight: ['responsive', 'hover'],
+    height: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    opacity: ['responsive', 'hover', 'group-hover'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    inset: ['responsive'],
+    resize: ['responsive'],
+    boxShadow: ['responsive', 'hover'],
+    fill: [],
+    stroke: [],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover'],
+    fontSize: ['responsive'],
+    fontStyle: ['responsive', 'hover'],
+    fontSmoothing: ['responsive', 'hover'],
+    textDecoration: ['responsive', 'hover'],
+    textTransform: ['responsive', 'hover'],
+    letterSpacing: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    wordBreak: ['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: [],
+
+  corePlugins: {
+    container: false
+  },
+
+};
diff --git a/addon/styles/tailwind.js b/addon/styles/tailwind.js
deleted file mode 100644
index cb6172bd1..000000000
--- a/addon/styles/tailwind.js
+++ /dev/null
@@ -1,891 +0,0 @@
-/* eslint-disable */
-/*
-
-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.
-|
-*/
-
-let colors = {
-  transparent: 'transparent',
-  inherit: 'inherit',
-
-  black: '#22292f',
-  'grey-darkest': '#3d4852',
-  'grey-darker': '#606f7b',
-  'grey-dark': '#8795a1',
-  grey: '#b8c2cc',
-  'grey-light': '#dae1e7',
-  'grey-lighter': '#f1f5f8',
-  'grey-lightest': '#f8fafc',
-  white: 'white',
-
-  yellow: '#ffed4a',
-
-  'code-base': '#282c34',
-
-  // See the note in tailwind/compnents/docs-brand-colors.css
-  'brand-var': 'var(--brand-primary, #E04E39)'
-};
-
-let textSizesMap = {
-  xxs: '12px',
-  xs: '14px',
-  sm: '15px',
-  base: '16px',
-  'large-1': '18px',
-  'large-2': '20px',
-  'large-3': '22px',
-  'large-4': '24px',
-  'large-5': '30px',
-  'large-6': '36px',
-  'large-7': '42px',
-  'jumbo-1': '60px',
-  'jumbo-2': '74px',
-  'jumbo-3': '86px'
-};
-
-// Convert pixel sizes to REMs
-let textSizes = Object.keys(textSizesMap).reduce((memo, textSize) => {
-  let pixelValue = textSizesMap[textSize];
-  let remValue = `${+pixelValue.replace('px', '') / 16}rem`;
-
-  memo[textSize] = remValue;
-
-  return memo;
-}, {});
-
-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}
-  | CSS property: font-family
-  |
-  */
-
-  fonts: {
-    title: ['"Crimson Text"', 'serif'],
-    sans: [
-      '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}
-  | CSS property: font-size
-  |
-  */
-
-  textSizes,
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: 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}
-  | CSS property: line-height
-  |
-  */
-
-  leading: {
-    none: 1,
-    tight: 1.25,
-    small: 1.45,
-    normal: 1.625,
-    loose: 2
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: letter-spacing
-  |
-  */
-
-  tracking: {
-    tight: '-0.2px',
-    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}
-  | CSS property: 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}
-  | CSS property: background-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}
-  | CSS property: background-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?}
-  | CSS property: border-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}
-  | CSS property: border-color
-  |
-  */
-
-  borderColors: 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?}
-  | CSS property: border-radius
-  |
-  */
-
-  borderRadius: {
-    none: '0',
-    sm: '.125rem',
-    default: '.25rem',
-    lg: '.5rem',
-    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}
-  | CSS property: width
-  |
-  */
-
-  width: {
-    'site-container': '1400px',
-
-    auto: 'auto',
-    px: '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '56': '14rem',
-    '64': '16rem',
-    '72': '18rem',
-    '76': '19rem',
-    '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%',
-    '90%': '90%',
-    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}
-  | CSS property: height
-  |
-  */
-
-  height: {
-    auto: 'auto',
-    px: '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '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}
-  | CSS property: min-width
-  |
-  */
-
-  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}
-  | CSS property: min-height
-  |
-  */
-
-  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}
-  | CSS property: max-width
-  |
-  */
-
-  maxWidth: {
-    'site-container': '1400px',
-    'measure-byline': '12rem',
-
-    none: 'none',
-    xxs: '17rem',
-    xs: '20rem',
-    sm: '30rem',
-    md: '40rem',
-    lg: '50rem',
-    xl: '60rem',
-    '2xl': '70rem',
-    '3xl': '80rem',
-    '4xl': '90rem',
-    '5xl': '100rem',
-    full: '100%',
-
-    '2/3': '66.67%'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: max-height
-  |
-  */
-
-  maxHeight: {
-    full: '100%',
-    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}
-  | CSS property: padding
-  |
-  */
-
-  padding: {
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '16': '4rem',
-    '20': '5rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: margin
-  |
-  */
-
-  margin: {
-    auto: 'auto',
-    px: '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: margin
-  |
-  */
-
-  negativeMargin: {
-    px: '1px',
-    '2px': '2px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '16': '4rem',
-    '20': '5rem'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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?}
-  | CSS property: box-shadow
-  |
-  */
-
-  shadows: {
-    sm: '0 1px 1px 0 rgba(116, 129, 141, 0.1)',
-    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)',
-    none: 'none'
-  },
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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}
-  | CSS property: 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}
-  | CSS property: opacity
-  |
-  */
-
-  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}
-  | CSS property: fill
-  |
-  */
-
-  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}
-  | CSS property: stroke
-  |
-  */
-
-  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
-  |   - focus-within
-  |   - 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'],
-    borderColors: ['responsive', 'hover'],
-    borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
-    borderWidths: ['responsive'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    flexbox: ['responsive'],
-    float: ['responsive'],
-    fonts: ['responsive'],
-    fontWeights: ['responsive', 'hover'],
-    height: ['responsive'],
-    leading: ['responsive'],
-    lists: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    negativeMargin: ['responsive'],
-    opacity: ['responsive', 'hover', 'group-hover'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    shadows: ['responsive', 'hover'],
-    svgFill: [],
-    svgStroke: [],
-    textAlign: ['responsive'],
-    textColors: ['responsive', 'hover'],
-    textSizes: ['responsive'],
-    textStyle: ['responsive', 'hover'],
-    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: [],
-
-  /*
-  |-----------------------------------------------------------------------------
-  | 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: 'docs-',
-    important: false,
-    separator: ':'
-  }
-};
diff --git a/index.js b/index.js
index 73f2656b7..2bee67e87 100644
--- a/index.js
+++ b/index.js
@@ -29,7 +29,7 @@ module.exports = {
         enabled: true,
         includePaths: [styleDir],
         plugins: [
-          require('tailwindcss')(path.join( __dirname, 'addon', 'styles', 'tailwind.js'))
+          require('tailwindcss')(path.join( __dirname, 'addon', 'styles', 'tailwind.config.js'))
         ]
       },
     },
diff --git a/package.json b/package.json
index 969b6d8cb..d1556689a 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "sass": "^1.22.10",
     "semver": "^6.3.0",
     "striptags": "^3.1.1",
-    "tailwindcss": "0.7.4",
+    "tailwindcss": "^1.0",
     "walk-sync": "^2.0.2",
     "yuidocjs": "^0.10.2"
   },
diff --git a/yarn.lock b/yarn.lock
index aacab0f7d..2fa03b60a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1931,13 +1931,6 @@ babel-eslint@^10.0.3:
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.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-generator@6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
@@ -4151,11 +4144,6 @@ commander@^2.15.1, commander@^2.20.0, commander@^2.6.0, commander@~2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-comment-regex@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565"
-  integrity sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ==
-
 common-tags@^1.4.0, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -4530,6 +4518,11 @@ css-tree@1.0.0-alpha.33:
     mdn-data "2.0.4"
     source-map "^0.5.3"
 
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -4540,16 +4533,6 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
-cssesc@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
-  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -4736,11 +4719,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 delayed-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-0.0.5.tgz#d4b1f43a93e8296dfe02694f4680bc37a313c73f"
@@ -7095,11 +7073,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gather-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b"
-  integrity sha1-szmUr0V6gRVwDUEPMXczy+egkEs=
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -7431,11 +7404,6 @@ has-cors@1.1.0:
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
   integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -8236,11 +8204,6 @@ jquery@^3.2.1, jquery@^3.4.1:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
   integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
 
-js-base64@^2.1.9:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
-  integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
-
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -9713,6 +9676,11 @@ normalize-url@2.0.1:
     query-string "^5.0.1"
     sort-keys "^2.0.0"
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-bundled@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.0.tgz#2e8fdb7e69eff2df963937b696243316537c284b"
@@ -10238,22 +10206,6 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-perfectionist@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/perfectionist/-/perfectionist-2.4.0.tgz#c147ad3714e126467f1764129ee72df861d47ea0"
-  integrity sha1-wUetNxThJkZ/F2QSnuct+GHUfqA=
-  dependencies:
-    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"
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -10352,13 +10304,6 @@ postcss-nested@^4.1.1:
     postcss "^7.0.21"
     postcss-selector-parser "^6.0.2"
 
-postcss-scss@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.3.1.tgz#65c610d8e2a7ee0e62b1835b71b8870734816e4b"
-  integrity sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks=
-  dependencies:
-    postcss "^5.2.4"
-
 postcss-scss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.0.0.tgz#248b0a28af77ea7b32b1011aba0f738bda27dea1"
@@ -10373,16 +10318,7 @@ postcss-selector-namespace@^2.0.0:
   dependencies:
     postcss "^7.0.0"
 
-postcss-selector-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
-  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
-  dependencies:
-    cssesc "^2.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
   integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
@@ -10401,16 +10337,6 @@ postcss-value-parser@^4.0.2:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
   integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
 
-postcss@^5.0.8, postcss@^5.2.4:
-  version "5.2.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
-  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
-  dependencies:
-    chalk "^1.1.3"
-    js-base64 "^2.1.9"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
 postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.9:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
@@ -10721,13 +10647,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-read-file-stdin@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
-  integrity sha1-JezP86FTtoCa+ssj7hU4fbng7mE=
-  dependencies:
-    gather-stream "^1.0.0"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -10803,6 +10722,14 @@ redeyed@~1.0.0:
   dependencies:
     esprima "~3.0.0"
 
+reduce-css-calc@^2.1.6:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -11801,11 +11728,6 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string.prototype.repeat@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
-  integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=
-
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
@@ -11885,14 +11807,6 @@ strip-bom@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
-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"
@@ -11937,13 +11851,6 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -12013,26 +11920,25 @@ taffydb@2.7.2:
   resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.7.2.tgz#7bf8106a5c1a48251b3e3bc0a0e1732489fd0dc8"
   integrity sha1-e/gQalwaSCUbPjvAoOFzJIn9Dcg=
 
-tailwindcss@0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.4.tgz#fb7926821d42eacdc12e6621a49d21f37a3ff9e9"
-  integrity sha512-+GeQjHRJ2VmeLkrNwMCbPDfm2cc5P8eoc7n+DtZfI8oQdlo5eSHqsIlPEuZOtoqQlIALsd2jAggWrUUBFGP2ow==
+tailwindcss@^1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.1.4.tgz#786bd5faaf485c9eddcb821dd55666c56baa814e"
+  integrity sha512-p4AxVa4CKpX7IbNxImwNMGG9MHuLgratOaOE/iGriNd4AsRQRM2xMisoQ3KQHqShunrWuObga7rI7xbNsVoWGA==
   dependencies:
     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"
+    postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
-    strip-comments "^1.0.2"
+    reduce-css-calc "^2.1.6"
 
 tap-parser@^7.0.0:
   version "7.0.0"
@@ -12686,11 +12592,6 @@ velocity-animate@^1.5.2:
   resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"
   integrity sha512-m6EXlCAMetKztO1ppBhGU1/1MR3IiEevO6ESq6rcrSQ3Q77xYSW13jkfXW88o4xMrkXJhy/U7j4wFR/twMB0Eg==
 
-vendors@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
-  integrity sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw==
-
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
@@ -12982,11 +12883,6 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-write-file-stdout@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
-  integrity sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=
-
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"