Upgrade to tailwind 1.x

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">

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

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

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="#"

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
       "
     }}

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

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')

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")
       }}

addon/styles/addon.scss

@@ -1,7 +1,7 @@
 // Global settings
 $site-container: 1400px;
 
-@tailwind preflight;
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

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;
   }