Add min/max width/height + some cleanup

dist/tailwind.css

@@ -1,3 +1,7 @@
+.text-base {
+  font-size: 1rem;
+}
+
 .text-xs {
   font-size: .75rem;
 }
@@ -6,7 +10,7 @@
   font-size: .875rem;
 }
 
-.text-base {
+.text-md {
   font-size: 1rem;
 }
 
@@ -1395,6 +1399,10 @@
   width: 100%;
 }
 
+.w-px {
+  width: 1px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1515,6 +1523,10 @@
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -2520,6 +2532,10 @@
 }
 
 @media (min-width: 576px) {
+  .sm\:text-base {
+    font-size: 1rem;
+  }
+
   .sm\:text-xs {
     font-size: .75rem;
   }
@@ -2528,7 +2544,7 @@
     font-size: .875rem;
   }
 
-  .sm\:text-base {
+  .sm\:text-md {
     font-size: 1rem;
   }
 
@@ -3917,6 +3933,10 @@
     width: 100%;
   }
 
+  .sm\:w-px {
+    width: 1px;
+  }
+
   .sm\:w-1\/2 {
     width: 50%;
   }
@@ -4037,6 +4057,10 @@
     height: 100%;
   }
 
+  .sm\:h-px {
+    height: 1px;
+  }
+
   .sm\:h-screen {
     height: 100vh;
   }
@@ -5043,6 +5067,10 @@
 }
 
 @media (min-width: 768px) {
+  .md\:text-base {
+    font-size: 1rem;
+  }
+
   .md\:text-xs {
     font-size: .75rem;
   }
@@ -5051,7 +5079,7 @@
     font-size: .875rem;
   }
 
-  .md\:text-base {
+  .md\:text-md {
     font-size: 1rem;
   }
 
@@ -6440,6 +6468,10 @@
     width: 100%;
   }
 
+  .md\:w-px {
+    width: 1px;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -6560,6 +6592,10 @@
     height: 100%;
   }
 
+  .md\:h-px {
+    height: 1px;
+  }
+
   .md\:h-screen {
     height: 100vh;
   }
@@ -7566,6 +7602,10 @@
 }
 
 @media (min-width: 992px) {
+  .lg\:text-base {
+    font-size: 1rem;
+  }
+
   .lg\:text-xs {
     font-size: .75rem;
   }
@@ -7574,7 +7614,7 @@
     font-size: .875rem;
   }
 
-  .lg\:text-base {
+  .lg\:text-md {
     font-size: 1rem;
   }
 
@@ -8963,6 +9003,10 @@
     width: 100%;
   }
 
+  .lg\:w-px {
+    width: 1px;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -9083,6 +9127,10 @@
     height: 100%;
   }
 
+  .lg\:h-px {
+    height: 1px;
+  }
+
   .lg\:h-screen {
     height: 100vh;
   }
@@ -10089,6 +10137,10 @@
 }
 
 @media (min-width: 1200px) {
+  .xl\:text-base {
+    font-size: 1rem;
+  }
+
   .xl\:text-xs {
     font-size: .75rem;
   }
@@ -10097,7 +10149,7 @@
     font-size: .875rem;
   }
 
-  .xl\:text-base {
+  .xl\:text-md {
     font-size: 1rem;
   }
 
@@ -11486,6 +11538,10 @@
     width: 100%;
   }
 
+  .xl\:w-px {
+    width: 1px;
+  }
+
   .xl\:w-1\/2 {
     width: 50%;
   }
@@ -11606,6 +11662,10 @@
     height: 100%;
   }
 
+  .xl\:h-px {
+    height: 1px;
+  }
+
   .xl\:h-screen {
     height: 100vh;
   }

src/generators/sizing.js

@@ -9,6 +9,22 @@ function defineWidths(widths) {
   })
 }
 
+function defineMinWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`min-w-${modifer}`, {
+      'min-width': `${size}`,
+    })
+  })
+}
+
+function defineMaxWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`max-w-${modifer}`, {
+      'max-width': `${size}`,
+    })
+  })
+}
+
 function defineHeights(heights) {
   return _.map(heights, (size, modifer) => {
     return defineClass(`h-${modifer}`, {
@@ -17,11 +33,29 @@ function defineHeights(heights) {
   })
 }
 
+function defineMinHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`min-h-${modifer}`, {
+      'min-height': `${size}`,
+    })
+  })
+}
+
+function defineMaxHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`max-h-${modifer}`, {
+      'max-height': `${size}`,
+    })
+  })
+}
+
 export default function ({ sizing }) {
-  const widths = _.merge({}, sizing.common, sizing.width)
-  const heights = _.merge({}, sizing.common, sizing.height)
   return _.flatten([
-    defineWidths(widths),
-    defineHeights(heights),
+    defineWidths(sizing.width),
+    defineMinWidths(sizing.minWidth),
+    defineMaxWidths(sizing.maxWidth),
+    defineHeights(sizing.height),
+    defineMinHeights(sizing.minHeight),
+    defineMaxHeights(sizing.maxHeight),
   ])
 }

src/generators/spacing.js

@@ -94,13 +94,9 @@ function defineNegativeMargin(negativeMargin) {
 }
 
 export default function ({ spacing }) {
-  const padding = _.merge({}, spacing.common, spacing.padding)
-  const margin = _.merge({}, spacing.common, spacing.margin)
-  const negativeMargin = _.merge({}, spacing.common, spacing.negativeMargin)
-
   return _.flatten([
-    definePadding(padding),
-    defineMargin(margin),
+    definePadding(spacing.padding),
+    defineMargin(spacing.margin),
     defineClasses({
       'mr-auto': {
         'margin-right': 'auto',
@@ -113,6 +109,6 @@ export default function ({ spacing }) {
         'margin-right': 'auto',
       },
     }),
-    defineNegativeMargin(negativeMargin),
+    defineNegativeMargin(spacing.negativeMargin),
   ])
 }

src/tailwind.css

@@ -1 +1 @@
-@tailwind-utilities;
+@tailwind-utilities all;

src/util/mergeConfig.js

@@ -9,7 +9,7 @@ const configTemplate = {
     weights: null,
     leading: null,
     tracking: null,
-    colors: null
+    colors: null,
   },
   backgrounds: {
     colors: null,
@@ -19,22 +19,23 @@ const configTemplate = {
     widths: null,
     rounded: {
       default: null,
-      modifiers: null
+      modifiers: null,
     },
-    colors: null
+    colors: null,
   },
   sizing: {
-    common: null,
     width: null,
-    height: null
+    height: null,
+    minHeight: null,
+    maxHeight: null,
+    minWidth: null,
+    maxWidth: null,
   },
   spacing: {
-    common: null,
     padding: null,
     margin: null,
-    pull: null
+    negativeMargin: null,
   },
-  constrain: null,
   shadows: null,
   zIndex: null,
   opacity: null,