diff --git a/addon/tailwind/components/.gitkeep b/addon/tailwind/components/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/addon/tailwind/components/docs-btn.css b/addon/tailwind/components/docs-btn.css
new file mode 100644
index 000000000..24d8d3408
--- /dev/null
+++ b/addon/tailwind/components/docs-btn.css
@@ -0,0 +1,9 @@
+.docs-btn {
+  @apply bg-grey-light border-b-2 border-grey-dark py-2 px-4 outline-none;
+}
+.docs-btn:hover {
+  @apply bg-grey;
+}
+.docs-btn:focus {
+  @apply outline-none;
+}
diff --git a/addon/tailwind/components/docs-container.css b/addon/tailwind/components/docs-container.css
new file mode 100644
index 000000000..208387c95
--- /dev/null
+++ b/addon/tailwind/components/docs-container.css
@@ -0,0 +1,3 @@
+.docs-container {
+  @apply px-4 max-w-3xl mx-auto;
+}
diff --git a/addon/tailwind/components/docs-md.css b/addon/tailwind/components/docs-md.css
new file mode 100644
index 000000000..09575576d
--- /dev/null
+++ b/addon/tailwind/components/docs-md.css
@@ -0,0 +1,58 @@
+.docs-md {
+  -webkit-font-smoothing: antialiased;
+}
+
+.docs-md__h1,
+.docs-h1 {
+  @apply mb-6 text-grey-darkest text-4xl font-extrabold leading-tight;
+}
+.docs-md__h2,
+.docs-h2 {
+  @apply mt-8 mb-4 text-grey-darkest leading-tight;
+}
+.docs-md__h3,
+.docs-h3 {
+  @apply mb-2 text-grey-darkest leading-tight;
+}
+.docs-md p {
+  @apply mb-4;
+}
+.docs-md ul {
+  @apply mb-4;
+}
+.docs-md ol {
+  @apply mb-4;
+}
+.docs-md li {
+  @apply mb-2;
+}
+.docs-md aside {
+  @apply mb-4 mt-6 bg-grey-lightest italic px-4 py-3 text-sm;
+}
+
+/* mb-4 on pre interferes with docs-snippet and others, really want Renderer
+to generate its own class...
+pre {
+  @apply .mb-4;
+} */
+
+.docs-md__blockquote {
+  @apply pl-4 text-grey-dark border-l-4;
+}
+
+/* Applied to fenced code in compiled markdown */
+.docs-md__code {
+  @apply bg-grey-lightest my-8 p-6 overflow-x-scroll text-sm;
+}
+
+.docs-md__a {
+  @apply no-underline border-b border-grey text-inherit;
+}
+.docs-md__a:hover,
+.docs-md__a:focus {
+  @apply border-grey-dark;
+}
+
+.docs-md__hr {
+  @apply py-0 my-8 h-px border-b;
+}
diff --git a/addon/tailwind/border-radius.js b/addon/tailwind/config/border-radius.js
similarity index 100%
rename from addon/tailwind/border-radius.js
rename to addon/tailwind/config/border-radius.js
diff --git a/addon/tailwind/border-widths.js b/addon/tailwind/config/border-widths.js
similarity index 100%
rename from addon/tailwind/border-widths.js
rename to addon/tailwind/config/border-widths.js
diff --git a/addon/tailwind/colors.js b/addon/tailwind/config/colors.js
similarity index 100%
rename from addon/tailwind/colors.js
rename to addon/tailwind/config/colors.js
diff --git a/addon/tailwind/font-weights.js b/addon/tailwind/config/font-weights.js
similarity index 100%
rename from addon/tailwind/font-weights.js
rename to addon/tailwind/config/font-weights.js
diff --git a/addon/tailwind/fonts.js b/addon/tailwind/config/fonts.js
similarity index 100%
rename from addon/tailwind/fonts.js
rename to addon/tailwind/config/fonts.js
diff --git a/addon/tailwind/height.js b/addon/tailwind/config/height.js
similarity index 100%
rename from addon/tailwind/height.js
rename to addon/tailwind/config/height.js
diff --git a/addon/tailwind/letter-spacing.js b/addon/tailwind/config/letter-spacing.js
similarity index 100%
rename from addon/tailwind/letter-spacing.js
rename to addon/tailwind/config/letter-spacing.js
diff --git a/addon/tailwind/line-height.js b/addon/tailwind/config/line-height.js
similarity index 100%
rename from addon/tailwind/line-height.js
rename to addon/tailwind/config/line-height.js
diff --git a/addon/tailwind/margin.js b/addon/tailwind/config/margin.js
similarity index 100%
rename from addon/tailwind/margin.js
rename to addon/tailwind/config/margin.js
diff --git a/addon/tailwind/max-height.js b/addon/tailwind/config/max-height.js
similarity index 100%
rename from addon/tailwind/max-height.js
rename to addon/tailwind/config/max-height.js
diff --git a/addon/tailwind/max-width.js b/addon/tailwind/config/max-width.js
similarity index 100%
rename from addon/tailwind/max-width.js
rename to addon/tailwind/config/max-width.js
diff --git a/addon/tailwind/min-height.js b/addon/tailwind/config/min-height.js
similarity index 100%
rename from addon/tailwind/min-height.js
rename to addon/tailwind/config/min-height.js
diff --git a/addon/tailwind/min-width.js b/addon/tailwind/config/min-width.js
similarity index 100%
rename from addon/tailwind/min-width.js
rename to addon/tailwind/config/min-width.js
diff --git a/addon/tailwind/config/modules.css b/addon/tailwind/config/modules.css
deleted file mode 100644
index 32add447d..000000000
--- a/addon/tailwind/config/modules.css
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- *
- * You can see the styles here:
- * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
- *
- * If using `postcss-import`, you should import this line from it's own file:
- *
- * @import "./tailwind-preflight.css";
- *
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
- */
-@tailwind preflight;
-
-/**
- * Here you would add any of your custom component classes; stuff that you'd
- * want loaded *before* the utilities so that the utilities could still
- * override them.
- *
- * Example:
- *
- * .btn { ... }
- * .form-input { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @import "components/buttons";
- * @import "components/forms";
- */
-
-/* Let's move these to ../components once ecli-tailwind supports it.  */
-.docs-container {
-  @apply px-4 max-w-3xl mx-auto;
-}
-
-.docs-md {
-  -webkit-font-smoothing: antialiased;
-}
-
-.docs-md__h1,
-.docs-h1 {
-  @apply mb-6 text-grey-darkest text-4xl font-extrabold leading-tight;
-}
-.docs-md__h2,
-.docs-h2 {
-  @apply mt-8 mb-4 text-grey-darkest leading-tight;
-}
-.docs-md__h3,
-.docs-h3 {
-  @apply mb-2 text-grey-darkest leading-tight;
-}
-.docs-md p {
-  @apply mb-4;
-}
-.docs-md ul {
-  @apply mb-4;
-}
-.docs-md ol {
-  @apply mb-4;
-}
-.docs-md li {
-  @apply mb-2;
-}
-.docs-md aside {
-  @apply mb-4 mt-6 bg-grey-lightest italic px-4 py-3 text-sm;
-}
-
-/* mb-4 on pre interferes with docs-snippet and others, really want Renderer
-to generate its own class...
-pre {
-  @apply .mb-4;
-} */
-
-.docs-md__blockquote {
-  @apply pl-4 text-grey-dark border-l-4;
-}
-
-/* Applied to fenced code in compiled markdown */
-.docs-md__code {
-  @apply bg-grey-lightest my-8 p-6 overflow-x-scroll text-sm;
-}
-
-.docs-md__a {
-  @apply no-underline border-b border-grey text-inherit;
-}
-.docs-md__a:hover,
-.docs-md__a:focus {
-  @apply border-grey-dark;
-}
-
-.docs-md__hr {
-  @apply py-0 my-8 h-px border-b;
-}
-.docs-btn {
-  @apply bg-grey-light border-b-2 border-grey-dark py-2 px-4;
-}
-
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- *
- * If using `postcss-import`, you should import this line from it's own file:
- *
- * @import "./tailwind-utilities.css";
- *
- * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
- */
-@tailwind utilities;
-
-/**
- * Here you would add any custom utilities you need that don't come out of the
- * box with Tailwind.
- *
- * Example :
- *
- * .bg-pattern-graph-paper { ... }
- * .skew-45 { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @import "utilities/background-patterns";
- * @import "utilities/skew-transforms";
- */
-
-/* Need to learn how to use Tailwind to generate the responsive stuff for this automatically */
-.mask-image {
-  /* Autoprefixer is in dependencies but not working on host apps */
-  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
-          mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
-}
-@media (min-width: 768px) {
-  .md\:no-mask-image {
-    -webkit-mask-image: none;
-            mask-image: none;
-  }
-}
-.overflow-momentum {
-  -webkit-overflow-scrolling: touch;
-}
-.outline-none,
-.outline-none:focus {
-  outline: none;
-}
diff --git a/addon/tailwind/negative-margin.js b/addon/tailwind/config/negative-margin.js
similarity index 100%
rename from addon/tailwind/negative-margin.js
rename to addon/tailwind/config/negative-margin.js
diff --git a/addon/tailwind/opacity.js b/addon/tailwind/config/opacity.js
similarity index 100%
rename from addon/tailwind/opacity.js
rename to addon/tailwind/config/opacity.js
diff --git a/addon/tailwind/padding.js b/addon/tailwind/config/padding.js
similarity index 100%
rename from addon/tailwind/padding.js
rename to addon/tailwind/config/padding.js
diff --git a/addon/tailwind/screens.js b/addon/tailwind/config/screens.js
similarity index 100%
rename from addon/tailwind/screens.js
rename to addon/tailwind/config/screens.js
diff --git a/addon/tailwind/shadows.js b/addon/tailwind/config/shadows.js
similarity index 100%
rename from addon/tailwind/shadows.js
rename to addon/tailwind/config/shadows.js
diff --git a/addon/tailwind/svg-fill.js b/addon/tailwind/config/svg-fill.js
similarity index 100%
rename from addon/tailwind/svg-fill.js
rename to addon/tailwind/config/svg-fill.js
diff --git a/addon/tailwind/svg-stroke.js b/addon/tailwind/config/svg-stroke.js
similarity index 100%
rename from addon/tailwind/svg-stroke.js
rename to addon/tailwind/config/svg-stroke.js
diff --git a/addon/tailwind/config/tailwind.js b/addon/tailwind/config/tailwind.js
index 17a299920..141ec87fb 100644
--- a/addon/tailwind/config/tailwind.js
+++ b/addon/tailwind/config/tailwind.js
@@ -1,28 +1,28 @@
 'use strict';
 
