Repository: tailwindlabs/tailwindcss
Pull request #2766 (2020-11-14 03:22:49)

Remove clearfix utility
Now that Tailwind doesn't support IE11, we don't need this anymore since `flow-root` is a better solution with great browser support:

https://www.digitalocean.com/community/tutorials/css-no-more-clearfix-flow-root

It always annoyed me that this class lived in the `float` core plugin too, so it brings me great joy to delete this.


Patch:
diff --git a/src/plugins/float.js b/src/plugins/float.js
index d639314f..45924399 100644
--- a/src/plugins/float.js
+++ b/src/plugins/float.js
@@ -5,11 +5,6 @@ export default function () {
         '.float-right': { float: 'right' },
         '.float-left': { float: 'left' },
         '.float-none': { float: 'none' },
-        '.clearfix:after': {
-          content: '""',
-          display: 'table',
-          clear: 'both',
-        },
       },
       variants('float')
     )


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 0941f4cf..e88680be 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -11417,12 +11417,6 @@ video {
   float: none;
 }
 
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .clear-left {
   clear: left;
 }
@@ -40227,12 +40221,6 @@ video {
     float: none;
   }
 
-  .sm\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .sm\:clear-left {
     clear: left;
   }
@@ -69007,12 +68995,6 @@ video {
     float: none;
   }
 
-  .md\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .md\:clear-left {
     clear: left;
   }
@@ -97787,12 +97769,6 @@ video {
     float: none;
   }
 
-  .lg\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .lg\:clear-left {
     clear: left;
   }
@@ -126567,12 +126543,6 @@ video {
     float: none;
   }
 
-  .xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .xl\:clear-left {
     clear: left;
   }
@@ -155347,12 +155317,6 @@ video {
     float: none;
   }
 
-  .\32xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .\32xl\:clear-left {
     clear: left;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 0fb8143d..817375b6 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -11417,12 +11417,6 @@ video {
   float: none !important;
 }
 
-.clearfix:after {
-  content: "" !important;
-  display: table !important;
-  clear: both !important;
-}
-
 .clear-left {
   clear: left !important;
 }
@@ -40227,12 +40221,6 @@ video {
     float: none !important;
   }
 
-  .sm\:clearfix:after {
-    content: "" !important;
-    display: table !important;
-    clear: both !important;
-  }
-
   .sm\:clear-left {
     clear: left !important;
   }
@@ -69007,12 +68995,6 @@ video {
     float: none !important;
   }
 
-  .md\:clearfix:after {
-    content: "" !important;
-    display: table !important;
-    clear: both !important;
-  }
-
   .md\:clear-left {
     clear: left !important;
   }
@@ -97787,12 +97769,6 @@ video {
     float: none !important;
   }
 
-  .lg\:clearfix:after {
-    content: "" !important;
-    display: table !important;
-    clear: both !important;
-  }
-
   .lg\:clear-left {
     clear: left !important;
   }
@@ -126567,12 +126543,6 @@ video {
     float: none !important;
   }
 
-  .xl\:clearfix:after {
-    content: "" !important;
-    display: table !important;
-    clear: both !important;
-  }
-
   .xl\:clear-left {
     clear: left !important;
   }
@@ -155347,12 +155317,6 @@ video {
     float: none !important;
   }
 
-  .\32xl\:clearfix:after {
-    content: "" !important;
-    display: table !important;
-    clear: both !important;
-  }
-
   .\32xl\:clear-left {
     clear: left !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 8489d12b..6cf7df34 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -9855,12 +9855,6 @@ video {
   float: none;
 }
 
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .clear-left {
   clear: left;
 }
@@ -36109,12 +36103,6 @@ video {
     float: none;
   }
 
-  .sm\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .sm\:clear-left {
     clear: left;
   }
@@ -62333,12 +62321,6 @@ video {
     float: none;
   }
 
-  .md\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .md\:clear-left {
     clear: left;
   }
@@ -88557,12 +88539,6 @@ video {
     float: none;
   }
 
-  .lg\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .lg\:clear-left {
     clear: left;
   }
@@ -114781,12 +114757,6 @@ video {
     float: none;
   }
 
-  .xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .xl\:clear-left {
     clear: left;
   }
@@ -141005,12 +140975,6 @@ video {
     float: none;
   }
 
-  .\32xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .\32xl\:clear-left {
     clear: left;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 0941f4cf..e88680be 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -11417,12 +11417,6 @@ video {
   float: none;
 }
 
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .clear-left {
   clear: left;
 }
@@ -40227,12 +40221,6 @@ video {
     float: none;
   }
 
-  .sm\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .sm\:clear-left {
     clear: left;
   }
@@ -69007,12 +68995,6 @@ video {
     float: none;
   }
 
-  .md\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .md\:clear-left {
     clear: left;
   }
@@ -97787,12 +97769,6 @@ video {
     float: none;
   }
 
-  .lg\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .lg\:clear-left {
     clear: left;
   }
@@ -126567,12 +126543,6 @@ video {
     float: none;
   }
 
-  .xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .xl\:clear-left {
     clear: left;
   }
@@ -155347,12 +155317,6 @@ video {
     float: none;
   }
 
-  .\32xl\:clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   .\32xl\:clear-left {
     clear: left;
   }