From 985fa90ad16f8cac54a4ea4978ea9fba5fcb3664 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 16 Nov 2017 13:44:50 -0500
Subject: [PATCH] Reorder rounded utilities from most general to most specific

---
 __tests__/fixtures/tailwind-output.css | 818 ++++++++++++-------------
 src/generators/rounded.js              |  83 +--
 2 files changed, 457 insertions(+), 444 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 9c280a1c4e64..055ce3837553 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2123,44 +2123,40 @@ button,
   border-radius: 0;
 }
 
-.rounded-t-none {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.rounded-sm {
+  border-radius: .125rem;
 }
 
-.rounded-r-none {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.rounded {
+  border-radius: .25rem;
 }
 
-.rounded-b-none {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+.rounded-lg {
+  border-radius: .5rem;
 }
 
-.rounded-l-none {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.rounded-full {
+  border-radius: 9999px;
 }
 
-.rounded-tl-none {
+.rounded-t-none {
   border-top-left-radius: 0;
-}
-
-.rounded-tr-none {
   border-top-right-radius: 0;
 }
 
-.rounded-br-none {
+.rounded-r-none {
+  border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.rounded-bl-none {
+.rounded-b-none {
+  border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rounded-sm {
-  border-radius: .125rem;
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .rounded-t-sm {
@@ -2183,26 +2179,6 @@ button,
   border-bottom-left-radius: .125rem;
 }
 
-.rounded-tl-sm {
-  border-top-left-radius: .125rem;
-}
-
-.rounded-tr-sm {
-  border-top-right-radius: .125rem;
-}
-
-.rounded-br-sm {
-  border-bottom-right-radius: .125rem;
-}
-
-.rounded-bl-sm {
-  border-bottom-left-radius: .125rem;
-}
-
-.rounded {
-  border-radius: .25rem;
-}
-
 .rounded-t {
   border-top-left-radius: .25rem;
   border-top-right-radius: .25rem;
@@ -2223,26 +2199,6 @@ button,
   border-bottom-left-radius: .25rem;
 }
 
-.rounded-tl {
-  border-top-left-radius: .25rem;
-}
-
-.rounded-tr {
-  border-top-right-radius: .25rem;
-}
-
-.rounded-br {
-  border-bottom-right-radius: .25rem;
-}
-
-.rounded-bl {
-  border-bottom-left-radius: .25rem;
-}
-
-.rounded-lg {
-  border-radius: .5rem;
-}
-
 .rounded-t-lg {
   border-top-left-radius: .5rem;
   border-top-right-radius: .5rem;
@@ -2263,26 +2219,6 @@ button,
   border-bottom-left-radius: .5rem;
 }
 
-.rounded-tl-lg {
-  border-top-left-radius: .5rem;
-}
-
-.rounded-tr-lg {
-  border-top-right-radius: .5rem;
-}
-
-.rounded-br-lg {
-  border-bottom-right-radius: .5rem;
-}
-
-.rounded-bl-lg {
-  border-bottom-left-radius: .5rem;
-}
-
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-t-full {
   border-top-left-radius: 9999px;
   border-top-right-radius: 9999px;
@@ -2303,6 +2239,70 @@ button,
   border-bottom-left-radius: 9999px;
 }
 
+.rounded-tl-none {
+  border-top-left-radius: 0;
+}
+
+.rounded-tr-none {
+  border-top-right-radius: 0;
+}
+
+.rounded-br-none {
+  border-bottom-right-radius: 0;
+}
+
+.rounded-bl-none {
+  border-bottom-left-radius: 0;
+}
+
+.rounded-tl-sm {
+  border-top-left-radius: .125rem;
+}
+
+.rounded-tr-sm {
+  border-top-right-radius: .125rem;
+}
+
+.rounded-br-sm {
+  border-bottom-right-radius: .125rem;
+}
+
+.rounded-bl-sm {
+  border-bottom-left-radius: .125rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: .25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: .25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: .25rem;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: .25rem;
+}
+
+.rounded-tl-lg {
+  border-top-left-radius: .5rem;
+}
+
+.rounded-tr-lg {
+  border-top-right-radius: .5rem;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: .5rem;
+}
+
+.rounded-bl-lg {
+  border-bottom-left-radius: .5rem;
+}
+
 .rounded-tl-full {
   border-top-left-radius: 9999px;
 }
@@ -5243,44 +5243,40 @@ button,
     border-radius: 0;
   }
 
-  .sm\:rounded-t-none {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .sm\:rounded-sm {
+    border-radius: .125rem;
   }
 
-  .sm\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .sm\:rounded {
+    border-radius: .25rem;
   }
 
-  .sm\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .sm\:rounded-lg {
+    border-radius: .5rem;
   }
 
-  .sm\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .sm\:rounded-full {
+    border-radius: 9999px;
   }
 
-  .sm\:rounded-tl-none {
+  .sm\:rounded-t-none {
     border-top-left-radius: 0;
-  }
-
-  .sm\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .sm\:rounded-br-none {
+  .sm\:rounded-r-none {
+    border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .sm\:rounded-bl-none {
+  .sm\:rounded-b-none {
+    border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .sm\:rounded-sm {
-    border-radius: .125rem;
+  .sm\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .sm\:rounded-t-sm {
@@ -5303,26 +5299,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:rounded-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
-  .sm\:rounded-tr-sm {
-    border-top-right-radius: .125rem;
-  }
-
-  .sm\:rounded-br-sm {
-    border-bottom-right-radius: .125rem;
-  }
-
-  .sm\:rounded-bl-sm {
-    border-bottom-left-radius: .125rem;
-  }
-
-  .sm\:rounded {
-    border-radius: .25rem;
-  }
-
   .sm\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
@@ -5343,26 +5319,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .sm\:rounded-tl {
-    border-top-left-radius: .25rem;
-  }
-
-  .sm\:rounded-tr {
-    border-top-right-radius: .25rem;
-  }
-
-  .sm\:rounded-br {
-    border-bottom-right-radius: .25rem;
-  }
-
-  .sm\:rounded-bl {
-    border-bottom-left-radius: .25rem;
-  }
-
-  .sm\:rounded-lg {
-    border-radius: .5rem;
-  }
-
   .sm\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
@@ -5383,26 +5339,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .sm\:rounded-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
-  .sm\:rounded-tr-lg {
-    border-top-right-radius: .5rem;
-  }
-
-  .sm\:rounded-br-lg {
-    border-bottom-right-radius: .5rem;
-  }
-
-  .sm\:rounded-bl-lg {
-    border-bottom-left-radius: .5rem;
-  }
-
-  .sm\:rounded-full {
-    border-radius: 9999px;
-  }
-
   .sm\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
@@ -5423,6 +5359,70 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .sm\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .sm\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .sm\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .sm\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .sm\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .sm\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .sm\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .sm\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .sm\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .sm\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .sm\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .sm\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .sm\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
   .sm\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
@@ -8364,44 +8364,40 @@ button,
     border-radius: 0;
   }
 
-  .md\:rounded-t-none {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .md\:rounded-sm {
+    border-radius: .125rem;
   }
 
-  .md\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .md\:rounded {
+    border-radius: .25rem;
   }
 
-  .md\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:rounded-lg {
+    border-radius: .5rem;
   }
 
-  .md\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:rounded-full {
+    border-radius: 9999px;
   }
 
-  .md\:rounded-tl-none {
+  .md\:rounded-t-none {
     border-top-left-radius: 0;
-  }
-
-  .md\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .md\:rounded-br-none {
+  .md\:rounded-r-none {
+    border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .md\:rounded-bl-none {
+  .md\:rounded-b-none {
+    border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .md\:rounded-sm {
-    border-radius: .125rem;
+  .md\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .md\:rounded-t-sm {
@@ -8424,26 +8420,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:rounded-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
-  .md\:rounded-tr-sm {
-    border-top-right-radius: .125rem;
-  }
-
-  .md\:rounded-br-sm {
-    border-bottom-right-radius: .125rem;
-  }
-
-  .md\:rounded-bl-sm {
-    border-bottom-left-radius: .125rem;
-  }
-
-  .md\:rounded {
-    border-radius: .25rem;
-  }
-
   .md\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
@@ -8464,26 +8440,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .md\:rounded-tl {
-    border-top-left-radius: .25rem;
-  }
-
-  .md\:rounded-tr {
-    border-top-right-radius: .25rem;
-  }
-
-  .md\:rounded-br {
-    border-bottom-right-radius: .25rem;
-  }
-
-  .md\:rounded-bl {
-    border-bottom-left-radius: .25rem;
-  }
-
-  .md\:rounded-lg {
-    border-radius: .5rem;
-  }
-
   .md\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
@@ -8504,26 +8460,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .md\:rounded-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
-  .md\:rounded-tr-lg {
-    border-top-right-radius: .5rem;
-  }
-
-  .md\:rounded-br-lg {
-    border-bottom-right-radius: .5rem;
-  }
-
-  .md\:rounded-bl-lg {
-    border-bottom-left-radius: .5rem;
-  }
-
-  .md\:rounded-full {
-    border-radius: 9999px;
-  }
-
   .md\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
@@ -8544,6 +8480,70 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .md\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .md\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .md\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .md\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .md\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .md\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .md\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .md\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .md\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .md\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .md\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .md\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
   .md\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
@@ -11485,6 +11485,22 @@ button,
     border-radius: 0;
   }
 
+  .lg\:rounded-sm {
+    border-radius: .125rem;
+  }
+
+  .lg\:rounded {
+    border-radius: .25rem;
+  }
+
+  .lg\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .lg\:rounded-full {
+    border-radius: 9999px;
+  }
+
   .lg\:rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -11505,39 +11521,19 @@ button,
     border-bottom-left-radius: 0;
   }
 
-  .lg\:rounded-tl-none {
-    border-top-left-radius: 0;
+  .lg\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
   }
 
-  .lg\:rounded-tr-none {
-    border-top-right-radius: 0;
+  .lg\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
   }
 
-  .lg\:rounded-br-none {
-    border-bottom-right-radius: 0;
-  }
-
-  .lg\:rounded-bl-none {
-    border-bottom-left-radius: 0;
-  }
-
-  .lg\:rounded-sm {
-    border-radius: .125rem;
-  }
-
-  .lg\:rounded-t-sm {
-    border-top-left-radius: .125rem;
-    border-top-right-radius: .125rem;
-  }
-
-  .lg\:rounded-r-sm {
-    border-top-right-radius: .125rem;
-    border-bottom-right-radius: .125rem;
-  }
-
-  .lg\:rounded-b-sm {
-    border-bottom-right-radius: .125rem;
-    border-bottom-left-radius: .125rem;
+  .lg\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
   }
 
   .lg\:rounded-l-sm {
@@ -11545,26 +11541,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:rounded-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
-  .lg\:rounded-tr-sm {
-    border-top-right-radius: .125rem;
-  }
-
-  .lg\:rounded-br-sm {
-    border-bottom-right-radius: .125rem;
-  }
-
-  .lg\:rounded-bl-sm {
-    border-bottom-left-radius: .125rem;
-  }
-
-  .lg\:rounded {
-    border-radius: .25rem;
-  }
-
   .lg\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
@@ -11585,26 +11561,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .lg\:rounded-tl {
-    border-top-left-radius: .25rem;
-  }
-
-  .lg\:rounded-tr {
-    border-top-right-radius: .25rem;
-  }
-
-  .lg\:rounded-br {
-    border-bottom-right-radius: .25rem;
-  }
-
-  .lg\:rounded-bl {
-    border-bottom-left-radius: .25rem;
-  }
-
-  .lg\:rounded-lg {
-    border-radius: .5rem;
-  }
-
   .lg\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
@@ -11625,26 +11581,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .lg\:rounded-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
-  .lg\:rounded-tr-lg {
-    border-top-right-radius: .5rem;
-  }
-
-  .lg\:rounded-br-lg {
-    border-bottom-right-radius: .5rem;
-  }
-
-  .lg\:rounded-bl-lg {
-    border-bottom-left-radius: .5rem;
-  }
-
-  .lg\:rounded-full {
-    border-radius: 9999px;
-  }
-
   .lg\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
@@ -11665,6 +11601,70 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .lg\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .lg\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .lg\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .lg\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .lg\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .lg\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .lg\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .lg\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .lg\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .lg\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .lg\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .lg\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .lg\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .lg\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
   .lg\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
@@ -14606,44 +14606,40 @@ button,
     border-radius: 0;
   }
 
-  .xl\:rounded-t-none {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .xl\:rounded-sm {
+    border-radius: .125rem;
   }
 
-  .xl\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .xl\:rounded {
+    border-radius: .25rem;
   }
 
-  .xl\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .xl\:rounded-lg {
+    border-radius: .5rem;
   }
 
-  .xl\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .xl\:rounded-full {
+    border-radius: 9999px;
   }
 
-  .xl\:rounded-tl-none {
+  .xl\:rounded-t-none {
     border-top-left-radius: 0;
-  }
-
-  .xl\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .xl\:rounded-br-none {
+  .xl\:rounded-r-none {
+    border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .xl\:rounded-bl-none {
+  .xl\:rounded-b-none {
+    border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .xl\:rounded-sm {
-    border-radius: .125rem;
+  .xl\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .xl\:rounded-t-sm {
@@ -14666,26 +14662,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:rounded-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
-  .xl\:rounded-tr-sm {
-    border-top-right-radius: .125rem;
-  }
-
-  .xl\:rounded-br-sm {
-    border-bottom-right-radius: .125rem;
-  }
-
-  .xl\:rounded-bl-sm {
-    border-bottom-left-radius: .125rem;
-  }
-
-  .xl\:rounded {
-    border-radius: .25rem;
-  }
-
   .xl\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
@@ -14706,26 +14682,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .xl\:rounded-tl {
-    border-top-left-radius: .25rem;
-  }
-
-  .xl\:rounded-tr {
-    border-top-right-radius: .25rem;
-  }
-
-  .xl\:rounded-br {
-    border-bottom-right-radius: .25rem;
-  }
-
-  .xl\:rounded-bl {
-    border-bottom-left-radius: .25rem;
-  }
-
-  .xl\:rounded-lg {
-    border-radius: .5rem;
-  }
-
   .xl\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
@@ -14746,26 +14702,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .xl\:rounded-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
-  .xl\:rounded-tr-lg {
-    border-top-right-radius: .5rem;
-  }
-
-  .xl\:rounded-br-lg {
-    border-bottom-right-radius: .5rem;
-  }
-
-  .xl\:rounded-bl-lg {
-    border-bottom-left-radius: .5rem;
-  }
-
-  .xl\:rounded-full {
-    border-radius: 9999px;
-  }
-
   .xl\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
@@ -14786,6 +14722,70 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .xl\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .xl\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .xl\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .xl\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .xl\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xl\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .xl\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .xl\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xl\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xl\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .xl\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .xl\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xl\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
   .xl\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index 8ef553db1fb8..ba40d09aa756 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -1,44 +1,57 @@
 import _ from 'lodash'
 import defineClasses from '../util/defineClasses'
 
-function sizedBorder(radius, modifier) {
-  modifier = modifier === 'default' ? '' : `-${modifier}`
+function defineBorderRadiusUtilities(borderRadiuses) {
+  const generators = [
+    (radius, modifier) =>
+      defineClasses({
+        [`rounded${modifier}`]: {
+          'border-radius': `${radius}`,
+        },
+      }),
+    (radius, modifier) =>
+      defineClasses({
+        [`rounded-t${modifier}`]: {
+          'border-top-left-radius': `${radius}`,
+          'border-top-right-radius': `${radius}`,
+        },
+        [`rounded-r${modifier}`]: {
+          'border-top-right-radius': `${radius}`,
+          'border-bottom-right-radius': `${radius}`,
+        },
+        [`rounded-b${modifier}`]: {
+          'border-bottom-right-radius': `${radius}`,
+          'border-bottom-left-radius': `${radius}`,
+        },
+        [`rounded-l${modifier}`]: {
+          'border-top-left-radius': `${radius}`,
+          'border-bottom-left-radius': `${radius}`,
+        },
+      }),
+    (radius, modifier) =>
+      defineClasses({
+        [`rounded-tl${modifier}`]: {
+          'border-top-left-radius': `${radius}`,
+        },
+        [`rounded-tr${modifier}`]: {
+          'border-top-right-radius': `${radius}`,
+        },
+        [`rounded-br${modifier}`]: {
+          'border-bottom-right-radius': `${radius}`,
+        },
+        [`rounded-bl${modifier}`]: {
+          'border-bottom-left-radius': `${radius}`,
+        },
+      }),
+  ]
 
-  return defineClasses({
-    [`rounded${modifier}`]: {
-      'border-radius': `${radius}`,
-    },
-    [`rounded-t${modifier}`]: {
-      'border-top-left-radius': `${radius}`,
-      'border-top-right-radius': `${radius}`,
-    },
-    [`rounded-r${modifier}`]: {
-      'border-top-right-radius': `${radius}`,
-      'border-bottom-right-radius': `${radius}`,
-    },
-    [`rounded-b${modifier}`]: {
-      'border-bottom-right-radius': `${radius}`,
-      'border-bottom-left-radius': `${radius}`,
-    },
-    [`rounded-l${modifier}`]: {
-      'border-top-left-radius': `${radius}`,
-      'border-bottom-left-radius': `${radius}`,
-    },
-    [`rounded-tl${modifier}`]: {
-      'border-top-left-radius': `${radius}`,
-    },
-    [`rounded-tr${modifier}`]: {
-      'border-top-right-radius': `${radius}`,
-    },
-    [`rounded-br${modifier}`]: {
-      'border-bottom-right-radius': `${radius}`,
-    },
-    [`rounded-bl${modifier}`]: {
-      'border-bottom-left-radius': `${radius}`,
-    },
+  return _.flatMap(generators, generator => {
+    return _.flatMap(borderRadiuses, (radius, modifier) => {
+      return generator(radius, modifier === 'default' ? '' : `-${modifier}`)
+    })
   })
 }
 
 module.exports = function({ borderRadius }) {
-  return _.flatMap(borderRadius, sizedBorder)
+  return defineBorderRadiusUtilities(borderRadius)
 }