-import colors from '../colors';
-import screens from '../screens';
-import fonts from '../fonts';
-import textSizes from '../text-sizes';
-import fontWeights from '../font-weights';
-import leading from '../line-height';
-import tracking from '../letter-spacing';
-import borderWidths from '../border-widths';
-import borderRadius from '../border-radius';
-import width from '../width';
-import height from '../height';
-import minWidth from '../min-width';
-import minHeight from '../min-height';
-import maxWidth from '../max-width';
-import maxHeight from '../max-height';
-import padding from '../padding';
-import margin from '../margin';
-import negativeMargin from '../negative-margin';
-import shadows from '../shadows';
-import zIndex from '../z-index';
-import opacity from '../opacity';
-import svgFill from '../svg-fill';
-import svgStroke from '../svg-stroke';
+import colors from './colors';
+import screens from './screens';
+import fonts from './fonts';
+import textSizes from './text-sizes';
+import fontWeights from './font-weights';
+import leading from './line-height';
+import tracking from './letter-spacing';
+import borderWidths from './border-widths';
+import borderRadius from './border-radius';
+import width from './width';
+import height from './height';
+import minWidth from './min-width';
+import minHeight from './min-height';
+import maxWidth from './max-width';
+import maxHeight from './max-height';
+import padding from './padding';
+import margin from './margin';
+import negativeMargin from './negative-margin';
+import shadows from './shadows';
+import zIndex from './z-index';
+import opacity from './opacity';
+import svgFill from './svg-fill';
+import svgStroke from './svg-stroke';
 
 export default {
 
diff --git a/addon/tailwind/text-sizes.js b/addon/tailwind/config/text-sizes.js
similarity index 100%
rename from addon/tailwind/text-sizes.js
rename to addon/tailwind/config/text-sizes.js
diff --git a/addon/tailwind/width.js b/addon/tailwind/config/width.js
similarity index 100%
rename from addon/tailwind/width.js
rename to addon/tailwind/config/width.js
diff --git a/addon/tailwind/z-index.js b/addon/tailwind/config/z-index.js
similarity index 100%
rename from addon/tailwind/z-index.js
rename to addon/tailwind/config/z-index.js
diff --git a/addon/tailwind/modules.css b/addon/tailwind/modules.css
new file mode 100644
index 000000000..90001dc92
--- /dev/null
+++ b/addon/tailwind/modules.css
@@ -0,0 +1,62 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-preflight.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ */
+@import "./tailwind-preflight.css";
+
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+**/
+
+@import "./components/*.css";
+
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, you should import this line from it's own file:
+ *
+ * @import "./tailwind-utilities.css";
+ *
+ * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
+ */
+
+@import "./tailwind-utilities.css";
+
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+**/
+@import "./utilities/*.css";
diff --git a/addon/tailwind/tailwind-preflight.css b/addon/tailwind/tailwind-preflight.css
new file mode 100644
index 000000000..f58c35efd
--- /dev/null
+++ b/addon/tailwind/tailwind-preflight.css
@@ -0,0 +1 @@
+@tailwind preflight;
diff --git a/addon/tailwind/tailwind-utilities.css b/addon/tailwind/tailwind-utilities.css
new file mode 100644
index 000000000..65dd5f63a
--- /dev/null
+++ b/addon/tailwind/tailwind-utilities.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/addon/tailwind/utilities/masks.css b/addon/tailwind/utilities/masks.css
new file mode 100644
index 000000000..f2bf26de4
--- /dev/null
+++ b/addon/tailwind/utilities/masks.css
@@ -0,0 +1,13 @@
+/* Need to learn how to use Tailwind to generate the responsive stuff for this automatically */
+.mask-image {
+  /* Autoprefixer is in dependencies but not working on host apps */
+  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
+          mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
+}
+
+@media (min-width: 768px) {
+  .md\:no-mask-image {
+    -webkit-mask-image: none;
+            mask-image: none;
+  }
+}
diff --git a/addon/tailwind/utilities/outline-none.css b/addon/tailwind/utilities/outline-none.css
new file mode 100644
index 000000000..3c6237b47
--- /dev/null
+++ b/addon/tailwind/utilities/outline-none.css
@@ -0,0 +1,3 @@
+.outline-none {
+  outline: none;
+}
diff --git a/addon/tailwind/utilities/overflow-momentum.css b/addon/tailwind/utilities/overflow-momentum.css
new file mode 100644
index 000000000..3a2330d67
--- /dev/null
+++ b/addon/tailwind/utilities/overflow-momentum.css
@@ -0,0 +1,3 @@
+.overflow-momentum {
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/index.js b/index.js
index e0255e57a..c680c11c0 100644
--- a/index.js
+++ b/index.js
@@ -41,6 +41,9 @@ module.exports = {
         'node_modules/ember-cli-addon-docs/public',
         'tests/dummy/public'
       ]
+    },
+    'ember-cli-tailwind': {
+      buildTarget: 'addon'
     }
   },
 
