From 5f31ad6f420749547e890f866ed403156770e88c Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 2 Apr 2018 18:56:18 +0200 Subject: [PATCH 1/2] Add overflow hidden classes for each axis (plus tests) --- __tests__/fixtures/tailwind-output.css | 40 ++++++++++++++++++++++++++ src/generators/overflow.js | 2 ++ 2 files changed, 42 insertions(+) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 9cd0a44f0..a907da235 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -3215,6 +3215,14 @@ button, overflow-y: auto; } +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + .overflow-x-scroll { overflow-x: scroll; } @@ -7120,6 +7128,14 @@ button, overflow-y: auto; } + .sm\:overflow-x-hidden { + overflow-x: hidden; + } + + .sm\:overflow-y-hidden { + overflow-y: hidden; + } + .sm\:overflow-x-scroll { overflow-x: scroll; } @@ -11018,6 +11034,14 @@ button, overflow-y: auto; } + .md\:overflow-x-hidden { + overflow-x: hidden; + } + + .md\:overflow-y-hidden { + overflow-y: hidden; + } + .md\:overflow-x-scroll { overflow-x: scroll; } @@ -14916,6 +14940,14 @@ button, overflow-y: auto; } + .lg\:overflow-x-hidden { + overflow-x: hidden; + } + + .lg\:overflow-y-hidden { + overflow-y: hidden; + } + .lg\:overflow-x-scroll { overflow-x: scroll; } @@ -18814,6 +18846,14 @@ button, overflow-y: auto; } + .xl\:overflow-x-hidden { + overflow-x: hidden; + } + + .xl\:overflow-y-hidden { + overflow-y: hidden; + } + .xl\:overflow-x-scroll { overflow-x: scroll; } diff --git a/src/generators/overflow.js b/src/generators/overflow.js index 51047ed6f..35cef6655 100644 --- a/src/generators/overflow.js +++ b/src/generators/overflow.js @@ -8,6 +8,8 @@ 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-scroll': { 'overflow-x': 'scroll' }, 'overflow-y-scroll': { 'overflow-y': 'scroll' }, 'scrolling-touch': { '-webkit-overflow-scrolling': 'touch' }, From f4c9d45f8e1eb8ba29644f58529b0cb6c3359eba Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Tue, 3 Apr 2018 11:38:51 +0200 Subject: [PATCH 2/2] Add classes to set overflow visible on independent axis --- __tests__/fixtures/tailwind-output.css | 40 ++++++++++++++++++++++++++ src/generators/overflow.js | 2 ++ 2 files changed, 42 insertions(+) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index a907da235..179504a8f 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -3223,6 +3223,14 @@ button, overflow-y: hidden; } +.overflow-x-visible { + overflow-x: visible; +} + +.overflow-y-visible { + overflow-y: visible; +} + .overflow-x-scroll { overflow-x: scroll; } @@ -7136,6 +7144,14 @@ button, overflow-y: hidden; } + .sm\:overflow-x-visible { + overflow-x: visible; + } + + .sm\:overflow-y-visible { + overflow-y: visible; + } + .sm\:overflow-x-scroll { overflow-x: scroll; } @@ -11042,6 +11058,14 @@ button, overflow-y: hidden; } + .md\:overflow-x-visible { + overflow-x: visible; + } + + .md\:overflow-y-visible { + overflow-y: visible; + } + .md\:overflow-x-scroll { overflow-x: scroll; } @@ -14948,6 +14972,14 @@ button, overflow-y: hidden; } + .lg\:overflow-x-visible { + overflow-x: visible; + } + + .lg\:overflow-y-visible { + overflow-y: visible; + } + .lg\:overflow-x-scroll { overflow-x: scroll; } @@ -18854,6 +18886,14 @@ button, overflow-y: hidden; } + .xl\:overflow-x-visible { + overflow-x: visible; + } + + .xl\:overflow-y-visible { + overflow-y: visible; + } + .xl\:overflow-x-scroll { overflow-x: scroll; } diff --git a/src/generators/overflow.js b/src/generators/overflow.js index 35cef6655..eefeb01c3 100644 --- a/src/generators/overflow.js +++ b/src/generators/overflow.js @@ -10,6 +10,8 @@ export default function() { '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' },