From 2c9d8f1652fce0cf7f878547fb32d4541697a3da Mon Sep 17 00:00:00 2001
From: Jack Rowlingson <jack.rowlingson@gmail.com>
Date: Thu, 26 Jul 2018 16:41:14 -0400
Subject: [PATCH] use ad- tailwind prefix

---
 .../components/api/x-import-path/component.js |  2 +-
 .../components/api/x-meta-panel/component.js  |  2 +-
 .../api/x-meta-panel/header/component.js      |  2 +-
 addon/components/api/x-section/template.hbs   | 12 ++++----
 addon/components/api/x-toggles/template.hbs   |  6 ++--
 addon/components/docs-demo/template.hbs       | 10 +++----
 .../docs-demo/x-example/component.js          |  2 +-
 .../components/docs-header/link/template.hbs  | 16 +++++------
 .../docs-header/search-box/component.js       |  2 +-
 .../docs-header/search-box/template.hbs       |  6 ++--
 addon/components/docs-header/template.hbs     | 18 ++++++------
 .../docs-header/version-selector/template.hbs | 11 ++++----
 addon/components/docs-hero/template.hbs       | 16 +++++------
 addon/components/docs-logo/template.hbs       |  2 +-
 addon/components/docs-snippet/template.hbs    | 10 +++----
 addon/components/docs-viewer/template.hbs     |  2 +-
 .../docs-viewer/x-main/component.js           |  2 +-
 .../docs-viewer/x-main/template.hbs           | 28 +++++++++----------
 .../docs-viewer/x-nav-item/template.hbs       | 10 +++----
 .../docs-viewer/x-nav-list/component.js       |  2 +-
 .../components/docs-viewer/x-nav/template.hbs | 28 +++++++++----------
 .../docs-viewer/x-page-index/template.hbs     | 18 ++++++------
 .../docs-viewer/x-section/component.js        |  6 ++--
 addon/styles/addon.scss                       |  6 ++--
 addon/tailwind/components/docs-btn.css        |  4 +--
 addon/tailwind/components/docs-container.css  |  2 +-
 addon/tailwind/components/docs-md.css         | 28 +++++++++----------
 addon/tailwind/config/tailwind.js             |  2 +-
 tests/dummy/app/pods/application/template.hbs |  2 +-
 .../docs-snippet/demo1/template.hbs           |  2 +-
 .../docs-snippet/demo2/template.hbs           |  2 +-
 .../docs-snippet/demo3/template.hbs           |  2 +-
 .../docs-snippet/demo4/template.hbs           |  2 +-
 .../app/pods/index/index-content/template.md  |  2 +-
 tests/dummy/app/pods/index/template.hbs       |  6 ++--
 35 files changed, 137 insertions(+), 136 deletions(-)

