From 8537ceb7ce7347001649863ba3331d108588144f Mon Sep 17 00:00:00 2001
From: Sebastian De Deyne <sebastiandedeyne@gmail.com>
Date: Tue, 7 Nov 2017 23:55:32 +0100
Subject: [PATCH] Add sticky utility

---
 __tests__/fixtures/tailwind-output.css | 20 ++++++++++++++++++++
 docs/source/docs/positioning.blade.md  |  5 +++++
 src/generators/position.js             |  1 +
 3 files changed, 26 insertions(+)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 012fa8425..35c0969cb 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2192,6 +2192,10 @@ button,
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .pin-t {
   top: 0;
 }
@@ -5152,6 +5156,10 @@ button,
     position: relative;
   }
 
+  .sm\:sticky {
+    position: sticky;
+  }
+
   .sm\:pin-t {
     top: 0;
   }
@@ -8113,6 +8121,10 @@ button,
     position: relative;
   }
 
+  .md\:sticky {
+    position: sticky;
+  }
+
   .md\:pin-t {
     top: 0;
   }
@@ -11074,6 +11086,10 @@ button,
     position: relative;
   }
 
+  .lg\:sticky {
+    position: sticky;
+  }
+
   .lg\:pin-t {
     top: 0;
   }
@@ -14035,6 +14051,10 @@ button,
     position: relative;
   }
 
+  .xl\:sticky {
+    position: sticky;
+  }
+
   .xl\:pin-t {
     top: 0;
   }
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index cc0d2cf9a..061923a00 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -46,6 +46,11 @@ title: "Positioning"
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: relative;</td>
                 <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
             </tr>
+            <tr>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.sticky</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: sticky;</td>
+                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element relative to the browser window when it's about to leave the viewport.</td>
+            </tr>
             <tr>
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-t</td>
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">top: 0;</td>
diff --git a/src/generators/position.js b/src/generators/position.js
index 2bc9bf186..e05118424 100644
--- a/src/generators/position.js
+++ b/src/generators/position.js
@@ -6,6 +6,7 @@ export default function() {
     fixed: { position: 'fixed' },
     absolute: { position: 'absolute' },
     relative: { position: 'relative' },
+    sticky: { position: 'sticky' },
     'pin-t': { top: 0 },
     'pin-r': { right: 0 },
     'pin-b': { bottom: 0 },