Upgrade Ember CLI Tailwind

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

addon/tailwind/components/docs-container.css

@@ -0,0 +1,3 @@
+.docs-container {
+  @apply px-4 max-w-3xl mx-auto;
+}

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

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 {
 

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

addon/tailwind/tailwind-preflight.css

@@ -0,0 +1 @@
+@tailwind preflight;

addon/tailwind/tailwind-utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

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

addon/tailwind/utilities/outline-none.css

@@ -0,0 +1,3 @@
+.outline-none {
+  outline: none;
+}

addon/tailwind/utilities/overflow-momentum.css

@@ -0,0 +1,3 @@
+.overflow-momentum {
+  -webkit-overflow-scrolling: touch;
+}

index.js

@@ -41,6 +41,9 @@ module.exports = {
         'node_modules/ember-cli-addon-docs/public',
         'tests/dummy/public'
       ]
+    },
+    'ember-cli-tailwind': {
+      buildTarget: 'addon'
     }
   },
 

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