add col- and row- span-full utility (#2471)

* add col- and row- span-full utility add `col-span-full` and `row-span-full` per @flybayer in #2467 (comment) * fixtures Co-authored-by: swyx <[email protected]>
tailwindlabs · Oct 6, 2020 · 8ced98c · 8ced98c
1 parent 008e045
commit 8ced98c
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
@@ -40026,6 +40026,10 @@ video {
   grid-column: span 12 / span 12;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -40194,6 +40198,10 @@ video {
   grid-row: span 6 / span 6;
 }
 
+.row-span-full {
+  grid-row: 1 / -1;
+}
+
 .row-start-1 {
   grid-row-start: 1;
 }
@@ -83613,6 +83621,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .sm\:col-start-1 {
     grid-column-start: 1;
   }
@@ -83781,6 +83793,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .sm\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .sm\:row-start-1 {
     grid-row-start: 1;
   }
@@ -127170,6 +127186,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .md\:col-start-1 {
     grid-column-start: 1;
   }
@@ -127338,6 +127358,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .md\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .md\:row-start-1 {
     grid-row-start: 1;
   }
@@ -170727,6 +170751,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .lg\:col-start-1 {
     grid-column-start: 1;
   }
@@ -170895,6 +170923,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .lg\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .lg\:row-start-1 {
     grid-row-start: 1;
   }
@@ -214284,6 +214316,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .xl\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .xl\:col-start-1 {
     grid-column-start: 1;
   }
@@ -214452,6 +214488,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .xl\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .xl\:row-start-1 {
     grid-row-start: 1;
   }
@@ -257841,6 +257881,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .\32xl\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .\32xl\:col-start-1 {
     grid-column-start: 1;
   }
@@ -258009,6 +258053,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .\32xl\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .\32xl\:row-start-1 {
     grid-row-start: 1;
   }

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -16726,6 +16726,10 @@ video {
   grid-column: span 12 / span 12 !important;
 }
 
+.col-span-full {
+  grid-column: 1 / -1 !important;
+}
+
 .col-start-1 {
   grid-column-start: 1 !important;
 }
@@ -16894,6 +16898,10 @@ video {
   grid-row: span 6 / span 6 !important;
 }
 
+.row-span-full {
+  grid-row: 1 / -1 !important;
+}
+
 .row-start-1 {
   grid-row-start: 1 !important;
 }
@@ -34949,6 +34957,10 @@ video {
     grid-column: span 12 / span 12 !important;
   }
 
+  .sm\:col-span-full {
+    grid-column: 1 / -1 !important;
+  }
+
   .sm\:col-start-1 {
     grid-column-start: 1 !important;
   }
@@ -35117,6 +35129,10 @@ video {
     grid-row: span 6 / span 6 !important;
   }
 
+  .sm\:row-span-full {
+    grid-row: 1 / -1 !important;
+  }
+
   .sm\:row-start-1 {
     grid-row-start: 1 !important;
   }
@@ -53142,6 +53158,10 @@ video {
     grid-column: span 12 / span 12 !important;
   }
 
+  .md\:col-span-full {
+    grid-column: 1 / -1 !important;
+  }
+
   .md\:col-start-1 {
     grid-column-start: 1 !important;
   }
@@ -53310,6 +53330,10 @@ video {
     grid-row: span 6 / span 6 !important;
   }
 
+  .md\:row-span-full {
+    grid-row: 1 / -1 !important;
+  }
+
   .md\:row-start-1 {
     grid-row-start: 1 !important;
   }
@@ -71335,6 +71359,10 @@ video {
     grid-column: span 12 / span 12 !important;
   }
 
+  .lg\:col-span-full {
+    grid-column: 1 / -1 !important;
+  }
+
   .lg\:col-start-1 {
     grid-column-start: 1 !important;
   }
@@ -71503,6 +71531,10 @@ video {
     grid-row: span 6 / span 6 !important;
   }
 
+  .lg\:row-span-full {
+    grid-row: 1 / -1 !important;
+  }
+
   .lg\:row-start-1 {
     grid-row-start: 1 !important;
   }
@@ -89528,6 +89560,10 @@ video {
     grid-column: span 12 / span 12 !important;
   }
 
+  .xl\:col-span-full {
+    grid-column: 1 / -1 !important;
+  }
+
   .xl\:col-start-1 {
     grid-column-start: 1 !important;
   }
@@ -89696,6 +89732,10 @@ video {
     grid-row: span 6 / span 6 !important;
   }
 
+  .xl\:row-span-full {
+    grid-row: 1 / -1 !important;
+  }
+
   .xl\:row-start-1 {
     grid-row-start: 1 !important;
   }

diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -14278,6 +14278,10 @@ video {
   grid-column: span 12 / span 12;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -14446,6 +14450,10 @@ video {
   grid-row: span 6 / span 6;
 }
 
+.row-span-full {
+  grid-row: 1 / -1;
+}
+
 .row-start-1 {
   grid-row-start: 1;
 }
@@ -30053,6 +30061,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .sm\:col-start-1 {
     grid-column-start: 1;
   }
@@ -30221,6 +30233,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .sm\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .sm\:row-start-1 {
     grid-row-start: 1;
   }
@@ -45798,6 +45814,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .md\:col-start-1 {
     grid-column-start: 1;
   }
@@ -45966,6 +45986,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .md\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .md\:row-start-1 {
     grid-row-start: 1;
   }
@@ -61543,6 +61567,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .lg\:col-start-1 {
     grid-column-start: 1;
   }
@@ -61711,6 +61739,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .lg\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .lg\:row-start-1 {
     grid-row-start: 1;
   }
@@ -77288,6 +77320,10 @@ video {
     grid-column: span 12 / span 12;
   }
 
+  .xl\:col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .xl\:col-start-1 {
     grid-column-start: 1;
   }
@@ -77456,6 +77492,10 @@ video {
     grid-row: span 6 / span 6;
   }
 
+  .xl\:row-span-full {
+    grid-row: 1 / -1;
+  }
+
   .xl\:row-start-1 {
     grid-row-start: 1;
   }