Repository: tailwindlabs/tailwindcss (TypeScript) — Feature

Issue:
Add overflow-x-hidden and overflow-y-hidden
They're useful because sometimes you want `overflow-x-hidden overflow-y-auto` (the default `overflow-x` when `overflow-y` is set to `auto` is also `auto`).


Discussion:
Yes! I just had to manually add these to a site I was working on yesterday. I guess @adamwathan will be okay with a PR that includes this as well as tests for them (probably a PR for the docs too).

@benface do you wanna take care of it or should I open the PR myself?
@hacknug Actually after posting this issue I realized this is doable already with the existing classes. Just do:

```
overflow-hidden overflow-y-auto
```
or
```
overflow-hidden overflow-x-auto
```

Because `.overflow-hidden` is defined before the `.overflow-x-*` and `.overflow-y-*` classes in the CSS, it is overridden by them. So with the snippets above, you effectively get `overflow-x: hidden; overflow-y: auto;` and `overflow-y: hidden; overflow-x: auto;` respectively.
I think these should be in the framework 👍 Happy to look at a PR!

Resolving patch:
diff --git a/src/generators/overflow.js b/src/generators/overflow.js
--- a/src/generators/overflow.js
+++ b/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' },


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__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;
   }