diff --git a/addon/components/api/x-import-path/component.js b/addon/components/api/x-import-path/component.js
index 91612830b..7e483f984 100644
--- a/addon/components/api/x-import-path/component.js
+++ b/addon/components/api/x-import-path/component.js
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <div class="import-path mb-6 font-mono" data-test-import-path>
+    <div class="import-path ad-mb-6 ad-font-mono" data-test-import-path>
       <span class="hljs-keyword">import</span>
 
       {{#if (eq item.exportType "default")}}
diff --git a/addon/components/api/x-meta-panel/component.js b/addon/components/api/x-meta-panel/component.js
index a992edde2..29b7710be 100644
--- a/addon/components/api/x-meta-panel/component.js
+++ b/addon/components/api/x-meta-panel/component.js
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
+    <div class="ad-px-6 ad-pt-3 ad-mt-4 ad-border ad-border-grey-light ad-rounded ad-text-sm">
       {{yield (hash
         header=(component 'api/x-meta-panel/header')
       )}}
diff --git a/addon/components/api/x-meta-panel/header/component.js b/addon/components/api/x-meta-panel/header/component.js
index f287b1860..aa980d6fb 100644
--- a/addon/components/api/x-meta-panel/header/component.js
+++ b/addon/components/api/x-meta-panel/header/component.js
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+    <h4 class="ad-mb-2 ad-text-grey ad-font-bold ad-tracking-wide ad-uppercase ad-text-xs">
       {{yield}}
     </h4>
   `,
diff --git a/addon/components/api/x-section/template.hbs b/addon/components/api/x-section/template.hbs
index 03c959d14..0a8b6dfd4 100644
--- a/addon/components/api/x-section/template.hbs
+++ b/addon/components/api/x-section/template.hbs
@@ -3,10 +3,10 @@
     id={{item.name}}
     data-text="{{item.name}}"
     data-test-item-header
-    class="docs-h3 font-mono font-normal"
+    class="docs-h3 ad-font-mono ad-font-normal"
   >
     {{#if (eq item.exportType 'default')}}
-      <span class="border border-grey-light align-text-top leading-loose text-xs pl-2 mr-2 py-1 rounded">
+      <span class="ad-border ad-border-grey-light ad-align-text-top ad-leading-loose ad-text-xs ad-pl-2 ad-mr-2 ad-py-1 ad-rounded">
         Default
       </span>
     {{/if}}
@@ -45,13 +45,13 @@
           Params
         {{/panel.header}}
 
-        <table class="mb-6" data-test-item-params>
+        <table class="ad-mb-6" data-test-item-params>
           <tbody>
             {{#each item.params as |param|}}
               <tr data-test-item-param>
-                <td><span class="font-mono font-bold border-r border-grey-light pr-2">{{param.name}}</span></td>
-                <td><span class="font-mono border-r border-grey-light px-2">{{param.type}}</span></td>
-                <td class="pl-2">{{param.description}}</td>
+                <td><span class="ad-font-mono ad-font-bold ad-border-r ad-border-grey-light ad-pr-2">{{param.name}}</span></td>
+                <td><span class="ad-font-mono ad-border-r ad-border-grey-light ad-px-2">{{param.type}}</span></td>
+                <td class="ad-pl-2">{{param.description}}</td>
               </tr>
             {{/each}}
           </tbody>
diff --git a/addon/components/api/x-toggles/template.hbs b/addon/components/api/x-toggles/template.hbs
index c4e23cf7f..3a2fc2bdd 100644
--- a/addon/components/api/x-toggles/template.hbs
+++ b/addon/components/api/x-toggles/template.hbs
@@ -1,12 +1,12 @@
-<ul class="list-reset mb-6">
+<ul class="ad-list-reset ad-mb-6">
   {{#each-in toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
-      <li class="inline ml-4">
+      <li class="ad-inline ad-ml-4">
         <label data-test-toggle>
           <input type="checkbox"
             checked={{toggle}}
             onclick={{action onToggle key}}
-            class='mr-1'
+            class='ad-mr-1'
           >
 
           {{capitalize key}}
diff --git a/addon/components/docs-demo/template.hbs b/addon/components/docs-demo/template.hbs
index f2be94c95..88e08e215 100644
--- a/addon/components/docs-demo/template.hbs
+++ b/addon/components/docs-demo/template.hbs
@@ -1,4 +1,4 @@
-<div class="rounded border my-8">
+<div class="ad-rounded ad-border ad-my-8">
 
   {{yield (hash
     example=(component 'docs-demo/x-example')
@@ -6,13 +6,13 @@
   )}}
 
   {{#if snippets}}
-    <nav class="docs-demo__snippets-nav py-2 px-4 font-medium bg-grey-lighter tracking-tight">
+    <nav class="docs-demo__snippets-nav ad-py-2 ad-px-4 ad-font-medium ad-bg-grey-lighter ad-tracking-tight">
       {{#each snippets as |snippet|}}
         <button {{action 'selectSnippet' snippet}}
           class='
-            mr-4 text-sm no-underline outline-none
-            hover:text-grey-darkest
-            {{if snippet.isActive 'text-grey-darkest' 'text-grey-dark'}}
+            ad-mr-4 ad-text-sm ad-no-underline outline-none
+            hover:ad-text-grey-darkest
+            {{if snippet.isActive 'ad-text-grey-darkest' 'ad-text-grey-dark'}}
           '
         >
           {{snippet.label}}
diff --git a/addon/components/docs-demo/x-example/component.js b/addon/components/docs-demo/x-example/component.js
index 2b1ff5665..85946ab1c 100644
--- a/addon/components/docs-demo/x-example/component.js
+++ b/addon/components/docs-demo/x-example/component.js
@@ -4,7 +4,7 @@ import layout from './template';
 export default Component.extend({
   layout,
 
-  classNames: 'p-4',
+  classNames: 'ad-p-4',
 
   init() {
     this._super(...arguments);
diff --git a/addon/components/docs-header/link/template.hbs b/addon/components/docs-header/link/template.hbs
index 1cc71e0ba..b0b479190 100644
--- a/addon/components/docs-header/link/template.hbs
+++ b/addon/components/docs-header/link/template.hbs
@@ -2,9 +2,9 @@
 
   <a href={{href}}
     class='
-      px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline opacity-50 hover:opacity-100
-      {{if push 'ml-auto'}}
+      ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline ad-opacity-50 hover:ad-opacity-100
+      {{if push 'ad-ml-auto'}}
     '
     data-test-id={{data-test-id}}>
     {{yield}}
@@ -15,8 +15,8 @@
   <a {{action on-click}}
     href='#'
     class='
-      px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline opacity-50 hover:opacity-100
+      ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline ad-opacity-50 hover:ad-opacity-100
       {{if push 'ml-auto'}}
     '
     data-test-id={{data-test-id}}>
@@ -27,9 +27,9 @@
 
   {{#link-to route
     class=(concat
-      'px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline '
-      (if (and (not isActive) (not (eq route 'index'))) 'opacity-50 hover:opacity-100')
+      'ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline '
+      (if (and (not isActive) (not (eq route 'index'))) 'ad-opacity-50 hover:ad-opacity-100')
     )
     data-test-id=data-test-id
   }}
diff --git a/addon/components/docs-header/search-box/component.js b/addon/components/docs-header/search-box/component.js
index 478d01765..db597c86f 100644
--- a/addon/components/docs-header/search-box/component.js
+++ b/addon/components/docs-header/search-box/component.js
@@ -5,7 +5,7 @@ import { on } from '@ember/object/evented';
 
 export default Component.extend(EKMixin, {
   layout,
-  classNames: 'ml-auto',
+  classNames: 'ad-ml-auto',
 
   query: null,
 
diff --git a/addon/components/docs-header/search-box/template.hbs b/addon/components/docs-header/search-box/template.hbs
index d32f814fa..dd26cb746 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='relative text-grey-darkest' data-search-box>
-  {{svg-jar 'search' width=12 height=12 class='absolute pin-t h-full ml-1'}}
+<div class='ad-relative ad-text-grey-darkest' data-search-box>
+  {{svg-jar 'search' width=12 height=12 class='ad-absolute ad-pin-t ad-h-full ad-ml-1'}}
 
   {{!--
     This is a dumb input - so why not use the {{input}} helper? Because apparently
@@ -11,7 +11,7 @@
     value={{query}}
     type="text"
     placeholder='Search'
-    class='w-24 text-xs p-2 pl-6 rounded focus:bg-grey-lighter outline-none'
+    class='ad-w-24 ad-text-xs ad-p-2 ad-pl-6 ad-rounded focus:ad-bg-grey-lighter outline-none'
     data-search-box-input
     data-test-search-box-input>
 </div>
diff --git a/addon/components/docs-header/template.hbs b/addon/components/docs-header/template.hbs
index 3d863be48..7419cc336 100644
--- a/addon/components/docs-header/template.hbs
+++ b/addon/components/docs-header/template.hbs
@@ -1,17 +1,17 @@
-<header class='border-b shadow-sm'>
-  <div class='flex items-center max-w-3xl mx-auto'>
+<header class='ad-border-b ad-shadow-sm'>
+  <div class='ad-flex ad-items-center ad-max-w-3xl ad-mx-auto'>
     {{#docs-header/link 'index'}}
-      <div class="text-center text-xs">
+      <div class="ad-text-center ad-text-xs">
         {{#if logo}}
-          <div class='h-4 pb-1'>
+          <div class='ad-h-4 ad-pb-1'>
             {{docs-logo logo=logo}}
           </div>
         {{/if}}
-        <span class='font-medium normal-case block -mt-2px'>{{name}}</span>
+        <span class='ad-font-medium ad-normal-case ad-block ad--mt-2px'>{{name}}</span>
       </div>
     {{/docs-header/link}}
 
-    <div class='flex-1 flex items-center overflow-auto overflow-momentum mask-image md:no-mask-image'>
+    <div class='ad-flex-1 ad-flex ad-items-center ad-overflow-auto ad-overflow-momentum ad-mask-image md:ad-no-mask-image'>
       {{#docs-header/link 'docs'}}
         Documentation
       {{/docs-header/link}}
@@ -23,7 +23,7 @@
       {{docs-header/search-box query=query on-input=(action (mut query))}}
 
       {{#docs-header/link on-click=(action (toggle 'isShowingVersionSelector' this)) data-test-id='current-version'}}
-        <span data-version-selector class='flex items-center'>
+        <span data-version-selector class='ad-flex ad-items-center'>
 
           {{#if (or (eq currentVersion.key latestVersionName))}}
             {{#if currentVersion.tag}}
@@ -41,14 +41,14 @@
 
       {{#if projectHref}}
         {{#docs-header/link href=projectHref}}
-          <span class='flex'>
+          <span class='ad-flex'>
             {{svg-jar 'github' width=24 height=24}}
           </span>
         {{/docs-header/link}}
       {{/if}}
 
       {{!-- Something to take up space on mobile, so the scrolling nav isn't hugging the edge --}}
-      <div class='h-px px-3 md:hidden'></div>
+      <div class='ad-h-px ad-px-3 md:ad-hidden'></div>
     </div>
   </div>
 </header>
diff --git a/addon/components/docs-header/version-selector/template.hbs b/addon/components/docs-header/version-selector/template.hbs
index 8539064ef..7959dabc3 100644
--- a/addon/components/docs-header/version-selector/template.hbs
+++ b/addon/components/docs-header/version-selector/template.hbs
@@ -4,27 +4,28 @@
   clickOutsideToClose=true
   onClose=(action on-close)
   targetAttachment='bottom right'}}
-  <ul class="list-reset mt-2 bg-white shadow-md text-sm rounded z-10">
+  <ul class="ad-list-reset ad-mt-2 ad-bg-white ad-shadow-md ad-text-sm ad-rounded ad-z-10">
     {{#each sortedVersions as |version|}}
       <li data-test-id='version'>
-        <a {{action 'changeVersion' version}} href='#' class='text-black no-underline flex items-center px-4 py-3 hover:bg-grey-lighter'>
+        <a {{action 'changeVersion' version}} href='#' class='ad-text-black ad-no-underline ad-flex ad-items-center
+          ad-px-4 ad-py-3 hover:ad-bg-grey-lighter'>
           <span class='w-6 flex'>
             {{#if (eq version.key currentVersion.key)}}
               {{svg-jar 'check' height=16 width=16}}
             {{/if}}
           </span>
-          <span class='font-medium'>
+          <span class='ad-font-medium'>
             {{version.name}}
           </span>
 
-          <span class="ml-auto pl-8 flex items-center opacity-50">
+          <span class="ad-ml-auto ad-pl-8 ad-flex ad-items-center ad-opacity-50">
             {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
               {{svg-jar (if version.tag 'git-tag' 'git-sha') height=16 width=16}}
             {{else}}
               {{svg-jar 'git-sha' height=16 width=16}}
             {{/if}}
 
-            <span class='text-xs font-mono pl-1'>
+            <span class='ad-text-xs ad-font-mono ad-pl-1'>
               {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
                 {{#if version.tag}}
                   {{version.tag}}
diff --git a/addon/components/docs-hero/template.hbs b/addon/components/docs-hero/template.hbs
index a5c804613..9083a3a57 100644
--- a/addon/components/docs-hero/template.hbs
+++ b/addon/components/docs-hero/template.hbs
@@ -1,21 +1,21 @@
 <div class="
-  text-center py-8 md:py-16
-  {{if (eq style 'light') 'text-grey-darkest'}}
-  {{if (eq style 'dark') 'bg-black text-white'}}
+  ad-text-center ad-py-8 md:ad-py-16
+  {{if (eq style 'light') 'ad-text-grey-darkest'}}
+  {{if (eq style 'dark') 'ad-bg-black ad-text-white'}}
 ">
-  <h1 class='text-5xl md:text-jumbo leading-none'>
+  <h1 class='ad-text-5xl md:ad-text-jumbo ad-leading-none'>
     {{#if logo}}
-      <div class='md:-mb-1 -mt-4 md:-mt-8'>
-        <span class='inline-block h-6 opacity-50'>
+      <div class='md:ad--mb-1 ad--mt-4 md:ad--mt-8'>
+        <span class='ad-inline-block ad-h-6 ad-opacity-50'>
           {{docs-logo logo=logo}}
         </span>
       </div>
     {{/if}}
 
-    <span class='font-thin'>{{slimHeading}}</span>{{strongHeading}}
+    <span class='ad-font-thin'>{{slimHeading}}</span>{{strongHeading}}
   </h1>
 
-  <p class='opacity-75 text-xl mt-4 w-3/4 mx-auto leading-tight'>
+  <p class='ad-opacity-75 ad-text-xl ad-mt-4 ad-w-3/4 ad-mx-auto ad-leading-tight'>
     {{byline}}
   </p>
 
diff --git a/addon/components/docs-logo/template.hbs b/addon/components/docs-logo/template.hbs
index ab40bcc7d..39572f224 100644
--- a/addon/components/docs-logo/template.hbs
+++ b/addon/components/docs-logo/template.hbs
@@ -1 +1 @@
-{{svg-jar logo class="h-full w-auto max-w-full fill-current"}}
+{{svg-jar logo class="ad-h-full ad-w-auto ad-max-w-full ad-fill-current"}}
diff --git a/addon/components/docs-snippet/template.hbs b/addon/components/docs-snippet/template.hbs
index 55c615c36..f19814df2 100644
--- a/addon/components/docs-snippet/template.hbs
+++ b/addon/components/docs-snippet/template.hbs
@@ -1,18 +1,18 @@
 {{#if title}}
-  <div class='bg-grey-lighter text-sm text-grey-darkest
-    font-medium py-2 px-4'>
+  <div class='ad-bg-grey-lighter ad-text-sm ad-text-grey-darkest
+    ad-font-medium ad-py-2 ad-px-4'>
     {{title}}
   </div>
 {{/if}}
 
-<div class='text-sm p-4 bg-grey-lightest relative' data-test-id={{name}}>
+<div class='ad-text-sm ad-p-4 ad-bg-grey-lightest ad-relative' data-test-id={{name}}>
   {{#if showCopy}}
     {{#copy-button
       clipboardText=snippetText
       title='copy to clipboard'
       class='
-        absolute pin-t pin-r bg-transparent hover:bg-transparent
-        border-none opacity-50 hover:opacity-100 p-3
+        ad-absolute ad-pin-t ad-pin-r ad-bg-transparent hover:ad-bg-transparent
+        ad-border-none ad-opacity-50 hover:ad-opacity-100 ad-p-3
       '
     }}
       Copy
diff --git a/addon/components/docs-viewer/template.hbs b/addon/components/docs-viewer/template.hbs
index 49ec279f2..36a42ebc8 100644
--- a/addon/components/docs-viewer/template.hbs
+++ b/addon/components/docs-viewer/template.hbs
@@ -1,4 +1,4 @@
-<div class="docs-container lg:flex w-full mt-4">
+<div class="docs-container lg:ad-flex ad-w-full ad-mt-4">
   {{yield (hash
     nav=(component 'docs-viewer/x-nav')
     main=(component 'docs-viewer/x-main' onReindex=(action (mut pageIndex)))
diff --git a/addon/components/docs-viewer/x-main/component.js b/addon/components/docs-viewer/x-main/component.js
index 272167755..374421eef 100644
--- a/addon/components/docs-viewer/x-main/component.js
+++ b/addon/components/docs-viewer/x-main/component.js
@@ -23,7 +23,7 @@ export default Component.extend({
   docsRoutes: service(),
 
   tagName: 'main',
-  classNames: ['lg:w-4/5', 'xl:w-3/5', 'max-w-md', 'lg:max-w-none', 'mx-auto', 'lg:mx-0', 'mt-6', 'flex-no-shrink'],
+  classNames: ['lg:ad-w-4/5', 'xl:ad-w-3/5', 'ad-max-w-md', 'lg:ad-max-w-none', 'ad-mx-auto', 'lg:ad-mx-0', 'ad-mt-6', 'ad-flex-no-shrink'],
 
   didInsertElement() {
     this._super(...arguments);
diff --git a/addon/components/docs-viewer/x-main/template.hbs b/addon/components/docs-viewer/x-main/template.hbs
index a5ee6bc43..5a14457ce 100644
--- a/addon/components/docs-viewer/x-main/template.hbs
+++ b/addon/components/docs-viewer/x-main/template.hbs
@@ -1,39 +1,39 @@
-<div class="lg:px-4" data-page-index-target>
+<div class="lg:ad-px-4" data-page-index-target>
   {{yield}}
 
-  <div class="mt-16 mb-8">
+  <div class="ad-mt-16 ad-mb-8">
     <a href={{editCurrentPageUrl}}
-      class='transition text-grey-darkest opacity-50 text-sm
-      hover:opacity-75 no-underline border-b border-grey hover:border-grey-darkest'>
+      class='ad-transition ad-text-grey-darkest ad-opacity-50 ad-text-sm
+      hover:ad-opacity-75 ad-no-underline ad-border-b ad-border-grey hover:ad-border-grey-darkest'>
       Edit this page
     </a>
   </div>
 
 </div>
 
-<div class="lg:px-4">
-  <div class="mt-16 pb-16 border-t border-grey-lighter pt-4 flex">
-    <div class="w-1/2">
+<div class="lg:ad-px-4">
+  <div class="ad-mt-16 ad-pb-16 ad-border-t ad-border-grey-lighter ad-pt-4 ad-flex">
+    <div class="ad-w-1/2">
       {{#if docsRoutes.previous}}
-        <div class='text-sm text-grey-dark'>
+        <div class='ad-text-sm ad-text-grey-dark'>
           Previous
         </div>
         {{#link-to params=docsRoutes.previous.route
-          class='text-grey-darkest text-2xl font-light no-underline
-          border-b border-grey hover:border-grey-darkest transition'}}
+          class='ad-text-grey-darkest ad-text-2xl ad-font-light ad-no-underline
+          ad-border-b ad-border-grey hover:ad-border-grey-darkest ad-transition'}}
           {{docsRoutes.previous.label}}
         {{/link-to}}
       {{/if}}
     </div>
 
-    <div class="w-1/2 text-right">
+    <div class="ad-w-1/2 ad-text-right">
       {{#if docsRoutes.next}}
-        <div class='text-sm text-grey-dark'>
+        <div class='ad-text-sm ad-text-grey-dark'>
           Next
         </div>
         {{#link-to params=docsRoutes.next.route
-          class='text-grey-darkest text-2xl font-light no-underline
-          border-b border-grey hover:border-grey-darkest transition'}}
+          class='ad-text-grey-darkest ad-text-2xl ad-font-light ad-no-underline
+          ad-border-b ad-border-grey hover:ad-border-grey-darkest ad-transition'}}
           {{docsRoutes.next.label}}
         {{/link-to}}
       {{/if}}
diff --git a/addon/components/docs-viewer/x-nav-item/template.hbs b/addon/components/docs-viewer/x-nav-item/template.hbs
index 1e0785c5b..c159fb272 100644
--- a/addon/components/docs-viewer/x-nav-item/template.hbs
+++ b/addon/components/docs-viewer/x-nav-item/template.hbs
@@ -1,16 +1,16 @@
-<li class='mt-2 mb-1 flex items-center text-sm'>
+<li class='ad-mt-2 ad-mb-1 ad-flex ad-items-center ad-text-sm'>
   {{#if model}}
     {{#link-to route model
-      class='text-grey-darkest no-underline hover:underline'
-      activeClass='font-bold'
+      class='ad-text-grey-darkest ad-no-underline hover:ad-underline'
+      activeClass='ad-font-bold'
       data-test-id='nav-item'
       data-test-label=label}}
       {{label}}
     {{/link-to}}
   {{else}}
     {{#link-to route
-      class='text-grey-darkest no-underline hover:underline'
-      activeClass='font-bold'
+      class='ad-text-grey-darkest ad-no-underline hover:ad-underline'
+      activeClass='ad-font-bold'
       data-test-id='nav-item'
       data-test-label=label}}
       {{label}}
diff --git a/addon/components/docs-viewer/x-nav-list/component.js b/addon/components/docs-viewer/x-nav-list/component.js
index f453371a0..9e87501ad 100644
--- a/addon/components/docs-viewer/x-nav-list/component.js
+++ b/addon/components/docs-viewer/x-nav-list/component.js
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile'
 export default Component.extend({
   tagName: 'ul',
 
-  classNames: ['list-reset'],
+  classNames: ['ad-list-reset'],
 
   layout: hbs`
     {{yield (hash
diff --git a/addon/components/docs-viewer/x-nav/template.hbs b/addon/components/docs-viewer/x-nav/template.hbs
index f56457b3d..46066a14c 100644
--- a/addon/components/docs-viewer/x-nav/template.hbs
+++ b/addon/components/docs-viewer/x-nav/template.hbs
@@ -1,7 +1,7 @@
 {{#if (or media.isMobile media.isTablet)}}
-  <div class='text-right'>
+  <div class='ad-text-right'>
     <button {{action (toggle 'isShowingMenu' this)}}
-      class='text-grey-darkest py-2 text-sm rounded uppercase font-medium'>
+      class='ad-text-grey-darkest ad-py-2 ad-text-sm ad-rounded ad-uppercase ad-font-medium'>
       ☰ Menu
     </button>
   </div>
@@ -9,19 +9,19 @@
 
 <nav onclick={{action (mut isShowingMenu) false}}
   class='
-    absolute pin-r lg:relative bg-white shadow-lg lg:shadow-none
-    w-90% px-3 lg:px-0 z-10 lg:w-1/5 flex-no-shrink transition
-    max-w-xs mr-2
+    ad-absolute ad-pin-r lg:ad-relative ad-bg-white ad-shadow-lg lg:ad-shadow-none
+    ad-w-90% ad-px-3 lg:ad-px-0 ad-z-10 lg:ad-w-1/5 ad-flex-no-shrink ad-transition
+    ad-max-w-xs ad-mr-2
     {{if (or media.isMobile media.isTablet)
-      (if isShowingMenu 'opacity-100' 'opacity-0 pointer-events-none')
+      (if isShowingMenu 'ad-opacity-100' 'ad-opacity-0 ad-pointer-events-none')
 
     }}
   '>
-  <div class='pt-px sticky pin-t mb-8 lg:max-h-screen lg:-mt-4 lg:pt-4 lg:overflow-y-scroll'>
+  <div class='ad-pt-px ad-sticky ad-pin-t ad-mb-8 lg:ad-max-h-screen lg:ad--mt-4 lg:ad-pt-4 lg:ad-overflow-y-scroll'>
     {{#if (or media.isMobile media.isTablet)}}
-      <div class="text-right">
+      <div class="ad-text-right">
         <button onclick={{action (mut isShowingMenu) false}}
-          class='text-grey-darkest opacity-50 hover:opacity-100 text-3xl py-2 no-underline'>
+          class='ad-text-grey-darkest ad-opacity-50 hover:ad-opacity-100 ad-text-3xl ad-py-2 ad-no-underline'>
           &times;
         </button>
       </div>
@@ -48,14 +48,14 @@
       {{/if}}
     {{/docs-viewer/x-nav-list}}
 
-    <div class="mt-16 lg:mb-16 mr-2 text-xs rounded">
+    <div class="ad-mt-16 lg:ad-mb-16 ad-mr-2 ad-text-xs ad-rounded">
       <a href="https://github.com/ember-learn/ember-cli-addon-docs"
-        class='opacity-50 hover:opacity-100 transition no-underline
-        text-inherit flex items-center text-grey-darkest'>
-        {{svg-jar 'addon-docs-pen' width=22 height=16 class='mr-2'}}
+        class='ad-opacity-50 hover:ad-opacity-100 ad-transition ad-no-underline
+        ad-text-inherit ad-flex ad-items-center ad-text-grey-darkest'>
+        {{svg-jar 'addon-docs-pen' width=22 height=16 class='ad-mr-2'}}
         <div>
           Powered by
-          <span class="font-bold">AddonDocs</span>
+          <span class="ad-font-bold">AddonDocs</span>
         </div>
       </a>
     </div>
diff --git a/addon/components/docs-viewer/x-page-index/template.hbs b/addon/components/docs-viewer/x-page-index/template.hbs
index bafa24c1a..2e97a64a3 100644
--- a/addon/components/docs-viewer/x-page-index/template.hbs
+++ b/addon/components/docs-viewer/x-page-index/template.hbs
@@ -1,25 +1,25 @@
-<nav class="hidden lg:block lg:w-1/5 pl-4" data-test-page-index>
-  <div class="sticky pin-t pt-4 pb-8 -mt-4 max-h-screen overflow-y-scroll">
-    <ul class="list-reset border-l border-grey-lighter pl-6 leading-normal">
+<nav class="ad-hidden lg:ad-block lg:ad-w-1/5 ad-pl-4" data-test-page-index>
+  <div class="ad-sticky ad-pin-t ad-pt-4 ad-pb-8 ad--mt-4 ad-max-h-screen ad-overflow-y-scroll">
+    <ul class="ad-list-reset ad-border-l ad-border-grey-lighter ad-pl-6 ad-leading-normal">
       {{#if pageIndex.length}}
-        <li class="mt-20 text-grey font-bold tracking-wide uppercase text-xs">
+        <li class="ad-mt-20 ad-text-grey ad-font-bold ad-tracking-wide ad-uppercase ad-text-xs">
           On This Page
         </li>
       {{/if}}
 
       {{#each pageIndex as |item|}}
         <li class="
-          leading-tight
-          {{if item.indent (concat 'ml-' item.indent)}}
-          {{if item.marginTop (concat 'mt-' item.marginTop)}}
-          {{if item.marginBottom (concat 'mt-' item.marginBottom)}}
+          ad-leading-tight
+          {{if item.indent (concat 'ad-ml-' item.indent)}}
+          {{if item.marginTop (concat 'ad-mt-' item.marginTop)}}
+          {{if item.marginBottom (concat 'ad-mt-' item.marginBottom)}}
         "
 
         data-test-index-item
         >
           <a
             href="#{{item.id}}"
-            class="text-grey-dark font-semibold no-underline hover:underline text-{{item.size}}"
+            class="ad-text-grey-dark ad-font-semibold ad-no-underline hover:ad-underline ad-text-{{item.size}}"
           >
             {{item.text}}
             </a>
diff --git a/addon/components/docs-viewer/x-section/component.js b/addon/components/docs-viewer/x-section/component.js
index 0b3f60324..3d5e782cb 100644
--- a/addon/components/docs-viewer/x-section/component.js
+++ b/addon/components/docs-viewer/x-section/component.js
@@ -6,9 +6,9 @@ export default Component.extend({
 
   layout: hbs`
     <li class='
-      mt-8 text-grey font-bold
-      tracking-wide uppercase
-      {{if (eq style 'large') '-mb-4 text-sm' 'text-xs'}}
+      ad-mt-8 ad-text-grey ad-font-bold
+      ad-tracking-wide ad-uppercase
+      {{if (eq style 'large') 'ad--mb-4 ad-text-sm' 'ad-text-xs'}}
     '>
       {{label}}
     </li>
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 7265ab95c..cbdb21d98 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -3,7 +3,7 @@
 @import 'pod-styles.scss';
 
 // Figure out how to do this in tailwind
-.fill-current {
+.ad-fill-current {
   &, & * {
     fill: currentColor;
   }
@@ -26,12 +26,12 @@ svg {
   fill: currentColor;
 }
 
-.transition {
+.ad-transition {
   transition: all 0.15s;
 }
 
 // get this if we upgrade tailwind
-.sticky {
+.ad-sticky {
   position: sticky;
 }
 
diff --git a/addon/tailwind/components/docs-btn.css b/addon/tailwind/components/docs-btn.css
index 24d8d3408..2d27f789a 100644
--- a/addon/tailwind/components/docs-btn.css
+++ b/addon/tailwind/components/docs-btn.css
@@ -1,8 +1,8 @@
 .docs-btn {
-  @apply bg-grey-light border-b-2 border-grey-dark py-2 px-4 outline-none;
+  @apply ad-bg-grey-light ad-border-b-2 ad-border-grey-dark ad-py-2 ad-px-4 outline-none;
 }
 .docs-btn:hover {
-  @apply bg-grey;
+  @apply ad-bg-grey;
 }
 .docs-btn:focus {
   @apply outline-none;
diff --git a/addon/tailwind/components/docs-container.css b/addon/tailwind/components/docs-container.css
index 208387c95..0145d7f59 100644
--- a/addon/tailwind/components/docs-container.css
+++ b/addon/tailwind/components/docs-container.css
@@ -1,3 +1,3 @@
 .docs-container {
-  @apply px-4 max-w-3xl mx-auto;
+  @apply ad-px-4 ad-max-w-3xl ad-mx-auto;
 }
diff --git a/addon/tailwind/components/docs-md.css b/addon/tailwind/components/docs-md.css
index fea85521b..f5198ad7c 100644
--- a/addon/tailwind/components/docs-md.css
+++ b/addon/tailwind/components/docs-md.css
@@ -6,62 +6,62 @@
 .docs-h1,
 .docs-md__h1 a,
 .docs-h1 a {
-  @apply mb-6 text-grey-darkest text-4xl font-extrabold leading-tight no-underline;
+  @apply ad-mb-6 ad-text-grey-darkest ad-text-4xl ad-font-extrabold ad-leading-tight ad-no-underline;
 }
 
 .docs-md__h2,
 .docs-h2,
 .docs-md__h2 a,
 .docs-h2 a {
-  @apply pt-8 mb-4 text-grey-darkest leading-tight no-underline;
+  @apply ad-pt-8 ad-mb-4 ad-text-grey-darkest ad-leading-tight ad-no-underline;
 }
 
 .docs-md__h3,
 .docs-h3,
 .docs-md__h3 a,
 .docs-h3 a {
-  @apply pt-4 mb-1 text-grey-darkest leading-tight no-underline;
+  @apply ad-pt-4 ad-mb-1 ad-text-grey-darkest ad-leading-tight ad-no-underline;
 }
 
 .docs-md p {
-  @apply mb-4;
+  @apply ad-mb-4;
 }
 .docs-md ul {
-  @apply mb-4;
+  @apply ad-mb-4;
 }
 .docs-md ol {
-  @apply mb-4;
+  @apply ad-mb-4;
 }
 .docs-md li {
-  @apply mb-2;
+  @apply ad-mb-2;
 }
 .docs-md aside {
-  @apply mb-4 mt-6 bg-grey-lightest italic px-4 py-3 text-sm;
+  @apply ad-mb-4 ad-mt-6 ad-bg-grey-lightest ad-italic ad-px-4 ad-py-3 ad-text-sm;
 }
 
 /* mb-4 on pre interferes with docs-snippet and others, really want Renderer
 to generate its own class...
 pre {
-  @apply .mb-4;
+  @apply .ad-mb-4;
 } */
 
 .docs-md__blockquote {
-  @apply pl-4 text-grey-dark border-l-4;
+  @apply ad-pl-4 ad-text-grey-dark ad-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;
+  @apply ad-bg-grey-lightest ad-my-8 ad-p-6 ad-overflow-x-scroll ad-text-sm;
 }
 
 .docs-md__a {
-  @apply no-underline border-b border-grey text-inherit;
+  @apply ad-no-underline ad-border-b ad-border-grey ad-text-inherit;
 }
 .docs-md__a:hover,
 .docs-md__a:focus {
-  @apply border-grey-dark;
+  @apply ad-border-grey-dark;
 }
 
 .docs-md__hr {
-  @apply py-0 my-8 h-px border-b;
+  @apply ad-py-0 ad-my-8 ad-h-px ad-border-b;
 }
diff --git a/addon/tailwind/config/tailwind.js b/addon/tailwind/config/tailwind.js
index 141ec87fb..825f479bc 100644
--- a/addon/tailwind/config/tailwind.js
+++ b/addon/tailwind/config/tailwind.js
@@ -112,7 +112,7 @@ export default {
   */
 
   options: {
-    prefix: '',
+    prefix: 'ad-',
     important: false,
     separator: ':',
   },
diff --git a/tests/dummy/app/pods/application/template.hbs b/tests/dummy/app/pods/application/template.hbs
index 33fda9f2d..8c31b7ad2 100644
--- a/tests/dummy/app/pods/application/template.hbs
+++ b/tests/dummy/app/pods/application/template.hbs
@@ -1,4 +1,4 @@
-<div class='font-sans text-black leading-normal'>
+<div class='ad-font-sans ad-text-black ad-leading-normal'>
   {{!-- <div class='bg-red-light text-white py-2 text-sm font-bold shadow-inner'>
     <div class="docs-container">
       WARNING: AddonDocs is currently unstable. Check back soon for updates.
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs
index ff08d155c..bf8deb207 100644
--- a/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs
+++ b/tests/dummy/app/pods/docs/components/docs-snippet/demo1/template.hbs
@@ -1,4 +1,4 @@
-<div class="my-8">
+<div class="ad-my-8">
   {{#docs-snippet name="docs-snippet.hbs"}}
     <div id='foo'>
       {{#my-awesome-thing
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs
index b3f82186d..83cc4b5d6 100644
--- a/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs
+++ b/tests/dummy/app/pods/docs/components/docs-snippet/demo2/template.hbs
@@ -1,4 +1,4 @@
-<div class="my-8">
+<div class="ad-my-8">
   {{#docs-snippet name="my-snippet-src.hbs"}}
     // BEGIN-SNIPPET my-snippet.js
     App = Ember.Application.extend({
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs
index 6ea2d322d..f0df3d2d1 100644
--- a/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs
+++ b/tests/dummy/app/pods/docs/components/docs-snippet/demo3/template.hbs
@@ -1,4 +1,4 @@
-<div class="my-8">
+<div class="ad-my-8">
   {{#docs-snippet name="my-snippet-src2.hbs"}}
     {{docs-snippet name='my-snippet.js'}}
   {{/docs-snippet}}
diff --git a/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs b/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs
index cfe229893..a7d288496 100644
--- a/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs
+++ b/tests/dummy/app/pods/docs/components/docs-snippet/demo4/template.hbs
@@ -1,4 +1,4 @@
-<div class="my-8">
+<div class="ad-my-8">
   {{#docs-snippet name="docs-snippet-title-example.js" title="app/components/my-component.js"}}
     import Component from '@ember/component';
     export default Component.extend({
diff --git a/tests/dummy/app/pods/index/index-content/template.md b/tests/dummy/app/pods/index/index-content/template.md
index 2f3449445..4f64dc87a 100644
--- a/tests/dummy/app/pods/index/index-content/template.md
+++ b/tests/dummy/app/pods/index/index-content/template.md
@@ -1,4 +1,4 @@
-<h2 class='flex items-center mt-8 docs-h2'>
+<h2 class='ad-flex ad-items-center ad-mt-8 docs-h2'>
   {{svg-jar 'logo-horizontal' width=40 height=16
     class='mr-2'}}
   Motivation
diff --git a/tests/dummy/app/pods/index/template.hbs b/tests/dummy/app/pods/index/template.hbs
index 254d34951..493ff6856 100644
--- a/tests/dummy/app/pods/index/template.hbs
+++ b/tests/dummy/app/pods/index/template.hbs
@@ -5,11 +5,11 @@
   byline='Easy, beautiful docs for your Ember addon'}}
 
 <div class='docs-container docs-md'>
-  <section class='max-w-md mx-auto pb-8'>
+  <section class='ad-max-w-md ad-mx-auto ad-pb-8'>
     {{index/index-content}}
 
-    <div class="my-16 text-right">
-      {{#link-to 'docs' class='bg-grey-darkest hover:bg-black text-white py-2 px-4 no-underline rounded'}}
+    <div class="ad-my-16 ad-text-right">
+      {{#link-to 'docs' class='ad-bg-grey-darkest hover:ad-bg-black ad-text-white ad-py-2 ad-px-4 ad-no-underline ad-rounded'}}
         Read the docs →
       {{/link-to}}
     </div>