Repository: tailwindlabs/tailwindcss (TypeScript)
Date: 2017-11-24 14:58:59+00:00
Task type: Feature

Issue:
FR: Unsetting pin utilities
Right now it's not possible to "undo" pin properties of tailwind, for example if you want to pin something to the left, but on a different breakpoint pin it to the right:

`<div class="absolute pin-l sm:pin-r">Some thing</div>`

This will just cause the div to be full width, not pin it to the right as we want to achieve. Maybe there should be a `pin-l-auto` or `no-pin-l` utility to solve this.



Issue discussion:
Or as there is already a `pin-x` and `pin-y`, maybe `auto` the opposite side by default?
Though that adds unnecessary properties in most cases, so yeah, new classes sound better for me too.

Solution patch:
diff --git a/src/generators/position.js b/src/generators/position.js
--- a/src/generators/position.js
+++ b/src/generators/position.js
@@ -6,19 +6,23 @@ export default function() {
     fixed: { position: 'fixed' },
     absolute: { position: 'absolute' },
     relative: { position: 'relative' },
-    'pin-t': { top: 0 },
-    'pin-r': { right: 0 },
-    'pin-b': { bottom: 0 },
-    'pin-l': { left: 0 },
-    'pin-y': { top: 0, bottom: 0 },
-    'pin-x': { right: 0, left: 0 },
+    'pin-none': {
+      top: 'auto',
+      right: 'auto',
+      bottom: 'auto',
+      left: 'auto',
+    },
     pin: {
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-      width: '100%',
-      height: '100%',
     },
+    'pin-y': { top: 0, bottom: 0 },
+    'pin-x': { right: 0, left: 0 },
+    'pin-t': { top: 0 },
+    'pin-r': { right: 0 },
+    'pin-b': { bottom: 0 },
+    'pin-l': { left: 0 },
   })
 }


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
@@ -3413,19 +3413,17 @@ button,
   position: relative;
 }
 
-.pin-t {
-  top: 0;
+.pin-none {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
 }
 
-.pin-r {
+.pin {
+  top: 0;
   right: 0;
-}
-
-.pin-b {
   bottom: 0;
-}
-
-.pin-l {
   left: 0;
 }
 
@@ -3439,13 +3437,20 @@ button,
   left: 0;
 }
 
-.pin {
+.pin-t {
   top: 0;
+}
+
+.pin-r {
   right: 0;
+}
+
+.pin-b {
   bottom: 0;
+}
+
+.pin-l {
   left: 0;
-  width: 100%;
-  height: 100%;
 }
 
 .resize-none {
@@ -7252,19 +7257,17 @@ button,
     position: relative;
   }
 
-  .sm\:pin-t {
-    top: 0;
+  .sm\:pin-none {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
   }
 
-  .sm\:pin-r {
+  .sm\:pin {
+    top: 0;
     right: 0;
-  }
-
-  .sm\:pin-b {
     bottom: 0;
-  }
-
-  .sm\:pin-l {
     left: 0;
   }
 
@@ -7278,13 +7281,20 @@ button,
     left: 0;
   }
 
-  .sm\:pin {
+  .sm\:pin-t {
     top: 0;
+  }
+
+  .sm\:pin-r {
     right: 0;
+  }
+
+  .sm\:pin-b {
     bottom: 0;
+  }
+
+  .sm\:pin-l {
     left: 0;
-    width: 100%;
-    height: 100%;
   }
 
   .sm\:resize-none {
@@ -11092,19 +11102,17 @@ button,
     position: relative;
   }
 
-  .md\:pin-t {
-    top: 0;
+  .md\:pin-none {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
   }
 
-  .md\:pin-r {
+  .md\:pin {
+    top: 0;
     right: 0;
-  }
-
-  .md\:pin-b {
     bottom: 0;
-  }
-
-  .md\:pin-l {
     left: 0;
   }
 
@@ -11118,13 +11126,20 @@ button,
     left: 0;
   }
 
-  .md\:pin {
+  .md\:pin-t {
     top: 0;
+  }
+
+  .md\:pin-r {
     right: 0;
+  }
+
+  .md\:pin-b {
     bottom: 0;
+  }
+
+  .md\:pin-l {
     left: 0;
-    width: 100%;
-    height: 100%;
   }
 
   .md\:resize-none {
@@ -14932,19 +14947,17 @@ button,
     position: relative;
   }
 
-  .lg\:pin-t {
-    top: 0;
+  .lg\:pin-none {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
   }
 
-  .lg\:pin-r {
+  .lg\:pin {
+    top: 0;
     right: 0;
-  }
-
-  .lg\:pin-b {
     bottom: 0;
-  }
-
-  .lg\:pin-l {
     left: 0;
   }
 
@@ -14958,13 +14971,20 @@ button,
     left: 0;
   }
 
-  .lg\:pin {
+  .lg\:pin-t {
     top: 0;
+  }
+
+  .lg\:pin-r {
     right: 0;
+  }
+
+  .lg\:pin-b {
     bottom: 0;
+  }
+
+  .lg\:pin-l {
     left: 0;
-    width: 100%;
-    height: 100%;
   }
 
   .lg\:resize-none {
@@ -18772,19 +18792,17 @@ button,
     position: relative;
   }
 
-  .xl\:pin-t {
-    top: 0;
+  .xl\:pin-none {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
   }
 
-  .xl\:pin-r {
+  .xl\:pin {
+    top: 0;
     right: 0;
-  }
-
-  .xl\:pin-b {
     bottom: 0;
-  }
-
-  .xl\:pin-l {
     left: 0;
   }
 
@@ -18798,13 +18816,20 @@ button,
     left: 0;
   }
 
-  .xl\:pin {
+  .xl\:pin-t {
     top: 0;
+  }
+
+  .xl\:pin-r {
     right: 0;
+  }
+
+  .xl\:pin-b {
     bottom: 0;
+  }
+
+  .xl\:pin-l {
     left: 0;
-    width: 100%;
-    height: 100%;
   }
 
   .xl\:resize-none {