Upgrade ember-cli-tailwind

samselikoff · samselikoff · commit 664468e66403 · 2018-08-20T11:56:20.000-04:00
diff --git a/addon/tailwind/components/your-component.css b/addon/tailwind/components/your-component.css
@@ -0,0 +1,17 @@
+/**
+ * You can create Tailwind components using @apply here.
+ *
+ * Feel free to rename this file, define multiple components here, or make
+ * any other files in this directory.
+
+ * Here's an example:
+**/
+
+/*
+.btn-blue {
+ @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
+}
+.btn-blue:hover {
+ @apply .bg-blue-dark;
+}
+*/
diff --git a/addon/tailwind/config/background-colors.js b/addon/tailwind/config/background-colors.js
@@ -0,0 +1,16 @@
+import colors from './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}
+|
+*/
+
+export default colors;
diff --git a/addon/tailwind/config/background-size.js b/addon/tailwind/config/background-size.js
@@ -0,0 +1,18 @@
+/*
+|-----------------------------------------------------------------------------
+| 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}
+|
+*/
+
+export default {
+  auto: 'auto',
+  cover: 'cover',
+  contain: 'contain'
+};
diff --git a/addon/tailwind/config/border-colors.js b/addon/tailwind/config/border-colors.js
@@ -0,0 +1,20 @@
+import colors from './colors';
+
+/*
+|-----------------------------------------------------------------------------
+| 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}
+|
+*/
+
+export default Object.assign({ default: colors['grey-light'] }, colors);
diff --git a/addon/tailwind/config/border-widths.js b/addon/tailwind/config/border-widths.js
@@ -16,5 +16,5 @@ export default {
   '0': '0',
   '2': '2px',
   '4': '4px',
-  '8': '8px',
+  '8': '8px'
 };
diff --git a/addon/tailwind/config/font-weights.js b/addon/tailwind/config/font-weights.js
@@ -13,13 +13,13 @@
 */
 
 export default {
-  'hairline': 100,
-  'thin': 200,
-  'light': 300,
-  'normal': 400,
-  'medium': 500,
-  'semibold': 600,
-  'bold': 700,
-  'extrabold': 800,
-  'black': 900,
+  hairline: 100,
+  thin: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
 };
diff --git a/addon/tailwind/config/fonts.js b/addon/tailwind/config/fonts.js
@@ -17,7 +17,7 @@
 */
 
 export default {
-  'sans': [
+  sans: [
     'system-ui',
     'BlinkMacSystemFont',
     '-apple-system',
@@ -29,9 +29,9 @@ export default {
     'Fira Sans',
     'Droid Sans',
     'Helvetica Neue',
-    'sans-serif',
+    'sans-serif'
   ],
-  'serif': [
+  serif: [
     'Constantia',
     'Lucida Bright',
     'Lucidabright',
@@ -41,14 +41,14 @@ export default {
     'Bitstream Vera Serif',
     'Liberation Serif',
     'Georgia',
-    'serif',
+    'serif'
   ],
-  'mono': [
-    'Monaco',
+  mono: [
     'Menlo',
+    'Monaco',
     'Consolas',
     'Liberation Mono',
     'Courier New',
-    'monospace',
+    'monospace'
   ]
 };
diff --git a/addon/tailwind/config/height.js b/addon/tailwind/config/height.js
@@ -14,8 +14,8 @@
 */
 
 export default {
-  'auto': 'auto',
-  'px': '1px',
+  auto: 'auto',
+  px: '1px',
   '1': '0.25rem',
   '2': '0.5rem',
   '3': '0.75rem',
@@ -29,6 +29,6 @@ export default {
   '32': '8rem',
   '48': '12rem',
   '64': '16rem',
-  'full': '100%',
-  'screen': '100vh'
+  full: '100%',
+  screen: '100vh'
 };
diff --git a/addon/tailwind/config/max-height.js b/addon/tailwind/config/max-height.js
@@ -13,6 +13,6 @@
 */
 
 export default {
-  'full': '100%',
-  'screen': '100vh',
+  full: '100%',
+  screen: '100vh'
 };
diff --git a/addon/tailwind/config/min-height.js b/addon/tailwind/config/min-height.js
@@ -14,6 +14,6 @@
 
 export default {
   '0': '0',
-  'full': '100%',
-  'screen': '100vh'
+  full: '100%',
+  screen: '100vh'
 };
diff --git a/addon/tailwind/config/min-width.js b/addon/tailwind/config/min-width.js
@@ -14,5 +14,5 @@
 
 export default {
   '0': '0',
-  'full': '100%',
+  full: '100%'
 };
diff --git a/addon/tailwind/config/opacity.js b/addon/tailwind/config/opacity.js
@@ -16,5 +16,5 @@ export default {
   '25': '.25',
   '50': '.5',
   '75': '.75',
-  '100': '1',
+  '100': '1'
 };
diff --git a/addon/tailwind/config/screens.js b/addon/tailwind/config/screens.js
@@ -18,8 +18,8 @@
 */
 
 export default {
-  'sm': '576px',
-  'md': '768px',
-  'lg': '992px',
-  'xl': '1200px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px'
 };
diff --git a/addon/tailwind/config/svg-fill.js b/addon/tailwind/config/svg-fill.js
@@ -13,5 +13,5 @@
 */
 
 export default {
-  'current': 'currentColor',
+  current: 'currentColor'
 };
diff --git a/addon/tailwind/config/svg-stroke.js b/addon/tailwind/config/svg-stroke.js
@@ -13,5 +13,5 @@
 */
 
 export default {
-  'current': 'currentColor'
+  current: 'currentColor'
 };
diff --git a/addon/tailwind/config/tailwind.js b/addon/tailwind/config/tailwind.js
@@ -1,13 +1,15 @@
-'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 textColors from './text-colors';
+import backgroundColors from './background-colors';
+import backgroundSize from './background-size';
 import borderWidths from './border-widths';
+import borderColors from './border-colors';
 import borderRadius from './border-radius';
 import width from './width';
 import height from './height';
@@ -25,18 +27,18 @@ import svgFill from './svg-fill';
 import svgStroke from './svg-stroke';
 
 export default {
-
   colors,
   screens,
   fonts,
   textSizes,
   fontWeights,
   leading,
   tracking,
-  textColors: colors,
-  backgroundColors: colors,
+  textColors,
+  backgroundColors,
+  backgroundSize,
   borderWidths,
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
+  borderColors,
   borderRadius,
   width,
   height,
@@ -101,6 +103,26 @@ export default {
     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
diff --git a/addon/tailwind/config/text-colors.js b/addon/tailwind/config/text-colors.js
@@ -0,0 +1,16 @@
+import colors from './colors';
+
+/*
+|-----------------------------------------------------------------------------
+| 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}
+|
+*/
+
+export default colors;
diff --git a/addon/tailwind/config/z-index.js b/addon/tailwind/config/z-index.js
@@ -12,11 +12,11 @@
 */
 
 export default {
-  'auto': 'auto',
+  auto: 'auto',
   '0': 0,
   '10': 10,
   '20': 20,
   '30': 30,
   '40': 40,
-  '50': 50,
+  '50': 50
 };
diff --git a/addon/tailwind/modules.css b/addon/tailwind/modules.css
diff --git a/addon/tailwind/tailwind-preflight.css b/addon/tailwind/tailwind-preflight.css
diff --git a/addon/tailwind/tailwind-utilities.css b/addon/tailwind/tailwind-utilities.css
diff --git a/addon/tailwind/utilities/your-utility.css b/addon/tailwind/utilities/your-utility.css
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