diff --git a/package.json b/package.json
index d74af962b..818ef72bc 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,8 @@
     "ember-cli-htmlbars": "^2.0.3",
     "ember-cli-sass": "7.1.3",
     "ember-cli-string-helpers": "^1.7.0",
-    "ember-cli-tailwind": "0.2.7",
     "ember-code-snippet": "^2.1.0",
+    "ember-cli-tailwind": "0.4.0",
     "ember-component-css": "^0.3.5",
     "ember-concurrency": "^0.8.16",
     "ember-data": "^2.18.0",
diff --git a/yarn.lock b/yarn.lock
index cb231b564..19284e328 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3238,9 +3238,9 @@ ember-cli-string-utils@^1.0.0, ember-cli-string-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-string-utils/-/ember-cli-string-utils-1.1.0.tgz#39b677fc2805f55173735376fcef278eaa4452a1"
 
-ember-cli-tailwind@0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/ember-cli-tailwind/-/ember-cli-tailwind-0.2.7.tgz#be2878992297bdefbc528356cd3432b7c4dbe96b"
+ember-cli-tailwind@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-tailwind/-/ember-cli-tailwind-0.4.0.tgz#3ea90f109381d1da70fb1e459edf52fea0ea7d87"
   dependencies:
     broccoli-plugin "^1.3.0"
     broccoli-rollup "^2.0.0"
