From 924986f7ec9adb22c9bbe7a2200b704509f64fb7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 13 Nov 2017 12:13:00 -0500
Subject: [PATCH 1/2] Switch rounded to radius, target corners instead of sides

---
 __tests__/fixtures/tailwind-output.css | 550 ++++++++++---------------
 defaultConfig.js                       |   6 +-
 src/generators/rounded.js              |  16 +-
 3 files changed, 233 insertions(+), 339 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 3f69218b9e54..ebb717f97b9d 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2112,124 +2112,104 @@ button,
   border-style: none;
 }
 
-.rounded {
-  border-radius: .25rem;
+.radius-none {
+  border-radius: 0;
 }
 
-.rounded-t {
-  border-top-right-radius: .25rem;
-  border-top-left-radius: .25rem;
+.radius-tr-none {
+  border-top-right-radius: 0;
 }
 
-.rounded-r {
-  border-top-right-radius: .25rem;
-  border-bottom-right-radius: .25rem;
+.radius-br-none {
+  border-bottom-right-radius: 0;
 }
 
-.rounded-b {
-  border-bottom-right-radius: .25rem;
-  border-bottom-left-radius: .25rem;
+.radius-bl-none {
+  border-bottom-left-radius: 0;
 }
 
-.rounded-l {
-  border-top-left-radius: .25rem;
-  border-bottom-left-radius: .25rem;
+.radius-tl-none {
+  border-top-left-radius: 0;
 }
 
-.rounded-sm {
+.radius-sm {
   border-radius: .125rem;
 }
 
-.rounded-t-sm {
+.radius-tr-sm {
   border-top-right-radius: .125rem;
-  border-top-left-radius: .125rem;
 }
 
-.rounded-r-sm {
-  border-top-right-radius: .125rem;
+.radius-br-sm {
   border-bottom-right-radius: .125rem;
 }
 
-.rounded-b-sm {
-  border-bottom-right-radius: .125rem;
+.radius-bl-sm {
   border-bottom-left-radius: .125rem;
 }
 
-.rounded-l-sm {
+.radius-tl-sm {
   border-top-left-radius: .125rem;
-  border-bottom-left-radius: .125rem;
 }
 
-.rounded-lg {
-  border-radius: .5rem;
+.radius-md {
+  border-radius: .25rem;
 }
 
-.rounded-t-lg {
-  border-top-right-radius: .5rem;
-  border-top-left-radius: .5rem;
+.radius-tr-md {
+  border-top-right-radius: .25rem;
 }
 
-.rounded-r-lg {
-  border-top-right-radius: .5rem;
-  border-bottom-right-radius: .5rem;
+.radius-br-md {
+  border-bottom-right-radius: .25rem;
 }
 
-.rounded-b-lg {
-  border-bottom-right-radius: .5rem;
-  border-bottom-left-radius: .5rem;
+.radius-bl-md {
+  border-bottom-left-radius: .25rem;
 }
 
-.rounded-l-lg {
-  border-top-left-radius: .5rem;
-  border-bottom-left-radius: .5rem;
+.radius-tl-md {
+  border-top-left-radius: .25rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.radius-lg {
+  border-radius: .5rem;
 }
 
-.rounded-t-full {
-  border-top-right-radius: 9999px;
-  border-top-left-radius: 9999px;
+.radius-tr-lg {
+  border-top-right-radius: .5rem;
 }
 
-.rounded-r-full {
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
+.radius-br-lg {
+  border-bottom-right-radius: .5rem;
 }
 
-.rounded-b-full {
-  border-bottom-right-radius: 9999px;
-  border-bottom-left-radius: 9999px;
+.radius-bl-lg {
+  border-bottom-left-radius: .5rem;
 }
 
-.rounded-l-full {
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
+.radius-tl-lg {
+  border-top-left-radius: .5rem;
 }
 
-.rounded-none {
-  border-radius: 0;
+.radius-full {
+  border-radius: 9999px;
 }
 
-.rounded-t-none {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
+.radius-tr-full {
+  border-top-right-radius: 9999px;
 }
 
-.rounded-r-none {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.radius-br-full {
+  border-bottom-right-radius: 9999px;
 }
 
-.rounded-b-none {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+.radius-bl-full {
+  border-bottom-left-radius: 9999px;
 }
 
-.rounded-l-none {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.radius-tl-full {
+  border-top-left-radius: 9999px;
 }
 
 .block {
@@ -5152,124 +5132,104 @@ button,
     border-style: none;
   }
 
-  .sm\:rounded {
-    border-radius: .25rem;
+  .sm\:radius-none {
+    border-radius: 0;
   }
 
-  .sm\:rounded-t {
-    border-top-right-radius: .25rem;
-    border-top-left-radius: .25rem;
+  .sm\:radius-tr-none {
+    border-top-right-radius: 0;
   }
 
-  .sm\:rounded-r {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
+  .sm\:radius-br-none {
+    border-bottom-right-radius: 0;
   }
 
-  .sm\:rounded-b {
-    border-bottom-right-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .sm\:radius-bl-none {
+    border-bottom-left-radius: 0;
   }
 
-  .sm\:rounded-l {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .sm\:radius-tl-none {
+    border-top-left-radius: 0;
   }
 
-  .sm\:rounded-sm {
+  .sm\:radius-sm {
     border-radius: .125rem;
   }
 
-  .sm\:rounded-t-sm {
+  .sm\:radius-tr-sm {
     border-top-right-radius: .125rem;
-    border-top-left-radius: .125rem;
   }
 
-  .sm\:rounded-r-sm {
-    border-top-right-radius: .125rem;
+  .sm\:radius-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .sm\:rounded-b-sm {
-    border-bottom-right-radius: .125rem;
+  .sm\:radius-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:rounded-l-sm {
+  .sm\:radius-tl-sm {
     border-top-left-radius: .125rem;
-    border-bottom-left-radius: .125rem;
   }
 
-  .sm\:rounded-lg {
-    border-radius: .5rem;
+  .sm\:radius-md {
+    border-radius: .25rem;
   }
 
-  .sm\:rounded-t-lg {
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
+  .sm\:radius-tr-md {
+    border-top-right-radius: .25rem;
   }
 
-  .sm\:rounded-r-lg {
-    border-top-right-radius: .5rem;
-    border-bottom-right-radius: .5rem;
+  .sm\:radius-br-md {
+    border-bottom-right-radius: .25rem;
   }
 
-  .sm\:rounded-b-lg {
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .sm\:radius-bl-md {
+    border-bottom-left-radius: .25rem;
   }
 
-  .sm\:rounded-l-lg {
-    border-top-left-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .sm\:radius-tl-md {
+    border-top-left-radius: .25rem;
   }
 
-  .sm\:rounded-full {
-    border-radius: 9999px;
+  .sm\:radius-lg {
+    border-radius: .5rem;
   }
 
-  .sm\:rounded-t-full {
-    border-top-right-radius: 9999px;
-    border-top-left-radius: 9999px;
+  .sm\:radius-tr-lg {
+    border-top-right-radius: .5rem;
   }
 
-  .sm\:rounded-r-full {
-    border-top-right-radius: 9999px;
-    border-bottom-right-radius: 9999px;
+  .sm\:radius-br-lg {
+    border-bottom-right-radius: .5rem;
   }
 
-  .sm\:rounded-b-full {
-    border-bottom-right-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .sm\:radius-bl-lg {
+    border-bottom-left-radius: .5rem;
   }
 
-  .sm\:rounded-l-full {
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .sm\:radius-tl-lg {
+    border-top-left-radius: .5rem;
   }
 
-  .sm\:rounded-none {
-    border-radius: 0;
+  .sm\:radius-full {
+    border-radius: 9999px;
   }
 
-  .sm\:rounded-t-none {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+  .sm\:radius-tr-full {
+    border-top-right-radius: 9999px;
   }
 
-  .sm\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .sm\:radius-br-full {
+    border-bottom-right-radius: 9999px;
   }
 
-  .sm\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .sm\:radius-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
-  .sm\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .sm\:radius-tl-full {
+    border-top-left-radius: 9999px;
   }
 
   .sm\:block {
@@ -8193,124 +8153,104 @@ button,
     border-style: none;
   }
 
-  .md\:rounded {
-    border-radius: .25rem;
+  .md\:radius-none {
+    border-radius: 0;
   }
 
-  .md\:rounded-t {
-    border-top-right-radius: .25rem;
-    border-top-left-radius: .25rem;
+  .md\:radius-tr-none {
+    border-top-right-radius: 0;
   }
 
-  .md\:rounded-r {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
+  .md\:radius-br-none {
+    border-bottom-right-radius: 0;
   }
 
-  .md\:rounded-b {
-    border-bottom-right-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .md\:radius-bl-none {
+    border-bottom-left-radius: 0;
   }
 
-  .md\:rounded-l {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .md\:radius-tl-none {
+    border-top-left-radius: 0;
   }
 
-  .md\:rounded-sm {
+  .md\:radius-sm {
     border-radius: .125rem;
   }
 
-  .md\:rounded-t-sm {
+  .md\:radius-tr-sm {
     border-top-right-radius: .125rem;
-    border-top-left-radius: .125rem;
   }
 
-  .md\:rounded-r-sm {
-    border-top-right-radius: .125rem;
+  .md\:radius-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .md\:rounded-b-sm {
-    border-bottom-right-radius: .125rem;
+  .md\:radius-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:rounded-l-sm {
+  .md\:radius-tl-sm {
     border-top-left-radius: .125rem;
-    border-bottom-left-radius: .125rem;
   }
 
-  .md\:rounded-lg {
-    border-radius: .5rem;
+  .md\:radius-md {
+    border-radius: .25rem;
   }
 
-  .md\:rounded-t-lg {
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
+  .md\:radius-tr-md {
+    border-top-right-radius: .25rem;
   }
 
-  .md\:rounded-r-lg {
-    border-top-right-radius: .5rem;
-    border-bottom-right-radius: .5rem;
+  .md\:radius-br-md {
+    border-bottom-right-radius: .25rem;
   }
 
-  .md\:rounded-b-lg {
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .md\:radius-bl-md {
+    border-bottom-left-radius: .25rem;
   }
 
-  .md\:rounded-l-lg {
-    border-top-left-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .md\:radius-tl-md {
+    border-top-left-radius: .25rem;
   }
 
-  .md\:rounded-full {
-    border-radius: 9999px;
+  .md\:radius-lg {
+    border-radius: .5rem;
   }
 
-  .md\:rounded-t-full {
-    border-top-right-radius: 9999px;
-    border-top-left-radius: 9999px;
+  .md\:radius-tr-lg {
+    border-top-right-radius: .5rem;
   }
 
-  .md\:rounded-r-full {
-    border-top-right-radius: 9999px;
-    border-bottom-right-radius: 9999px;
+  .md\:radius-br-lg {
+    border-bottom-right-radius: .5rem;
   }
 
-  .md\:rounded-b-full {
-    border-bottom-right-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .md\:radius-bl-lg {
+    border-bottom-left-radius: .5rem;
   }
 
-  .md\:rounded-l-full {
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .md\:radius-tl-lg {
+    border-top-left-radius: .5rem;
   }
 
-  .md\:rounded-none {
-    border-radius: 0;
+  .md\:radius-full {
+    border-radius: 9999px;
   }
 
-  .md\:rounded-t-none {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+  .md\:radius-tr-full {
+    border-top-right-radius: 9999px;
   }
 
-  .md\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .md\:radius-br-full {
+    border-bottom-right-radius: 9999px;
   }
 
-  .md\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:radius-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
-  .md\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:radius-tl-full {
+    border-top-left-radius: 9999px;
   }
 
   .md\:block {
@@ -11234,124 +11174,104 @@ button,
     border-style: none;
   }
 
-  .lg\:rounded {
-    border-radius: .25rem;
+  .lg\:radius-none {
+    border-radius: 0;
   }
 
-  .lg\:rounded-t {
-    border-top-right-radius: .25rem;
-    border-top-left-radius: .25rem;
+  .lg\:radius-tr-none {
+    border-top-right-radius: 0;
   }
 
-  .lg\:rounded-r {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
+  .lg\:radius-br-none {
+    border-bottom-right-radius: 0;
   }
 
-  .lg\:rounded-b {
-    border-bottom-right-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .lg\:radius-bl-none {
+    border-bottom-left-radius: 0;
   }
 
-  .lg\:rounded-l {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .lg\:radius-tl-none {
+    border-top-left-radius: 0;
   }
 
-  .lg\:rounded-sm {
+  .lg\:radius-sm {
     border-radius: .125rem;
   }
 
-  .lg\:rounded-t-sm {
+  .lg\:radius-tr-sm {
     border-top-right-radius: .125rem;
-    border-top-left-radius: .125rem;
   }
 
-  .lg\:rounded-r-sm {
-    border-top-right-radius: .125rem;
+  .lg\:radius-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .lg\:rounded-b-sm {
-    border-bottom-right-radius: .125rem;
+  .lg\:radius-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:rounded-l-sm {
+  .lg\:radius-tl-sm {
     border-top-left-radius: .125rem;
-    border-bottom-left-radius: .125rem;
   }
 
-  .lg\:rounded-lg {
-    border-radius: .5rem;
+  .lg\:radius-md {
+    border-radius: .25rem;
   }
 
-  .lg\:rounded-t-lg {
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
+  .lg\:radius-tr-md {
+    border-top-right-radius: .25rem;
   }
 
-  .lg\:rounded-r-lg {
-    border-top-right-radius: .5rem;
-    border-bottom-right-radius: .5rem;
+  .lg\:radius-br-md {
+    border-bottom-right-radius: .25rem;
   }
 
-  .lg\:rounded-b-lg {
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .lg\:radius-bl-md {
+    border-bottom-left-radius: .25rem;
   }
 
-  .lg\:rounded-l-lg {
-    border-top-left-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .lg\:radius-tl-md {
+    border-top-left-radius: .25rem;
   }
 
-  .lg\:rounded-full {
-    border-radius: 9999px;
+  .lg\:radius-lg {
+    border-radius: .5rem;
   }
 
-  .lg\:rounded-t-full {
-    border-top-right-radius: 9999px;
-    border-top-left-radius: 9999px;
+  .lg\:radius-tr-lg {
+    border-top-right-radius: .5rem;
   }
 
-  .lg\:rounded-r-full {
-    border-top-right-radius: 9999px;
-    border-bottom-right-radius: 9999px;
+  .lg\:radius-br-lg {
+    border-bottom-right-radius: .5rem;
   }
 
-  .lg\:rounded-b-full {
-    border-bottom-right-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .lg\:radius-bl-lg {
+    border-bottom-left-radius: .5rem;
   }
 
-  .lg\:rounded-l-full {
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .lg\:radius-tl-lg {
+    border-top-left-radius: .5rem;
   }
 
-  .lg\:rounded-none {
-    border-radius: 0;
+  .lg\:radius-full {
+    border-radius: 9999px;
   }
 
-  .lg\:rounded-t-none {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+  .lg\:radius-tr-full {
+    border-top-right-radius: 9999px;
   }
 
-  .lg\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .lg\:radius-br-full {
+    border-bottom-right-radius: 9999px;
   }
 
-  .lg\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .lg\:radius-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
-  .lg\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .lg\:radius-tl-full {
+    border-top-left-radius: 9999px;
   }
 
   .lg\:block {
@@ -14275,124 +14195,104 @@ button,
     border-style: none;
   }
 
-  .xl\:rounded {
-    border-radius: .25rem;
+  .xl\:radius-none {
+    border-radius: 0;
   }
 
-  .xl\:rounded-t {
-    border-top-right-radius: .25rem;
-    border-top-left-radius: .25rem;
+  .xl\:radius-tr-none {
+    border-top-right-radius: 0;
   }
 
-  .xl\:rounded-r {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
+  .xl\:radius-br-none {
+    border-bottom-right-radius: 0;
   }
 
-  .xl\:rounded-b {
-    border-bottom-right-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .xl\:radius-bl-none {
+    border-bottom-left-radius: 0;
   }
 
-  .xl\:rounded-l {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
+  .xl\:radius-tl-none {
+    border-top-left-radius: 0;
   }
 
-  .xl\:rounded-sm {
+  .xl\:radius-sm {
     border-radius: .125rem;
   }
 
-  .xl\:rounded-t-sm {
+  .xl\:radius-tr-sm {
     border-top-right-radius: .125rem;
-    border-top-left-radius: .125rem;
   }
 
-  .xl\:rounded-r-sm {
-    border-top-right-radius: .125rem;
+  .xl\:radius-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .xl\:rounded-b-sm {
-    border-bottom-right-radius: .125rem;
+  .xl\:radius-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:rounded-l-sm {
+  .xl\:radius-tl-sm {
     border-top-left-radius: .125rem;
-    border-bottom-left-radius: .125rem;
   }
 
-  .xl\:rounded-lg {
-    border-radius: .5rem;
+  .xl\:radius-md {
+    border-radius: .25rem;
   }
 
-  .xl\:rounded-t-lg {
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
+  .xl\:radius-tr-md {
+    border-top-right-radius: .25rem;
   }
 
-  .xl\:rounded-r-lg {
-    border-top-right-radius: .5rem;
-    border-bottom-right-radius: .5rem;
+  .xl\:radius-br-md {
+    border-bottom-right-radius: .25rem;
   }
 
-  .xl\:rounded-b-lg {
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .xl\:radius-bl-md {
+    border-bottom-left-radius: .25rem;
   }
 
-  .xl\:rounded-l-lg {
-    border-top-left-radius: .5rem;
-    border-bottom-left-radius: .5rem;
+  .xl\:radius-tl-md {
+    border-top-left-radius: .25rem;
   }
 
-  .xl\:rounded-full {
-    border-radius: 9999px;
+  .xl\:radius-lg {
+    border-radius: .5rem;
   }
 
-  .xl\:rounded-t-full {
-    border-top-right-radius: 9999px;
-    border-top-left-radius: 9999px;
+  .xl\:radius-tr-lg {
+    border-top-right-radius: .5rem;
   }
 
-  .xl\:rounded-r-full {
-    border-top-right-radius: 9999px;
-    border-bottom-right-radius: 9999px;
+  .xl\:radius-br-lg {
+    border-bottom-right-radius: .5rem;
   }
 
-  .xl\:rounded-b-full {
-    border-bottom-right-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .xl\:radius-bl-lg {
+    border-bottom-left-radius: .5rem;
   }
 
-  .xl\:rounded-l-full {
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
+  .xl\:radius-tl-lg {
+    border-top-left-radius: .5rem;
   }
 
-  .xl\:rounded-none {
-    border-radius: 0;
+  .xl\:radius-full {
+    border-radius: 9999px;
   }
 
-  .xl\:rounded-t-none {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+  .xl\:radius-tr-full {
+    border-top-right-radius: 9999px;
   }
 
-  .xl\:rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .xl\:radius-br-full {
+    border-bottom-right-radius: 9999px;
   }
 
-  .xl\:rounded-b-none {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .xl\:radius-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
-  .xl\:rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  .xl\:radius-tl-full {
+    border-top-left-radius: 9999px;
   }
 
   .xl\:block {
diff --git a/defaultConfig.js b/defaultConfig.js
index 19154bcd7345..c263570bf8da 100644
--- a/defaultConfig.js
+++ b/defaultConfig.js
@@ -410,16 +410,16 @@ module.exports = {
   | is provided, it will be made available as the non-suffixed `.rounded`
   | utility.
   |
-  | Class name: .rounded{-radius?}
+  | Class name: .radius-{size}
   |
   */
 
   borderRadius: {
-    default: '.25rem',
+    'none': '0',
     'sm': '.125rem',
+    'md': '.25rem',
     'lg': '.5rem',
     'full': '9999px',
-    'none': '0',
   },
 
 
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index f31d8031d90e..0e6fd560f71c 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -2,27 +2,21 @@ import _ from 'lodash'
 import defineClasses from '../util/defineClasses'
 
 function sizedBorder(radius, modifier) {
-  modifier = modifier === 'default' ? '' : `-${modifier}`
-
   return defineClasses({
-    [`rounded${modifier}`]: {
+    [`radius-${modifier}`]: {
       'border-radius': `${radius}`,
     },
-    [`rounded-t${modifier}`]: {
+    [`radius-tr-${modifier}`]: {
       'border-top-right-radius': `${radius}`,
-      'border-top-left-radius': `${radius}`,
     },
-    [`rounded-r${modifier}`]: {
-      'border-top-right-radius': `${radius}`,
+    [`radius-br-${modifier}`]: {
       'border-bottom-right-radius': `${radius}`,
     },
-    [`rounded-b${modifier}`]: {
-      'border-bottom-right-radius': `${radius}`,
+    [`radius-bl-${modifier}`]: {
       'border-bottom-left-radius': `${radius}`,
     },
-    [`rounded-l${modifier}`]: {
+    [`radius-tl-${modifier}`]: {
       'border-top-left-radius': `${radius}`,
-      'border-bottom-left-radius': `${radius}`,
     },
   })
 }

From 5ef221cb64899fef99a36f8c1415f43aad12e4fa Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 13 Nov 2017 14:56:11 -0500
Subject: [PATCH 2/2] Reintroduce radius-{side} utilities

---
 __tests__/fixtures/tailwind-output.css | 500 +++++++++++++++++++++++++
 src/generators/rounded.js              |  16 +
 2 files changed, 516 insertions(+)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index ebb717f97b9d..01f8a8bfbe88 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2116,6 +2116,26 @@ button,
   border-radius: 0;
 }
 
+.radius-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.radius-r-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.radius-b-none {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.radius-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .radius-tr-none {
   border-top-right-radius: 0;
 }
@@ -2136,6 +2156,26 @@ button,
   border-radius: .125rem;
 }
 
+.radius-t-sm {
+  border-top-left-radius: .125rem;
+  border-top-right-radius: .125rem;
+}
+
+.radius-r-sm {
+  border-top-right-radius: .125rem;
+  border-bottom-right-radius: .125rem;
+}
+
+.radius-b-sm {
+  border-bottom-right-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
+.radius-l-sm {
+  border-top-left-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
 .radius-tr-sm {
   border-top-right-radius: .125rem;
 }
@@ -2156,6 +2196,26 @@ button,
   border-radius: .25rem;
 }
 
+.radius-t-md {
+  border-top-left-radius: .25rem;
+  border-top-right-radius: .25rem;
+}
+
+.radius-r-md {
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+}
+
+.radius-b-md {
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
+.radius-l-md {
+  border-top-left-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
 .radius-tr-md {
   border-top-right-radius: .25rem;
 }
@@ -2176,6 +2236,26 @@ button,
   border-radius: .5rem;
 }
 
+.radius-t-lg {
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+}
+
+.radius-r-lg {
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+}
+
+.radius-b-lg {
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
+.radius-l-lg {
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
 .radius-tr-lg {
   border-top-right-radius: .5rem;
 }
@@ -2196,6 +2276,26 @@ button,
   border-radius: 9999px;
 }
 
+.radius-t-full {
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+}
+
+.radius-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.radius-b-full {
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.radius-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
 .radius-tr-full {
   border-top-right-radius: 9999px;
 }
@@ -5136,6 +5236,26 @@ button,
     border-radius: 0;
   }
 
+  .sm\:radius-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .sm\:radius-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:radius-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:radius-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .sm\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -5156,6 +5276,26 @@ button,
     border-radius: .125rem;
   }
 
+  .sm\:radius-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .sm\:radius-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .sm\:radius-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:radius-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .sm\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -5176,6 +5316,26 @@ button,
     border-radius: .25rem;
   }
 
+  .sm\:radius-t-md {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .sm\:radius-r-md {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .sm\:radius-b-md {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .sm\:radius-l-md {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .sm\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -5196,6 +5356,26 @@ button,
     border-radius: .5rem;
   }
 
+  .sm\:radius-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .sm\:radius-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .sm\:radius-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .sm\:radius-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .sm\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -5216,6 +5396,26 @@ button,
     border-radius: 9999px;
   }
 
+  .sm\:radius-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .sm\:radius-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .sm\:radius-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:radius-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
   .sm\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -8157,6 +8357,26 @@ button,
     border-radius: 0;
   }
 
+  .md\:radius-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .md\:radius-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:radius-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:radius-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .md\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -8177,6 +8397,26 @@ button,
     border-radius: .125rem;
   }
 
+  .md\:radius-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .md\:radius-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .md\:radius-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:radius-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .md\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -8197,6 +8437,26 @@ button,
     border-radius: .25rem;
   }
 
+  .md\:radius-t-md {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .md\:radius-r-md {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .md\:radius-b-md {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:radius-l-md {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .md\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -8217,6 +8477,26 @@ button,
     border-radius: .5rem;
   }
 
+  .md\:radius-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .md\:radius-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .md\:radius-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .md\:radius-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .md\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -8237,6 +8517,26 @@ button,
     border-radius: 9999px;
   }
 
+  .md\:radius-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .md\:radius-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .md\:radius-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .md\:radius-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
   .md\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -11178,6 +11478,26 @@ button,
     border-radius: 0;
   }
 
+  .lg\:radius-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .lg\:radius-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:radius-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:radius-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .lg\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -11198,6 +11518,26 @@ button,
     border-radius: .125rem;
   }
 
+  .lg\:radius-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .lg\:radius-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .lg\:radius-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .lg\:radius-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .lg\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -11218,6 +11558,26 @@ button,
     border-radius: .25rem;
   }
 
+  .lg\:radius-t-md {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .lg\:radius-r-md {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .lg\:radius-b-md {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .lg\:radius-l-md {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .lg\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -11238,6 +11598,26 @@ button,
     border-radius: .5rem;
   }
 
+  .lg\:radius-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .lg\:radius-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .lg\:radius-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .lg\:radius-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .lg\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -11258,6 +11638,26 @@ button,
     border-radius: 9999px;
   }
 
+  .lg\:radius-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .lg\:radius-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .lg\:radius-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:radius-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
   .lg\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -14199,6 +14599,26 @@ button,
     border-radius: 0;
   }
 
+  .xl\:radius-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .xl\:radius-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:radius-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:radius-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .xl\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -14219,6 +14639,26 @@ button,
     border-radius: .125rem;
   }
 
+  .xl\:radius-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .xl\:radius-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xl\:radius-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:radius-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .xl\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -14239,6 +14679,26 @@ button,
     border-radius: .25rem;
   }
 
+  .xl\:radius-t-md {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .xl\:radius-r-md {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xl\:radius-b-md {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xl\:radius-l-md {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .xl\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -14259,6 +14719,26 @@ button,
     border-radius: .5rem;
   }
 
+  .xl\:radius-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .xl\:radius-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xl\:radius-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xl\:radius-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .xl\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -14279,6 +14759,26 @@ button,
     border-radius: 9999px;
   }
 
+  .xl\:radius-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .xl\:radius-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xl\:radius-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:radius-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
   .xl\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index 0e6fd560f71c..ce360c0e9991 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -6,6 +6,22 @@ function sizedBorder(radius, modifier) {
     [`radius-${modifier}`]: {
       'border-radius': `${radius}`,
     },
+    [`radius-t-${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+      'border-top-right-radius': `${radius}`,
+    },
+    [`radius-r-${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
+      'border-bottom-right-radius': `${radius}`,
+    },
+    [`radius-b-${modifier}`]: {
+      'border-bottom-right-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
+    },
+    [`radius-l-${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
+    },
     [`radius-tr-${modifier}`]: {
       'border-top-right-radius': `${radius}`,
     },