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 7, 2020 · 50fc441 · 50fc441
1 parent d01636c
commit 50fc441
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;
  }