@@ -3254,6 +3254,7 @@ ember-cli-tailwind@0.2.7:
     fs-extra "^5.0.0"
     jsdom "^11.6.2"
     postcss "^6.0.20"
+    postcss-easy-import "^3.0.0"
     tailwindcss "^0.4.1"
 
 ember-cli-test-info@^1.0.0:
@@ -4756,6 +4757,16 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 globule@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
@@ -7287,7 +7298,7 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -7331,6 +7342,19 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
+postcss-easy-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz#8eaaf5ae59566083d0cae98735dfd803e3ab194d"
+  dependencies:
+    globby "^6.1.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.4"
+    object-assign "^4.0.1"
+    pify "^3.0.0"
+    postcss "^6.0.11"
+    postcss-import "^10.0.0"
+    resolve "^1.1.7"
+
 postcss-functions@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@@ -7340,6 +7364,16 @@ postcss-functions@^3.0.0:
     postcss "^6.0.9"
     postcss-value-parser "^3.3.0"
 
+postcss-import@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-less@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
@@ -7385,7 +7419,7 @@ postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.17, postcss@^6.0.19, postcss@^6.0.
     source-map "^0.6.1"
     supports-color "^5.2.0"
 
-postcss@^6.0.20, postcss@^6.0.9:
+postcss@^6.0.11, postcss@^6.0.20, postcss@^6.0.9:
   version "6.0.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
   dependencies:
@@ -7576,6 +7610,12 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  dependencies:
+    pify "^2.3.0"
+
 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"