Merge pull request tailwindlabs#445 from hacknug/feature/overflow

Add overflow hidden classes for each axis

Author: adamwathan

__tests__/fixtures/tailwind-output.css

@@ -3215,6 +3215,22 @@ button,
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.overflow-y-visible {
+  overflow-y: visible;
+}
+
 .overflow-x-scroll {
   overflow-x: scroll;
 }
@@ -7120,6 +7136,22 @@ button,
     overflow-y: auto;
   }
 
+  .sm\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .sm\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .sm\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .sm\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
   .sm\:overflow-x-scroll {
     overflow-x: scroll;
   }
@@ -11018,6 +11050,22 @@ button,
     overflow-y: auto;
   }
 
+  .md\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .md\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .md\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .md\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
   .md\:overflow-x-scroll {
     overflow-x: scroll;
   }
@@ -14916,6 +14964,22 @@ button,
     overflow-y: auto;
   }
 
+  .lg\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .lg\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .lg\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .lg\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
   .lg\:overflow-x-scroll {
     overflow-x: scroll;
   }
@@ -18814,6 +18878,22 @@ button,
     overflow-y: auto;
   }
 
+  .xl\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .xl\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .xl\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .xl\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
   .xl\:overflow-x-scroll {
     overflow-x: scroll;
   }

src/generators/overflow.js

@@ -8,6 +8,10 @@ export default function() {
     'overflow-scroll': { overflow: 'scroll' },
     'overflow-x-auto': { 'overflow-x': 'auto' },
     'overflow-y-auto': { 'overflow-y': 'auto' },
+    'overflow-x-hidden': { 'overflow-x': 'hidden' },
+    'overflow-y-hidden': { 'overflow-y': 'hidden' },
+    'overflow-x-visible': { 'overflow-x': 'visible' },
+    'overflow-y-visible': { 'overflow-y': 'visible' },
     'overflow-x-scroll': { 'overflow-x': 'scroll' },
     'overflow-y-scroll': { 'overflow-y': 'scroll' },
     'scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },