From d1deaba4c586aa9af99c20de27612d7537f6aa65 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 11 Nov 2017 13:19:12 -0500
Subject: [PATCH 1/9] Combine sides and sizes for rounded utilities, like we do
 with border width

---
 __tests__/fixtures/tailwind-output.css | 510 ++++++++++++++++++++++---
 src/generators/rounded.js              |  41 +-
 2 files changed, 474 insertions(+), 77 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 0714f376a6ca..3f69218b9e54 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2116,42 +2116,122 @@ button,
   border-radius: .25rem;
 }
 
+.rounded-t {
+  border-top-right-radius: .25rem;
+  border-top-left-radius: .25rem;
+}
+
+.rounded-r {
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+}
+
+.rounded-b {
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
+.rounded-l {
+  border-top-left-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
 .rounded-sm {
   border-radius: .125rem;
 }
 
+.rounded-t-sm {
+  border-top-right-radius: .125rem;
+  border-top-left-radius: .125rem;
+}
+
+.rounded-r-sm {
+  border-top-right-radius: .125rem;
+  border-bottom-right-radius: .125rem;
+}
+
+.rounded-b-sm {
+  border-bottom-right-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
+.rounded-l-sm {
+  border-top-left-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
 .rounded-lg {
   border-radius: .5rem;
 }
 
+.rounded-t-lg {
+  border-top-right-radius: .5rem;
+  border-top-left-radius: .5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+}
+
+.rounded-b-lg {
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
+.rounded-l-lg {
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
 
-.rounded-none {
-  border-radius: 0;
+.rounded-t-full {
+  border-top-right-radius: 9999px;
+  border-top-left-radius: 9999px;
 }
 
-.rounded-t {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
 }
 
-.rounded-r {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+.rounded-b-full {
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
 }
 
-.rounded-b {
-  border-top-left-radius: 0;
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-none {
+  border-radius: 0;
+}
+
+.rounded-t-none {
   border-top-right-radius: 0;
+  border-top-left-radius: 0;
 }
 
-.rounded-l {
+.rounded-r-none {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.rounded-b-none {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .block {
   display: block;
 }
@@ -5076,42 +5156,122 @@ button,
     border-radius: .25rem;
   }
 
+  .sm\:rounded-t {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+  }
+
+  .sm\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .sm\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .sm\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .sm\:rounded-sm {
     border-radius: .125rem;
   }
 
+  .sm\:rounded-t-sm {
+    border-top-right-radius: .125rem;
+    border-top-left-radius: .125rem;
+  }
+
+  .sm\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .sm\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .sm\:rounded-lg {
     border-radius: .5rem;
   }
 
+  .sm\:rounded-t-lg {
+    border-top-right-radius: .5rem;
+    border-top-left-radius: .5rem;
+  }
+
+  .sm\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .sm\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .sm\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .sm\:rounded-full {
     border-radius: 9999px;
   }
 
-  .sm\:rounded-none {
-    border-radius: 0;
+  .sm\:rounded-t-full {
+    border-top-right-radius: 9999px;
+    border-top-left-radius: 9999px;
   }
 
-  .sm\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .sm\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
   }
 
-  .sm\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  .sm\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .sm\:rounded-b {
-    border-top-left-radius: 0;
+  .sm\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:rounded-none {
+    border-radius: 0;
+  }
+
+  .sm\:rounded-t-none {
     border-top-right-radius: 0;
+    border-top-left-radius: 0;
   }
 
-  .sm\:rounded-l {
+  .sm\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
+  .sm\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -8037,42 +8197,122 @@ button,
     border-radius: .25rem;
   }
 
+  .md\:rounded-t {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+  }
+
+  .md\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .md\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .md\:rounded-sm {
     border-radius: .125rem;
   }
 
+  .md\:rounded-t-sm {
+    border-top-right-radius: .125rem;
+    border-top-left-radius: .125rem;
+  }
+
+  .md\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .md\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .md\:rounded-lg {
     border-radius: .5rem;
   }
 
+  .md\:rounded-t-lg {
+    border-top-right-radius: .5rem;
+    border-top-left-radius: .5rem;
+  }
+
+  .md\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .md\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .md\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .md\:rounded-full {
     border-radius: 9999px;
   }
 
-  .md\:rounded-none {
-    border-radius: 0;
+  .md\:rounded-t-full {
+    border-top-right-radius: 9999px;
+    border-top-left-radius: 9999px;
   }
 
-  .md\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
   }
 
-  .md\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  .md\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .md\:rounded-b {
-    border-top-left-radius: 0;
+  .md\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .md\:rounded-none {
+    border-radius: 0;
+  }
+
+  .md\:rounded-t-none {
     border-top-right-radius: 0;
+    border-top-left-radius: 0;
   }
 
-  .md\:rounded-l {
+  .md\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
+  .md\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .md\:block {
     display: block;
   }
@@ -10998,42 +11238,122 @@ button,
     border-radius: .25rem;
   }
 
+  .lg\:rounded-t {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+  }
+
+  .lg\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .lg\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .lg\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .lg\:rounded-sm {
     border-radius: .125rem;
   }
 
+  .lg\:rounded-t-sm {
+    border-top-right-radius: .125rem;
+    border-top-left-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-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .lg\:rounded-lg {
     border-radius: .5rem;
   }
 
+  .lg\:rounded-t-lg {
+    border-top-right-radius: .5rem;
+    border-top-left-radius: .5rem;
+  }
+
+  .lg\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .lg\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .lg\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .lg\:rounded-full {
     border-radius: 9999px;
   }
 
-  .lg\:rounded-none {
-    border-radius: 0;
+  .lg\:rounded-t-full {
+    border-top-right-radius: 9999px;
+    border-top-left-radius: 9999px;
   }
 
-  .lg\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .lg\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
   }
 
-  .lg\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  .lg\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .lg\:rounded-b {
-    border-top-left-radius: 0;
+  .lg\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:rounded-none {
+    border-radius: 0;
+  }
+
+  .lg\:rounded-t-none {
     border-top-right-radius: 0;
+    border-top-left-radius: 0;
   }
 
-  .lg\:rounded-l {
+  .lg\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
+  .lg\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -13959,42 +14279,122 @@ button,
     border-radius: .25rem;
   }
 
+  .xl\:rounded-t {
+    border-top-right-radius: .25rem;
+    border-top-left-radius: .25rem;
+  }
+
+  .xl\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xl\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xl\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
   .xl\:rounded-sm {
     border-radius: .125rem;
   }
 
+  .xl\:rounded-t-sm {
+    border-top-right-radius: .125rem;
+    border-top-left-radius: .125rem;
+  }
+
+  .xl\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xl\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
   .xl\:rounded-lg {
     border-radius: .5rem;
   }
 
+  .xl\:rounded-t-lg {
+    border-top-right-radius: .5rem;
+    border-top-left-radius: .5rem;
+  }
+
+  .xl\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xl\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xl\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
   .xl\:rounded-full {
     border-radius: 9999px;
   }
 
-  .xl\:rounded-none {
-    border-radius: 0;
+  .xl\:rounded-t-full {
+    border-top-right-radius: 9999px;
+    border-top-left-radius: 9999px;
   }
 
-  .xl\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .xl\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
   }
 
-  .xl\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  .xl\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .xl\:rounded-b {
-    border-top-left-radius: 0;
+  .xl\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:rounded-none {
+    border-radius: 0;
+  }
+
+  .xl\:rounded-t-none {
     border-top-right-radius: 0;
+    border-top-left-radius: 0;
   }
 
-  .xl\:rounded-l {
+  .xl\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
+  .xl\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .xl\:block {
     display: block;
   }
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index b251725a252f..f31d8031d90e 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -1,35 +1,32 @@
 import _ from 'lodash'
-import defineClass from '../util/defineClass'
 import defineClasses from '../util/defineClasses'
 
-function sideVariants() {
+function sizedBorder(radius, modifier) {
+  modifier = modifier === 'default' ? '' : `-${modifier}`
+
   return defineClasses({
-    'rounded-t': {
-      'border-bottom-right-radius': '0',
-      'border-bottom-left-radius': '0',
+    [`rounded${modifier}`]: {
+      'border-radius': `${radius}`,
+    },
+    [`rounded-t${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
+      'border-top-left-radius': `${radius}`,
     },
-    'rounded-r': {
-      'border-bottom-left-radius': '0',
-      'border-top-left-radius': '0',
+    [`rounded-r${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
+      'border-bottom-right-radius': `${radius}`,
     },
-    'rounded-b': {
-      'border-top-left-radius': '0',
-      'border-top-right-radius': '0',
+    [`rounded-b${modifier}`]: {
+      'border-bottom-right-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
     },
-    'rounded-l': {
-      'border-top-right-radius': '0',
-      'border-bottom-right-radius': '0',
+    [`rounded-l${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
     },
   })
 }
 
 module.exports = function({ borderRadius }) {
-  return _(borderRadius)
-    .map((radius, modifier) => {
-      return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, {
-        'border-radius': radius,
-      })
-    })
-    .concat(sideVariants())
-    .value()
+  return _.flatMap(borderRadius, sizedBorder)
 }

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 2/9] 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 3/9] 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}`,
     },

From 5ea66c7e0bd0dd83bb847e4b670d3d7e86bdf4d4 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 Nov 2017 16:03:46 -0500
Subject: [PATCH 4/9] Add margin auto to docs config (via default)

---
 docs/tailwind.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/tailwind.js b/docs/tailwind.js
index 52cc443e5d0a..23838d01a51e 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -78,8 +78,14 @@ config.padding = Object.assign(config.padding, {
   '80': '20rem',
 })
 
-config.margin = config.padding
+config.margin = Object.assign(config.margin, {
+  '10': '2.5rem',
+  '12': '3rem',
+  '16': '4rem',
+  '20': '5rem',
+  '80': '20rem',
+})
 
-config.negativeMargin = config.padding
+config.negativeMargin = config.margin
 
 module.exports = config

From ec5bb5ed24e8d442c81d5199806a1f81fbb78915 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 Nov 2017 16:40:48 -0500
Subject: [PATCH 5/9] Update the inline border radius documentation

---
 defaultConfig.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/defaultConfig.js b/defaultConfig.js
index c263570bf8da..baf82df42bfa 100644
--- a/defaultConfig.js
+++ b/defaultConfig.js
@@ -406,11 +406,9 @@ module.exports = {
   | Border radius                    https://tailwindcss.com/docs/border-radius
   |-----------------------------------------------------------------------------
   |
-  | Here is where you define your border radius values. If a `default` radius
-  | is provided, it will be made available as the non-suffixed `.rounded`
-  | utility.
+  | Here is where you define your border radius values.
   |
-  | Class name: .radius-{size}
+  | Class name: .radius{-side?}-{size}
   |
   */
 

From d4f7b3b51390dee87cd27ad29f77b61d4230c42c Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 Nov 2017 16:41:08 -0500
Subject: [PATCH 6/9] Update docs for new radius utilities

---
 .../js/components/ResponsiveCodeSample.vue    |   2 +-
 docs/source/_assets/less/markdown.less        |   4 +-
 docs/source/_layouts/documentation.blade.php  |   2 +-
 docs/source/_partials/code-sample.blade.php   |   2 +-
 .../_partials/customized-config.blade.php     |   2 +-
 .../source/_partials/feature-badges.blade.php |  32 +-
 .../work-in-progress-example.blade.php        |   2 +-
 .../_partials/work-in-progress.blade.php      |   2 +-
 docs/source/docs/border-color.blade.md        |   2 +-
 docs/source/docs/border-radius.blade.md       | 336 ++++++++++++++----
 docs/source/docs/border-width.blade.md        |  22 +-
 docs/source/docs/colors.blade.md              |  20 +-
 docs/source/docs/examples/alerts.blade.md     |   8 +-
 docs/source/docs/examples/buttons.blade.md    |  28 +-
 docs/source/docs/examples/cards.blade.md      |  14 +-
 docs/source/docs/examples/forms.blade.md      |  30 +-
 docs/source/docs/examples/navigation.blade.md |  18 +-
 .../docs/extracting-components.blade.md       |  30 +-
 docs/source/docs/forms.blade.md               |   2 +-
 .../docs/functions-and-directives.blade.md    |   6 +-
 docs/source/docs/installation.blade.md        |   4 +-
 docs/source/docs/opacity.blade.md             |  10 +-
 docs/source/docs/positioning.blade.md         |  28 +-
 docs/source/docs/responsive-design.blade.md   |  10 +-
 docs/source/docs/shadows.blade.md             |  10 +-
 docs/source/docs/spacing.blade.md             |  38 +-
 docs/source/docs/text-color.blade.md          |   2 +-
 docs/source/docs/visibility.blade.md          |  14 +-
 docs/source/docs/what-is-tailwind.blade.md    |  18 +-
 docs/source/index.blade.php                   |  12 +-
 30 files changed, 444 insertions(+), 266 deletions(-)

diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
index 408d694a6c25..c11a7655a7d5 100644
--- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue
+++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
@@ -22,7 +22,7 @@
         <p class="text-xs">xl</p>
       </span>
     </div>
-    <div class="rounded overflow-hidden border-2 border-smoke mb-8">
+    <div class="radius-md overflow-hidden border-2 border-smoke mb-8">
       <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
         <div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
       </div>
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 9081c6798497..b76bedf42b6d 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -31,7 +31,7 @@
   > p code, p& code& {
     @apply .inline-block;
     @apply .bg-smoke-lighter;
-    @apply .rounded-sm;
+    @apply .radius-sm;
     @apply .text-sm;
     @apply .p-1;
     @apply .leading-none;
@@ -46,7 +46,7 @@
     @apply .font-mono;
     @apply .border-2;
     @apply .border-smoke;
-    @apply .rounded;
+    @apply .radius-md;
     font-weight: 400;
   }
 
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index f2e1f1f88bf7..48268c15349d 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -24,7 +24,7 @@
         </p>
       </div>
       <div class="relative">
-        <input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
+        <input id="docsearch" class="placeholder-grey-dark radius-md bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
         <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
           <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
         </div>
diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php
index 3c5925c0b8be..cde8dd68ed18 100644
--- a/docs/source/_partials/code-sample.blade.php
+++ b/docs/source/_partials/code-sample.blade.php
@@ -1,4 +1,4 @@
-<div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
+<div class="radius-md overflow-hidden border-2 border-grey-light mb-8 bg-white">
   <div class="border-b-2 border-grey-light p-4 {{ $class ?? '' }}">
     {{ $slot }}
   </div>
diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php
index f69383f2acd7..159e08e726be 100644
--- a/docs/source/_partials/customized-config.blade.php
+++ b/docs/source/_partials/customized-config.blade.php
@@ -1,4 +1,4 @@
-<div class="border-2 border-smoke rounded mb-8">
+<div class="border-2 border-smoke radius-md mb-8">
   <div class="bg-smoke-lighter p-4 font-mono text-sm">
     <div class="whitespace-pre text-grey-dark">{</div>
     <div class="whitespace-pre text-grey-light">  // ...</div>
diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php
index 4f2be45b5f24..50e7aef41e90 100644
--- a/docs/source/_partials/feature-badges.blade.php
+++ b/docs/source/_partials/feature-badges.blade.php
@@ -1,15 +1,15 @@
 <div class="mb-6">
   <div class="flex flex-wrap -mb-2">
     @if ($responsive)
-    <a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#responsive" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Responsive</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Responsive</span>
@@ -17,15 +17,15 @@
     @endif
 
     @if ($customizable)
-    <a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#customizing" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Customizable</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Customizable</span>
@@ -33,15 +33,15 @@
     @endif
 
     @if ($hover)
-    <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#hover" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Hover</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Hover</span>
@@ -49,15 +49,15 @@
     @endif
 
     @if ($focus)
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Focus</span>
     </span>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Focus</span>
diff --git a/docs/source/_partials/work-in-progress-example.blade.php b/docs/source/_partials/work-in-progress-example.blade.php
index be08a866d65e..dc95d2093641 100644
--- a/docs/source/_partials/work-in-progress-example.blade.php
+++ b/docs/source/_partials/work-in-progress-example.blade.php
@@ -1,5 +1,5 @@
 <div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+  <div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3">
     <div class="flex">
       <div class="py-1">
         <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
diff --git a/docs/source/_partials/work-in-progress.blade.php b/docs/source/_partials/work-in-progress.blade.php
index 16a349c7023f..47cd42cbb94d 100644
--- a/docs/source/_partials/work-in-progress.blade.php
+++ b/docs/source/_partials/work-in-progress.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3 mb-4">
+<div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3 mb-4">
   <div class="flex">
     <div class="py-1">
       <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
index a55a18f57423..f0c2b7247bd2 100644
--- a/docs/source/docs/border-color.blade.md
+++ b/docs/source/docs/border-color.blade.md
@@ -37,7 +37,7 @@ features:
 In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
-<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
+<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold radius-md">
   Button
 </button>
 @endcomponent
diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index 320a21f9a313..560a8e5e05d1 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -11,11 +11,6 @@ features:
 
 <div class="border-t border-grey-lighter">
   <table class="w-full text-left table-collapse">
-    <colgroup>
-      <col class="w-1/6">
-      <col class="w-1/3">
-      <col class="w-1/2">
-    </colgroup>
     <thead>
       <tr>
         <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
@@ -25,61 +20,229 @@ features:
     </thead>
     <tbody class="align-baseline">
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
-        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-top-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;<br>border-bottom-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-top-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;<br>border-bottom-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-full</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-top-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;<br>border-bottom-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-top-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;<br>border-bottom-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 0;</td>
+       Remove any border radius from all corners of an element. <td class="p-2 border-t border-smoke-light text-sm text-grey-darker"></td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-top-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;<br>border-bottom-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;<br>border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-bottom-left-radius: 0;<br>
-          border-bottom-right-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the top corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-left-radius: 0;<br>
-          border-bottom-left-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the right side corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-right-radius: 0;<br>
-          border-top-left-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the bottom corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-right-radius: 0;<br>
-          border-bottom-right-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the left side corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom left corner of an element.</td>
       </tr>
     </tbody>
   </table>
@@ -87,96 +250,113 @@ features:
 
 ## Rounded corners
 
-Use the `.rounded`, `.rounded-sm`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
+Use the `.radius-sm`, `.radius-md`, or `.radius-lg` utilities to apply different border radius sizes to an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 rounded-sm">.rounded-sm</div>
-<div class="bg-grey-light mr-3 p-4 rounded">.rounded</div>
-<div class="bg-grey-light p-4 rounded-lg">.rounded-lg</div>
+<div class="bg-grey-light mr-3 p-4 radius-sm">.radius-sm</div>
+<div class="bg-grey-light mr-3 p-4 radius-md">.radius-md</div>
+<div class="bg-grey-light p-4 radius-lg">.radius-lg</div>
 @slot('code')
-<div class="rounded-sm"></div>
-<div class="rounded"></div>
-<div class="rounded-lg"></div>
+<div class="radius-sm"></div>
+<div class="radius-md"></div>
+<div class="radius-lg"></div>
 @endslot
 @endcomponent
 
 ## Pills and circles
 
-Use the `.rounded-full` utility to create pills and circles.
+Use the `.radius-full` utility to create pills and circles.
 
 @component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm'])
-<div class="bg-grey-light mr-3 py-2 px-4 rounded-full">Pill shape</div>
-<div class="bg-grey-light h-16 w-16 rounded-full flex items-center justify-center">Circle</div>
+<div class="bg-grey-light mr-3 py-2 px-4 radius-full">Pill shape</div>
+<div class="bg-grey-light h-16 w-16 radius-full flex items-center justify-center">Circle</div>
 @slot('code')
-<div class="rounded-full py-2 px-4">Pill shape</div>
-<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>
+<div class="radius-full py-2 px-4">Pill shape</div>
+<div class="radius-full h-16 w-16 flex items-center justify-center">Circle</div>
 @endslot
 @endcomponent
 
 ## No rounding
 
-Use `.rounded-none` to remove an existing border radius from an element.
+Use `.radius-none` to remove an existing border radius from an element.
 
 This is most commonly used to remove a border radius that was applied at a smaller breakpoint.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-<div class="p-4 rounded-none bg-grey-light">.rounded-none</div>
+<div class="p-4 radius-none bg-grey-light">.radius-none</div>
 @slot('code')
-<div class="rounded-none"></div>
+<div class="radius-none"></div>
 @endslot
 @endcomponent
 
 ## Rounding sides separately
 
-Combine one of the `.rounded{-size}` utilities with `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` to only round one side of an element.
+Use `.radius-{t|r|b|l}-{size}` to only round one side an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-t">.rounded-t</div>
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-r">.rounded-r</div>
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-b">.rounded-b</div>
-<div class="bg-grey-light p-4 rounded-lg rounded-l">.rounded-l</div>
+<div class="bg-grey-light mr-3 p-4 radius-t-lg">.radius-t-lg</div>
+<div class="bg-grey-light mr-3 p-4 radius-r-lg">.radius-r-lg</div>
+<div class="bg-grey-light mr-3 p-4 radius-b-lg">.radius-b-lg</div>
+<div class="bg-grey-light p-4 radius-l-lg">.radius-l-lg</div>
 @slot('code')
-<div class="rounded-lg rounded-t"></div>
-<div class="rounded-lg rounded-r"></div>
-<div class="rounded-lg rounded-b"></div>
-<div class="rounded-lg rounded-l"></div>
+<div class="radius-t-lg"></div>
+<div class="radius-r-lg"></div>
+<div class="radius-b-lg"></div>
+<div class="radius-l-lg"></div>
+@endslot
+@endcomponent
+
+## Rounding corners separately
+
+Use `.radius-{tl|tr|br|bl}-{size}` to only round one corner an element.
+
+@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
+<div class="bg-grey-light mr-3 p-4 radius-tl-lg">.radius-tl-lg</div>
+<div class="bg-grey-light mr-3 p-4 radius-tr-lg">.radius-tr-lg</div>
+<div class="bg-grey-light mr-3 p-4 radius-br-lg">.radius-br-lg</div>
+<div class="bg-grey-light p-4 radius-bl-lg">.radius-bl-lg</div>
+@slot('code')
+<div class="radius-tl-lg"></div>
+<div class="radius-tr-lg"></div>
+<div class="radius-br-lg"></div>
+<div class="radius-bl-lg"></div>
 @endslot
 @endcomponent
 
 ## Responsive
 
-To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above.
+To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:radius-lg` to apply the `radius-lg` utility at only medium screen sizes and above.
 
 For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
 
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded"></div>
+  <div class="bg-grey w-12 h-12 radius-md"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded rounded-t"></div>
+  <div class="bg-grey w-12 h-12 radius-t-md"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded-lg rounded-b"></div>
+  <div class="bg-grey w-12 h-12 radius-b-lg"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded-none"></div>
+  <div class="bg-grey w-12 h-12 radius-none"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded rounded-r"></div>
+  <div class="bg-grey w-12 h-12 radius-r-md"></div>
 </div>
 @endslot
 @slot('code')
-<div class="none:rounded sm:rounded-t md:rounded-lg md:rounded-b lg:rounded-none xl:rounded xl:rounded-r ...">
+<div class="none:radius-md sm:radius-t-md md:radius-b-lg lg:radius-none xlradius-r-md ...">
   <!-- ... -->
 </div>
 @endslot
@@ -186,16 +366,14 @@ For more information about Tailwind's responsive design features, check out the
 
 By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
 
-If a `default` border radius is provided, it will be used for the non-suffixed `.rounded` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.rounded-2` utility.
-
-Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable.
+Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.radius-t`) aren't customizable.
 
 @component('_partials.customized-config', ['key' => 'borderRadius'])
-- default: '.25rem',
-+ default: '4px',
+  'none': '0',
 - 'sm': '.125rem',
+- 'md': '.25rem',
++ 'md': '4px',
 - 'lg': '.5rem',
 - 'full': '9999px',
 + 'large': '12px',
-  'none': '0',
 @endcomponent
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index 19dca9611951..f4f45c7bb817 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -18,22 +18,22 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
 <div class="flex items-start mt-8 text-sm leading-none">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">border</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
   </div>
   <div class="pl-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">0</code> 0px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">2</code> 2px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">4</code> 4px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">8</code> 8px</div>
   </div>
 </div>
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index e4ca285b7eb5..9c9008b9370d 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -12,7 +12,7 @@ To get you started, we've provided a generous palette of great looking colors th
 
 <div class="flex flex-wrap -mx-4">
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Grey</div>
         <div class="flex justify-between">
@@ -62,7 +62,7 @@ To get you started, we've provided a generous palette of great looking colors th
 
 <div class="flex flex-wrap -mx-4">
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Red</div>
         <div class="flex justify-between">
@@ -101,7 +101,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Orange</div>
         <div class="flex justify-between">
@@ -140,7 +140,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Yellow</div>
         <div class="flex justify-between">
@@ -179,7 +179,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Green</div>
         <div class="flex justify-between">
@@ -218,7 +218,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Teal</div>
         <div class="flex justify-between">
@@ -257,7 +257,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Blue</div>
         <div class="flex justify-between">
@@ -296,7 +296,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Indigo</div>
         <div class="flex justify-between">
@@ -335,7 +335,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Purple</div>
         <div class="flex justify-between">
@@ -374,7 +374,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="rounded overflow-hidden">
+    <div class="radius-md overflow-hidden">
       <div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Pink</div>
         <div class="flex justify-between">
diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md
index d35f4b55b12e..318ed80f086e 100644
--- a/docs/source/docs/examples/alerts.blade.md
+++ b/docs/source/docs/examples/alerts.blade.md
@@ -9,7 +9,7 @@ description: null
 ### Traditional
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
+<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 radius-md relative" role="alert">
   <strong class="font-bold">Holy smokes!</strong>
   <span class="block sm:inline">Something seriously bad happened.</span>
   <span class="absolute pin-t pin-b pin-r px-4 py-3">
@@ -31,10 +31,10 @@ description: null
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div role="alert">
-  <div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
+  <div class="bg-red text-white font-bold radius-t-md px-4 py-2">
     Danger
   </div>
-  <div class="border border-t-0 border-red-light rounded rounded-b bg-red-lightest px-4 py-3 text-red-dark">
+  <div class="border border-t-0 border-red-light radius-b-md bg-red-lightest px-4 py-3 text-red-dark">
     <p>Something not ideal might be happening.</p>
   </div>
 </div>
@@ -52,7 +52,7 @@ description: null
 ### Top Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
+<div class="bg-teal-lightest border-t-4 border-teal radius-b-md text-teal-darkest px-4 py-3 shadow-md" role="alert">
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md
index 1e42b1e96306..69633261e866 100644
--- a/docs/source/docs/examples/buttons.blade.md
+++ b/docs/source/docs/examples/buttons.blade.md
@@ -9,13 +9,13 @@ description: null
 ### Simple
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
@@ -26,7 +26,7 @@ description: null
 
 <style>
   .btn {
-    @apply&nbsp;.font-bold .py-2 .px-4 .rounded;
+    @apply&nbsp;.font-bold .py-2 .px-4 .radius-md;
   }
   .btn-blue {
     @apply&nbsp;.bg-blue .text-white;
@@ -41,7 +41,7 @@ description: null
 ### Pill
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-full">
   Button
 </button>
 @endcomponent
@@ -49,7 +49,7 @@ description: null
 ### Outline
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
+<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent radius-md">
   Button
 </button>
 @endcomponent
@@ -57,7 +57,7 @@ description: null
 ### Bordered
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker radius-md">
   Button
 </button>
 @endcomponent
@@ -65,7 +65,7 @@ description: null
 ### Disabled
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
+<button class="bg-blue text-white font-bold py-2 px-4 radius-md opacity-50 cursor-not-allowed">
   Button
 </button>
 @endcomponent
@@ -73,7 +73,7 @@ description: null
 ### 3D
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded">
+<button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue radius-md">
   Button
 </button>
 @endcomponent
@@ -81,28 +81,28 @@ description: null
 ### Elevated
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter rounded shadow">
+<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter radius-md shadow">
   Button
 </button>
 @endcomponent
 
-### Button Groups
+### Groups
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-l">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-l-md">
     Prev
   </button>
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-r">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-r-md">
     Next
   </button>
 </div>
 @endcomponent
 
-### w/Icon
+### Icons
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
+<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-md inline-flex items-center">
   <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
   <span>Download</span>
 </button>
diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md
index 27d6538ea026..6a059ad1832f 100644
--- a/docs/source/docs/examples/cards.blade.md
+++ b/docs/source/docs/examples/cards.blade.md
@@ -9,7 +9,7 @@ description: null
 ## Stacked
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
-<div class="max-w-sm rounded overflow-hidden shadow-lg">
+<div class="max-w-sm radius-md overflow-hidden shadow-lg">
   <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
   <div class="px-6 py-4">
     <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
@@ -18,9 +18,9 @@ description: null
     </p>
   </div>
   <div class="px-6 py-4">
-    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
-    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
-    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
+    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
+    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
+    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
   </div>
 </div>
 @endcomponent
@@ -29,9 +29,9 @@ description: null
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md w-full lg:flex">
-  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded rounded-t lg:rounded lg:rounded-l text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
+  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover radius-t-md lg:radius-t-none lg:radius-l-md text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
   </div>
-  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded rounded-b lg:rounded lg:rounded-r p-4 flex flex-col justify-between leading-normal">
+  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white radius-b-md lg:radius-b-none lg:radius-r-md p-4 flex flex-col justify-between leading-normal">
     <div class="mb-8">
       <p class="text-sm text-grey-dark flex items-center">
         <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -43,7 +43,7 @@ description: null
       <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
     </div>
     <div class="flex items-center">
-      <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
+      <img class="w-10 h-10 radius-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
       <div class="text-sm">
         <p class="text-black leading-none">Jonathan Reinink</p>
         <p class="text-grey-dark">Aug 18</p>
diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md
index 14598d3be8a0..64109a31341e 100644
--- a/docs/source/docs/examples/forms.blade.md
+++ b/docs/source/docs/examples/forms.blade.md
@@ -10,22 +10,22 @@ description: null
 
 @component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
 <div class="w-full max-w-xs">
-  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+  <form class="bg-white shadow-md radius-md px-8 pt-6 pb-8 mb-4">
     <div class="mb-4">
       <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
         Username
       </label>
-      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
+      <input class="shadow appearance-none border radius-md w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
     </div>
     <div class="mb-6">
       <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
         Password
       </label>
-      <input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
+      <input class="shadow appearance-none border border-red radius-md w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
       <p class="text-red text-xs italic">Please choose a password.</p>
     </div>
     <div class="flex items-center justify-between">
-      <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
+      <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md" type="button">
         Sign In
       </button>
       <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
@@ -50,7 +50,7 @@ description: null
       </label>
     </div>
     <div class="md:w-2/3">
-      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple radius-md w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
     </div>
   </div>
   <div class="md:flex md:items-center mb-6">
@@ -60,7 +60,7 @@ description: null
       </label>
     </div>
     <div class="md:w-2/3">
-      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple radius-md w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
     </div>
   </div>
   <div class="md:flex md:items-center mb-6">
@@ -75,7 +75,7 @@ description: null
   <div class="md:flex md:items-center">
     <div class="md:w-1/3"></div>
     <div class="md:w-2/3">
-      <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="button">
+      <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 radius-md" type="button">
         Sign Up
       </button>
     </div>
@@ -92,14 +92,14 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
         First Name
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red radius-md py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
       <p class="text-red text-xs italic">Please fill out this field.</p>
     </div>
     <div class="md:w-1/2 px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
         Last Name
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
     </div>
   </div>
   <div class="-mx-3 md:flex mb-6">
@@ -107,7 +107,7 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
         Password
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
       <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
     </div>
   </div>
@@ -116,14 +116,14 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
         City
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
     </div>
     <div class="md:w-1/2 px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
         State
       </label>
       <div class="relative">
-        <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
+        <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 radius-md" id="grid-state">
           <option>New Mexico</option>
           <option>Missouri</option>
           <option>Texas</option>
@@ -137,7 +137,7 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
         Zip
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-zip" type="text" placeholder="90210">
     </div>
   </div>
 </form>
@@ -149,10 +149,10 @@ description: null
 <form class="w-full max-w-sm">
   <div class="flex items-center border-b border-b-2 border-teal py-2">
     <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
-    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
+    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 radius-md" type="button">
       Sign Up
     </button>
-    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
+    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 radius-md" type="button">
       Cancel
     </button>
   </div>
diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md
index a68f0e56335a..afc6838fc17a 100644
--- a/docs/source/docs/examples/navigation.blade.md
+++ b/docs/source/docs/examples/navigation.blade.md
@@ -34,7 +34,7 @@ description: null
     <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
   </div>
   <div class="block lg:hidden">
-    <button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
+    <button class="flex items-center px-3 py-2 border radius-md text-teal-lighter border-teal-light hover:text-white hover:border-white">
       <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
     </button>
   </div>
@@ -51,7 +51,7 @@ description: null
       </a>
     </div>
     <div>
-      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
+      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border radius-md text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
     </div>
   </div>
 </nav>
@@ -62,7 +62,7 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex border-b">
   <li class="-mb-px mr-1">
-    <a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
+    <a class="bg-white inline-block border-l border-t border-r radius-t-md py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
   </li>
   <li class="mr-1">
     <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
@@ -81,10 +81,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex">
   <li class="mr-3">
-    <a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
+    <a class="inline-block border border-blue radius-md py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
   </li>
   <li class="mr-3">
-    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
+    <a class="inline-block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
   </li>
   <li class="mr-3">
     <a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
@@ -97,10 +97,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex">
   <li class="flex-1 mr-2">
-    <a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
+    <a class="text-center block border border-blue radius-md py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
   </li>
   <li class="flex-1 mr-2">
-    <a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
+    <a class="text-center block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
   </li>
   <li class="text-center flex-1">
     <a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
@@ -113,10 +113,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex justify-between">
   <li class="mr-3">
-    <a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
+    <a class="inline-block border border-blue radius-md py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
   </li>
   <li class="mr-3">
-    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
+    <a class="inline-block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
   </li>
   <li class="mr-3">
     <a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
diff --git a/docs/source/docs/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md
index ce261fafdec8..e51529ba901d 100644
--- a/docs/source/docs/extracting-components.blade.md
+++ b/docs/source/docs/extracting-components.blade.md
@@ -11,12 +11,12 @@ While we strongly believe you can get a lot further with just utilities than you
 For example, using a utility-first approach, implementing a button style early in a project might look something like this:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
 @slot('code')
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 @endslot
@@ -35,7 +35,7 @@ To make this as easy as possible, Tailwind provides the `@apply` directive for a
 Here's what a `.btn-blue` class might look like using `@apply` to compose it from existing utilities:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
@@ -46,7 +46,7 @@ Here's what a `.btn-blue` class might look like using `@apply` to compose it fro
 
 <style>
 .btn-blue {
-  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
+  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .radius-md;
 }
 .btn-blue:hover {
   @@apply .bg-blue-dark;
@@ -62,20 +62,20 @@ Note that `hover:`, `focus:`, and `{screen}:` utility variants can't be mixed in
 Say you have these two buttons:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md mr-4">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
   Button
 </button>
 
 @slot('code')
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
   Button
 </button>
 @endslot
@@ -85,14 +85,14 @@ It might be tempting to implement component classes for these buttons like this:
 
 ```less
 .btn-blue {
-  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
+  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .radius-md;
 }
 .btn-blue:hover {
   @@apply .bg-blue-dark;
 }
 
 .btn-grey {
-  @@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .rounded;
+  @@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .radius-md;
 }
 .btn-grey:hover {
   @@apply .bg-grey;
@@ -107,7 +107,7 @@ A better approach is to extract the parts that are the same into a separate clas
 
 ```less
 .btn {
-  @@apply .font-bold .py-2 .px-4 .rounded;
+  @@apply .font-bold .py-2 .px-4 .radius-md;
 }
 
 .btn-blue {
@@ -128,11 +128,11 @@ A better approach is to extract the parts that are the same into a separate clas
 Now you'd apply two classes any time you needed to style a button:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md mr-4">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
   Button
 </button>
 
@@ -152,7 +152,7 @@ This makes it easy to change the shared styles in one place by just editing the
 It also allows you to add new one-off button styles without being forced to create a new component class or duplicated the shared styles:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-green hover:bg-green-light text-white font-bold py-2 px-4 rounded">
+<button class="bg-green hover:bg-green-light text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
@@ -173,7 +173,7 @@ Here's an example:
 @@tailwind preflight;
 
 .btn {
-  @@apply .font-bold .py-2 .px-4 .rounded;
+  @@apply .font-bold .py-2 .px-4 .radius-md;
 }
 .btn-blue {
   @@apply .bg-blue .text-white;
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
index dd3911541b46..c69b8007ca75 100644
--- a/docs/source/docs/forms.blade.md
+++ b/docs/source/docs/forms.blade.md
@@ -41,7 +41,7 @@ Form controls are great candidates for component classes, but just for fun, here
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-block relative w-64">
-  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
+  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 radius-md shadow">
     <option>Really long option that will likely overlap the chevron</option>
     <option>Option 2</option>
     <option>Option 3</option>
diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index ce8cf68e8ea8..72f94a9eed06 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -29,8 +29,8 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and
 /**
  * Use this directive to control where Tailwind injects the responsive
  * variations of each utility.
- * 
- * If omitted, Tailwind will append these classes to the very end of 
+ *
+ * If omitted, Tailwind will append these classes to the very end of
  * your stylesheet by default.
  */
  @@tailwind screens;
@@ -44,7 +44,7 @@ This is extremely useful when you find a common utility pattern in your HTML tha
 
 ```less
 .btn {
-  @@apply .font-bold .py-2 .px-4 .rounded;
+  @@apply .font-bold .py-2 .px-4 .radius-md;
 }
 .btn-blue {
   @@apply .bg-blue .text-white;
diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md
index 7d56f5393f50..f569a4a80e84 100644
--- a/docs/source/docs/installation.blade.md
+++ b/docs/source/docs/installation.blade.md
@@ -32,7 +32,7 @@ For most projects (and to take advantage of Tailwind's customization features),
 
 Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
 
-<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
+<div class="radius-md bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
   <div class="text-smoke-darker"># Using npm</div>
   <div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
   <div class="text-smoke-darker mt-6"># Using Yarn</div>
@@ -45,7 +45,7 @@ Tailwind is configured almost entirely in plain JavaScript. To do this you'll ne
 
 We've provided a CLI utility to do this easily:
 
-<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
+<div class="radius-md bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
   <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
 </div>
 
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
index 780831ccce77..531586c21901 100644
--- a/docs/source/docs/opacity.blade.md
+++ b/docs/source/docs/opacity.blade.md
@@ -72,27 +72,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 radius-full inline-block"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 radius-full inline-block"></div>
 </div>
 @endslot
 @slot('md')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 radius-full inline-block"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 radius-full inline-block"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 radius-full inline-block"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index d8784c09fefd..d014eed8b5da 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -202,14 +202,14 @@ Use `.fixed` to position an element relative to the browser window.
 Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children.
 
 @component('_partials.code-sample')
-<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
-  <div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
+<div class="radius-b-md overflow-hidden max-w-md mx-auto mt-4 mb-4">
+  <div class="radius-t-md border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
     <div class="mr-6">
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
+      <span class="inline-block radius-full bg-smoke-dark h-3 w-3 mr-1"></span>
+      <span class="inline-block radius-full bg-smoke-dark h-3 w-3 mr-1"></span>
+      <span class="inline-block radius-full bg-smoke-dark h-3 w-3"></span>
     </div>
-    <div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
+    <div class="flex-1 bg-white border border-smoke radius-md mr-4"></div>
   </div>
   <div class="relative bg-smoke h-64">
 
@@ -260,17 +260,17 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
 <div class="flex items-start mt-8 text-sm leading-none mb-8">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pin</code></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">pin</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Edge</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Top and Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Left and Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">y</code> Top and Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">x</code> Left and Right</div>
   </div>
 </div>
 
diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md
index db2258d36293..14bae7cae14f 100644
--- a/docs/source/docs/responsive-design.blade.md
+++ b/docs/source/docs/responsive-design.blade.md
@@ -13,27 +13,27 @@ This is done using predefined screen sizes (media query breakpoints), each of wh
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-purple text-white w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-green text-white w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-blue text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-red text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-orange text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
index e5a492c83f2c..5a18e37d504e 100644
--- a/docs/source/docs/shadows.blade.md
+++ b/docs/source/docs/shadows.blade.md
@@ -103,27 +103,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index 57029cad5ef8..cbfce6f4781b 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -18,30 +18,30 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
 <div class="flex items-start mt-8 text-sm">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">p</code> Padding</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">m</code> Margin</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">-m</code> Negative Margin</div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">x</code> Horizontal</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">y</code> Vertical</div>
   </div>
   <div class="pl-12 border-l">
     <div class="mb-3 text-slate uppercase">Space</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
-    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">px</code> 1px</div>
-    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">0</code> 0</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">1</code> 0.25rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">2</code> 0.5rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">3</code> 0.75rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">4</code> 1rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">6</code> 1.5rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">8</code> 2rem</div>
+    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border radius-md">px</code> 1px</div>
+    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border radius-md">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
   </div>
 </div>
diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md
index 2be6db5d8e7f..cbf8f8a75da9 100644
--- a/docs/source/docs/text-color.blade.md
+++ b/docs/source/docs/text-color.blade.md
@@ -37,7 +37,7 @@ features:
 In addition to the standard responsive variations, text colors also come in `hover:` variations that apply the given text color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
-<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
+<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold radius-md">
   Button
 </button>
 @endcomponent
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
index ffa2180ce0cd..161d9f05dab6 100644
--- a/docs/source/docs/visibility.blade.md
+++ b/docs/source/docs/visibility.blade.md
@@ -43,7 +43,7 @@ features:
 Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+<div class="visible bg-smoke w-24 h-24 radius-full"></div>
 @endcomponent
 
 ### Invisible
@@ -51,7 +51,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
 Use `.invisible` to hide an element, but still maintain its space.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+<div class="invisible bg-smoke w-24 h-24 radius-full"></div>
 @endcomponent
 
 ## Responsive
@@ -63,27 +63,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="invisible bg-smoke w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="invisible bg-smoke w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md
index 97b582be6f41..626985bbe8f4 100644
--- a/docs/source/docs/what-is-tailwind.blade.md
+++ b/docs/source/docs/what-is-tailwind.blade.md
@@ -29,31 +29,31 @@ Instead, Tailwind provides highly composable, low-level *utility classes* that m
 Here's an example of a contact card component built with Tailwind without writing a single line of CSS:
 
 @component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
-<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+<div class="bg-white mx-auto max-w-sm shadow-lg radius-lg overflow-hidden">
   <div class="sm:flex sm:items-center px-6 py-4">
-    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <img class="block h-16 sm:h-24 radius-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="text-xl leading-tight">Adam Wathan</p>
         <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
       </div>
       <div>
-        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+        <button class="text-xs font-semibold radius-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
       </div>
     </div>
   </div>
 </div>
 @slot('code')
-<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+<div class="bg-white mx-auto max-w-sm shadow-lg radius-lg overflow-hidden">
   <div class="sm:flex sm:items-center px-6 py-4">
-    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <img class="block h-16 sm:h-24 radius-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="text-xl leading-tight">Adam Wathan</p>
         <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
       </div>
       <div>
-        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+        <button class="text-xs font-semibold radius-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
       </div>
     </div>
   </div>
@@ -68,13 +68,13 @@ While you can do a *lot* with just utility classes, sometimes a component class
 Tailwind provides tools for [extracting component classes](/docs/extracting-components) from repeated utility patterns, making it easy to update multiple instances of a component from one place:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
   Button
 </button>
 
@@ -85,7 +85,7 @@ Tailwind provides tools for [extracting component classes](/docs/extracting-comp
 
 <style>
   .btn {
-    @apply&nbsp;.font-bold .py-2 .px-4 .rounded;
+    @apply&nbsp;.font-bold .py-2 .px-4 .radius-md;
   }
   .btn-blue {
     @apply&nbsp;.bg-blue .text-white;
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
index ecd597535eae..e4dc6f075afb 100644
--- a/docs/source/index.blade.php
+++ b/docs/source/index.blade.php
@@ -23,8 +23,8 @@
       </div>
       <h2 class="mt-12 font-light text-3xl sm:text-4xl text-center">A Utility-First CSS Framework<br class="hidden sm:inline-block"> for Rapid UI Development</h2>
       <div class="mt-12 sm:flex sm:justify-center">
-        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
-        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs radius-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs radius-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
       </div>
     </div>
   </div>
@@ -38,7 +38,7 @@
     <div class="pb-4 flex justify-center flex-wrap max-w-md xl:max-w-full border-b-2 border-grey-light">
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
+          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/adamwathan" class="block hover:underline text-dark text-lg text-medium">Adam Wathan</a>
             <a href="https://twitter.com/adamwathan" class="block hover:underline text-tailwind-teal-dark text-sm">@adamwathan</a>
@@ -47,7 +47,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
+          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/reinink" class="block hover:underline text-dark text-lg text-medium">Jonathan Reinink</a>
             <a href="https://twitter.com/reinink" class="block hover:underline text-tailwind-teal-dark text-sm">@reinink</a>
@@ -56,7 +56,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
+          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
           <div class="pl-4">
             <a href="https://twitter.com/davidhemphill" class="block hover:underline text-dark text-lg text-medium">David Hemphill</a>
             <a href="https://twitter.com/davidhemphill" class="block hover:underline text-tailwind-teal-dark text-sm">@davidhemphill</a>
@@ -65,7 +65,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
+          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/steveschoger" class="block hover:underline text-dark text-lg text-medium">Steve Schoger</a>
             <a href="https://twitter.com/steveschoger" class="block hover:underline text-tailwind-teal-dark text-sm">@steveschoger</a>

From d3817c7071fe62b79d5c07279410409a415bdb83 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 Nov 2017 16:52:58 -0500
Subject: [PATCH 7/9] Tweak order of border radius corner utilities

---
 __tests__/fixtures/tailwind-output.css | 200 ++++++++++++-------------
 src/generators/rounded.js              |   6 +-
 2 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 01f8a8bfbe88..1eb50892d2a5 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2136,6 +2136,10 @@ button,
   border-bottom-left-radius: 0;
 }
 
+.radius-tl-none {
+  border-top-left-radius: 0;
+}
+
 .radius-tr-none {
   border-top-right-radius: 0;
 }
@@ -2148,10 +2152,6 @@ button,
   border-bottom-left-radius: 0;
 }
 
-.radius-tl-none {
-  border-top-left-radius: 0;
-}
-
 .radius-sm {
   border-radius: .125rem;
 }
@@ -2176,6 +2176,10 @@ button,
   border-bottom-left-radius: .125rem;
 }
 
+.radius-tl-sm {
+  border-top-left-radius: .125rem;
+}
+
 .radius-tr-sm {
   border-top-right-radius: .125rem;
 }
@@ -2188,10 +2192,6 @@ button,
   border-bottom-left-radius: .125rem;
 }
 
-.radius-tl-sm {
-  border-top-left-radius: .125rem;
-}
-
 .radius-md {
   border-radius: .25rem;
 }
@@ -2216,6 +2216,10 @@ button,
   border-bottom-left-radius: .25rem;
 }
 
+.radius-tl-md {
+  border-top-left-radius: .25rem;
+}
+
 .radius-tr-md {
   border-top-right-radius: .25rem;
 }
@@ -2228,10 +2232,6 @@ button,
   border-bottom-left-radius: .25rem;
 }
 
-.radius-tl-md {
-  border-top-left-radius: .25rem;
-}
-
 .radius-lg {
   border-radius: .5rem;
 }
@@ -2256,6 +2256,10 @@ button,
   border-bottom-left-radius: .5rem;
 }
 
+.radius-tl-lg {
+  border-top-left-radius: .5rem;
+}
+
 .radius-tr-lg {
   border-top-right-radius: .5rem;
 }
@@ -2268,10 +2272,6 @@ button,
   border-bottom-left-radius: .5rem;
 }
 
-.radius-tl-lg {
-  border-top-left-radius: .5rem;
-}
-
 .radius-full {
   border-radius: 9999px;
 }
@@ -2296,6 +2296,10 @@ button,
   border-bottom-left-radius: 9999px;
 }
 
+.radius-tl-full {
+  border-top-left-radius: 9999px;
+}
+
 .radius-tr-full {
   border-top-right-radius: 9999px;
 }
@@ -2308,10 +2312,6 @@ button,
   border-bottom-left-radius: 9999px;
 }
 
-.radius-tl-full {
-  border-top-left-radius: 9999px;
-}
-
 .block {
   display: block;
 }
@@ -5256,6 +5256,10 @@ button,
     border-bottom-left-radius: 0;
   }
 
+  .sm\:radius-tl-none {
+    border-top-left-radius: 0;
+  }
+
   .sm\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -5268,10 +5272,6 @@ button,
     border-bottom-left-radius: 0;
   }
 
-  .sm\:radius-tl-none {
-    border-top-left-radius: 0;
-  }
-
   .sm\:radius-sm {
     border-radius: .125rem;
   }
@@ -5296,6 +5296,10 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
+  .sm\:radius-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
   .sm\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -5308,10 +5312,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:radius-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
   .sm\:radius-md {
     border-radius: .25rem;
   }
@@ -5336,6 +5336,10 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
+  .sm\:radius-tl-md {
+    border-top-left-radius: .25rem;
+  }
+
   .sm\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -5348,10 +5352,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .sm\:radius-tl-md {
-    border-top-left-radius: .25rem;
-  }
-
   .sm\:radius-lg {
     border-radius: .5rem;
   }
@@ -5376,6 +5376,10 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
+  .sm\:radius-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
   .sm\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -5388,10 +5392,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .sm\:radius-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
   .sm\:radius-full {
     border-radius: 9999px;
   }
@@ -5416,6 +5416,10 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .sm\:radius-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
   .sm\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -5428,10 +5432,6 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
-  .sm\:radius-tl-full {
-    border-top-left-radius: 9999px;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -8377,6 +8377,10 @@ button,
     border-bottom-left-radius: 0;
   }
 
+  .md\:radius-tl-none {
+    border-top-left-radius: 0;
+  }
+
   .md\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -8389,10 +8393,6 @@ button,
     border-bottom-left-radius: 0;
   }
 
-  .md\:radius-tl-none {
-    border-top-left-radius: 0;
-  }
-
   .md\:radius-sm {
     border-radius: .125rem;
   }
@@ -8417,6 +8417,10 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
+  .md\:radius-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
   .md\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -8429,10 +8433,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:radius-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
   .md\:radius-md {
     border-radius: .25rem;
   }
@@ -8457,6 +8457,10 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
+  .md\:radius-tl-md {
+    border-top-left-radius: .25rem;
+  }
+
   .md\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -8469,10 +8473,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .md\:radius-tl-md {
-    border-top-left-radius: .25rem;
-  }
-
   .md\:radius-lg {
     border-radius: .5rem;
   }
@@ -8497,6 +8497,10 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
+  .md\:radius-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
   .md\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -8509,10 +8513,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .md\:radius-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
   .md\:radius-full {
     border-radius: 9999px;
   }
@@ -8537,6 +8537,10 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .md\:radius-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
   .md\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -8549,10 +8553,6 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
-  .md\:radius-tl-full {
-    border-top-left-radius: 9999px;
-  }
-
   .md\:block {
     display: block;
   }
@@ -11498,6 +11498,10 @@ button,
     border-bottom-left-radius: 0;
   }
 
+  .lg\:radius-tl-none {
+    border-top-left-radius: 0;
+  }
+
   .lg\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -11510,10 +11514,6 @@ button,
     border-bottom-left-radius: 0;
   }
 
-  .lg\:radius-tl-none {
-    border-top-left-radius: 0;
-  }
-
   .lg\:radius-sm {
     border-radius: .125rem;
   }
@@ -11538,6 +11538,10 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
+  .lg\:radius-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
   .lg\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -11550,10 +11554,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:radius-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
   .lg\:radius-md {
     border-radius: .25rem;
   }
@@ -11578,6 +11578,10 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
+  .lg\:radius-tl-md {
+    border-top-left-radius: .25rem;
+  }
+
   .lg\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -11590,10 +11594,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .lg\:radius-tl-md {
-    border-top-left-radius: .25rem;
-  }
-
   .lg\:radius-lg {
     border-radius: .5rem;
   }
@@ -11618,6 +11618,10 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
+  .lg\:radius-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
   .lg\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -11630,10 +11634,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .lg\:radius-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
   .lg\:radius-full {
     border-radius: 9999px;
   }
@@ -11658,6 +11658,10 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .lg\:radius-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
   .lg\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -11670,10 +11674,6 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
-  .lg\:radius-tl-full {
-    border-top-left-radius: 9999px;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -14619,6 +14619,10 @@ button,
     border-bottom-left-radius: 0;
   }
 
+  .xl\:radius-tl-none {
+    border-top-left-radius: 0;
+  }
+
   .xl\:radius-tr-none {
     border-top-right-radius: 0;
   }
@@ -14631,10 +14635,6 @@ button,
     border-bottom-left-radius: 0;
   }
 
-  .xl\:radius-tl-none {
-    border-top-left-radius: 0;
-  }
-
   .xl\:radius-sm {
     border-radius: .125rem;
   }
@@ -14659,6 +14659,10 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
+  .xl\:radius-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
   .xl\:radius-tr-sm {
     border-top-right-radius: .125rem;
   }
@@ -14671,10 +14675,6 @@ button,
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:radius-tl-sm {
-    border-top-left-radius: .125rem;
-  }
-
   .xl\:radius-md {
     border-radius: .25rem;
   }
@@ -14699,6 +14699,10 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
+  .xl\:radius-tl-md {
+    border-top-left-radius: .25rem;
+  }
+
   .xl\:radius-tr-md {
     border-top-right-radius: .25rem;
   }
@@ -14711,10 +14715,6 @@ button,
     border-bottom-left-radius: .25rem;
   }
 
-  .xl\:radius-tl-md {
-    border-top-left-radius: .25rem;
-  }
-
   .xl\:radius-lg {
     border-radius: .5rem;
   }
@@ -14739,6 +14739,10 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
+  .xl\:radius-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
   .xl\:radius-tr-lg {
     border-top-right-radius: .5rem;
   }
@@ -14751,10 +14755,6 @@ button,
     border-bottom-left-radius: .5rem;
   }
 
-  .xl\:radius-tl-lg {
-    border-top-left-radius: .5rem;
-  }
-
   .xl\:radius-full {
     border-radius: 9999px;
   }
@@ -14779,6 +14779,10 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
+  .xl\:radius-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
   .xl\:radius-tr-full {
     border-top-right-radius: 9999px;
   }
@@ -14791,10 +14795,6 @@ button,
     border-bottom-left-radius: 9999px;
   }
 
-  .xl\:radius-tl-full {
-    border-top-left-radius: 9999px;
-  }
-
   .xl\:block {
     display: block;
   }
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index ce360c0e9991..735bf36ad89b 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -22,6 +22,9 @@ function sizedBorder(radius, modifier) {
       'border-top-left-radius': `${radius}`,
       'border-bottom-left-radius': `${radius}`,
     },
+    [`radius-tl-${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+    },
     [`radius-tr-${modifier}`]: {
       'border-top-right-radius': `${radius}`,
     },
@@ -31,9 +34,6 @@ function sizedBorder(radius, modifier) {
     [`radius-bl-${modifier}`]: {
       'border-bottom-left-radius': `${radius}`,
     },
-    [`radius-tl-${modifier}`]: {
-      'border-top-left-radius': `${radius}`,
-    },
   })
 }
 

From ca70fe128ed798a6dc7771fab69de36cefa047af Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 13 Nov 2017 17:02:31 -0500
Subject: [PATCH 8/9] Fix mistake in border radius docs

---
 docs/source/docs/border-radius.blade.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index 560a8e5e05d1..56a88689cbb4 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -202,7 +202,7 @@ features:
       <tr>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 0;</td>
-       Remove any border radius from all corners of an element. <td class="p-2 border-t border-smoke-light text-sm text-grey-darker"></td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all corners of an element.</td>
       </tr>
       <tr>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-none</td>

From a94dcc5f785135131f582cc06a03a5cf660f5865 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 15 Nov 2017 09:13:51 -0500
Subject: [PATCH 9/9] =?UTF-8?q?Rename=20`radius`=20back=20to=20`rounded`?=
 =?UTF-8?q?=20=F0=9F=98=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/fixtures/tailwind-output.css        | 450 +++++++++---------
 defaultConfig.js                              |  11 +-
 .../js/components/ResponsiveCodeSample.vue    |   2 +-
 docs/source/_assets/less/markdown.less        |   4 +-
 docs/source/_layouts/documentation.blade.php  |   2 +-
 docs/source/_partials/code-sample.blade.php   |   2 +-
 .../_partials/customized-config.blade.php     |   2 +-
 .../source/_partials/feature-badges.blade.php |  32 +-
 .../work-in-progress-example.blade.php        |   2 +-
 .../_partials/work-in-progress.blade.php      |   2 +-
 docs/source/docs/border-color.blade.md        |   2 +-
 docs/source/docs/border-radius.blade.md       | 176 +++----
 docs/source/docs/border-width.blade.md        |  22 +-
 docs/source/docs/colors.blade.md              |  20 +-
 docs/source/docs/examples/alerts.blade.md     |   8 +-
 docs/source/docs/examples/buttons.blade.md    |  24 +-
 docs/source/docs/examples/cards.blade.md      |  14 +-
 docs/source/docs/examples/forms.blade.md      |  30 +-
 docs/source/docs/examples/navigation.blade.md |  18 +-
 .../docs/extracting-components.blade.md       |  30 +-
 docs/source/docs/forms.blade.md               |   2 +-
 .../docs/functions-and-directives.blade.md    |   2 +-
 docs/source/docs/installation.blade.md        |   4 +-
 docs/source/docs/opacity.blade.md             |  10 +-
 docs/source/docs/positioning.blade.md         |  28 +-
 docs/source/docs/responsive-design.blade.md   |  10 +-
 docs/source/docs/shadows.blade.md             |  10 +-
 docs/source/docs/spacing.blade.md             |  38 +-
 docs/source/docs/text-color.blade.md          |   2 +-
 docs/source/docs/visibility.blade.md          |  14 +-
 docs/source/docs/what-is-tailwind.blade.md    |  18 +-
 docs/source/index.blade.php                   |  12 +-
 src/generators/rounded.js                     |  20 +-
 33 files changed, 515 insertions(+), 508 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 1eb50892d2a5..0d3be57c4a4a 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2112,203 +2112,203 @@ button,
   border-style: none;
 }
 
-.radius-none {
+.rounded-none {
   border-radius: 0;
 }
 
-.radius-t-none {
+.rounded-t-none {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.radius-r-none {
+.rounded-r-none {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.radius-b-none {
+.rounded-b-none {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.radius-l-none {
+.rounded-l-none {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.radius-tl-none {
+.rounded-tl-none {
   border-top-left-radius: 0;
 }
 
-.radius-tr-none {
+.rounded-tr-none {
   border-top-right-radius: 0;
 }
 
-.radius-br-none {
+.rounded-br-none {
   border-bottom-right-radius: 0;
 }
 
-.radius-bl-none {
+.rounded-bl-none {
   border-bottom-left-radius: 0;
 }
 
-.radius-sm {
+.rounded-sm {
   border-radius: .125rem;
 }
 
-.radius-t-sm {
+.rounded-t-sm {
   border-top-left-radius: .125rem;
   border-top-right-radius: .125rem;
 }
 
-.radius-r-sm {
+.rounded-r-sm {
   border-top-right-radius: .125rem;
   border-bottom-right-radius: .125rem;
 }
 
-.radius-b-sm {
+.rounded-b-sm {
   border-bottom-right-radius: .125rem;
   border-bottom-left-radius: .125rem;
 }
 
-.radius-l-sm {
+.rounded-l-sm {
   border-top-left-radius: .125rem;
   border-bottom-left-radius: .125rem;
 }
 
-.radius-tl-sm {
+.rounded-tl-sm {
   border-top-left-radius: .125rem;
 }
 
-.radius-tr-sm {
+.rounded-tr-sm {
   border-top-right-radius: .125rem;
 }
 
-.radius-br-sm {
+.rounded-br-sm {
   border-bottom-right-radius: .125rem;
 }
 
-.radius-bl-sm {
+.rounded-bl-sm {
   border-bottom-left-radius: .125rem;
 }
 
-.radius-md {
+.rounded {
   border-radius: .25rem;
 }
 
-.radius-t-md {
+.rounded-t {
   border-top-left-radius: .25rem;
   border-top-right-radius: .25rem;
 }
 
-.radius-r-md {
+.rounded-r {
   border-top-right-radius: .25rem;
   border-bottom-right-radius: .25rem;
 }
 
-.radius-b-md {
+.rounded-b {
   border-bottom-right-radius: .25rem;
   border-bottom-left-radius: .25rem;
 }
 
-.radius-l-md {
+.rounded-l {
   border-top-left-radius: .25rem;
   border-bottom-left-radius: .25rem;
 }
 
-.radius-tl-md {
+.rounded-tl {
   border-top-left-radius: .25rem;
 }
 
-.radius-tr-md {
+.rounded-tr {
   border-top-right-radius: .25rem;
 }
 
-.radius-br-md {
+.rounded-br {
   border-bottom-right-radius: .25rem;
 }
 
-.radius-bl-md {
+.rounded-bl {
   border-bottom-left-radius: .25rem;
 }
 
-.radius-lg {
+.rounded-lg {
   border-radius: .5rem;
 }
 
-.radius-t-lg {
+.rounded-t-lg {
   border-top-left-radius: .5rem;
   border-top-right-radius: .5rem;
 }
 
-.radius-r-lg {
+.rounded-r-lg {
   border-top-right-radius: .5rem;
   border-bottom-right-radius: .5rem;
 }
 
-.radius-b-lg {
+.rounded-b-lg {
   border-bottom-right-radius: .5rem;
   border-bottom-left-radius: .5rem;
 }
 
-.radius-l-lg {
+.rounded-l-lg {
   border-top-left-radius: .5rem;
   border-bottom-left-radius: .5rem;
 }
 
-.radius-tl-lg {
+.rounded-tl-lg {
   border-top-left-radius: .5rem;
 }
 
-.radius-tr-lg {
+.rounded-tr-lg {
   border-top-right-radius: .5rem;
 }
 
-.radius-br-lg {
+.rounded-br-lg {
   border-bottom-right-radius: .5rem;
 }
 
-.radius-bl-lg {
+.rounded-bl-lg {
   border-bottom-left-radius: .5rem;
 }
 
-.radius-full {
+.rounded-full {
   border-radius: 9999px;
 }
 
-.radius-t-full {
+.rounded-t-full {
   border-top-left-radius: 9999px;
   border-top-right-radius: 9999px;
 }
 
-.radius-r-full {
+.rounded-r-full {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
 }
 
-.radius-b-full {
+.rounded-b-full {
   border-bottom-right-radius: 9999px;
   border-bottom-left-radius: 9999px;
 }
 
-.radius-l-full {
+.rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
 }
 
-.radius-tl-full {
+.rounded-tl-full {
   border-top-left-radius: 9999px;
 }
 
-.radius-tr-full {
+.rounded-tr-full {
   border-top-right-radius: 9999px;
 }
 
-.radius-br-full {
+.rounded-br-full {
   border-bottom-right-radius: 9999px;
 }
 
-.radius-bl-full {
+.rounded-bl-full {
   border-bottom-left-radius: 9999px;
 }
 
@@ -5232,203 +5232,203 @@ button,
     border-style: none;
   }
 
-  .sm\:radius-none {
+  .sm\:rounded-none {
     border-radius: 0;
   }
 
-  .sm\:radius-t-none {
+  .sm\:rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .sm\:radius-r-none {
+  .sm\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .sm\:radius-b-none {
+  .sm\:rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .sm\:radius-l-none {
+  .sm\:rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .sm\:radius-tl-none {
+  .sm\:rounded-tl-none {
     border-top-left-radius: 0;
   }
 
-  .sm\:radius-tr-none {
+  .sm\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .sm\:radius-br-none {
+  .sm\:rounded-br-none {
     border-bottom-right-radius: 0;
   }
 
-  .sm\:radius-bl-none {
+  .sm\:rounded-bl-none {
     border-bottom-left-radius: 0;
   }
 
-  .sm\:radius-sm {
+  .sm\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .sm\:radius-t-sm {
+  .sm\:rounded-t-sm {
     border-top-left-radius: .125rem;
     border-top-right-radius: .125rem;
   }
 
-  .sm\:radius-r-sm {
+  .sm\:rounded-r-sm {
     border-top-right-radius: .125rem;
     border-bottom-right-radius: .125rem;
   }
 
-  .sm\:radius-b-sm {
+  .sm\:rounded-b-sm {
     border-bottom-right-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:radius-l-sm {
+  .sm\:rounded-l-sm {
     border-top-left-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:radius-tl-sm {
+  .sm\:rounded-tl-sm {
     border-top-left-radius: .125rem;
   }
 
-  .sm\:radius-tr-sm {
+  .sm\:rounded-tr-sm {
     border-top-right-radius: .125rem;
   }
 
-  .sm\:radius-br-sm {
+  .sm\:rounded-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .sm\:radius-bl-sm {
+  .sm\:rounded-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .sm\:radius-md {
+  .sm\:rounded {
     border-radius: .25rem;
   }
 
-  .sm\:radius-t-md {
+  .sm\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
   }
 
-  .sm\:radius-r-md {
+  .sm\:rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
   }
 
-  .sm\:radius-b-md {
+  .sm\:rounded-b {
     border-bottom-right-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .sm\:radius-l-md {
+  .sm\:rounded-l {
     border-top-left-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .sm\:radius-tl-md {
+  .sm\:rounded-tl {
     border-top-left-radius: .25rem;
   }
 
-  .sm\:radius-tr-md {
+  .sm\:rounded-tr {
     border-top-right-radius: .25rem;
   }
 
-  .sm\:radius-br-md {
+  .sm\:rounded-br {
     border-bottom-right-radius: .25rem;
   }
 
-  .sm\:radius-bl-md {
+  .sm\:rounded-bl {
     border-bottom-left-radius: .25rem;
   }
 
-  .sm\:radius-lg {
+  .sm\:rounded-lg {
     border-radius: .5rem;
   }
 
-  .sm\:radius-t-lg {
+  .sm\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
   }
 
-  .sm\:radius-r-lg {
+  .sm\:rounded-r-lg {
     border-top-right-radius: .5rem;
     border-bottom-right-radius: .5rem;
   }
 
-  .sm\:radius-b-lg {
+  .sm\:rounded-b-lg {
     border-bottom-right-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .sm\:radius-l-lg {
+  .sm\:rounded-l-lg {
     border-top-left-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .sm\:radius-tl-lg {
+  .sm\:rounded-tl-lg {
     border-top-left-radius: .5rem;
   }
 
-  .sm\:radius-tr-lg {
+  .sm\:rounded-tr-lg {
     border-top-right-radius: .5rem;
   }
 
-  .sm\:radius-br-lg {
+  .sm\:rounded-br-lg {
     border-bottom-right-radius: .5rem;
   }
 
-  .sm\:radius-bl-lg {
+  .sm\:rounded-bl-lg {
     border-bottom-left-radius: .5rem;
   }
 
-  .sm\:radius-full {
+  .sm\:rounded-full {
     border-radius: 9999px;
   }
 
-  .sm\:radius-t-full {
+  .sm\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
   }
 
-  .sm\:radius-r-full {
+  .sm\:rounded-r-full {
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
   }
 
-  .sm\:radius-b-full {
+  .sm\:rounded-b-full {
     border-bottom-right-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .sm\:radius-l-full {
+  .sm\:rounded-l-full {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .sm\:radius-tl-full {
+  .sm\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
 
-  .sm\:radius-tr-full {
+  .sm\:rounded-tr-full {
     border-top-right-radius: 9999px;
   }
 
-  .sm\:radius-br-full {
+  .sm\:rounded-br-full {
     border-bottom-right-radius: 9999px;
   }
 
-  .sm\:radius-bl-full {
+  .sm\:rounded-bl-full {
     border-bottom-left-radius: 9999px;
   }
 
@@ -8353,203 +8353,203 @@ button,
     border-style: none;
   }
 
-  .md\:radius-none {
+  .md\:rounded-none {
     border-radius: 0;
   }
 
-  .md\:radius-t-none {
+  .md\:rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .md\:radius-r-none {
+  .md\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .md\:radius-b-none {
+  .md\:rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .md\:radius-l-none {
+  .md\:rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .md\:radius-tl-none {
+  .md\:rounded-tl-none {
     border-top-left-radius: 0;
   }
 
-  .md\:radius-tr-none {
+  .md\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .md\:radius-br-none {
+  .md\:rounded-br-none {
     border-bottom-right-radius: 0;
   }
 
-  .md\:radius-bl-none {
+  .md\:rounded-bl-none {
     border-bottom-left-radius: 0;
   }
 
-  .md\:radius-sm {
+  .md\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .md\:radius-t-sm {
+  .md\:rounded-t-sm {
     border-top-left-radius: .125rem;
     border-top-right-radius: .125rem;
   }
 
-  .md\:radius-r-sm {
+  .md\:rounded-r-sm {
     border-top-right-radius: .125rem;
     border-bottom-right-radius: .125rem;
   }
 
-  .md\:radius-b-sm {
+  .md\:rounded-b-sm {
     border-bottom-right-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:radius-l-sm {
+  .md\:rounded-l-sm {
     border-top-left-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:radius-tl-sm {
+  .md\:rounded-tl-sm {
     border-top-left-radius: .125rem;
   }
 
-  .md\:radius-tr-sm {
+  .md\:rounded-tr-sm {
     border-top-right-radius: .125rem;
   }
 
-  .md\:radius-br-sm {
+  .md\:rounded-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .md\:radius-bl-sm {
+  .md\:rounded-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .md\:radius-md {
+  .md\:rounded {
     border-radius: .25rem;
   }
 
-  .md\:radius-t-md {
+  .md\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
   }
 
-  .md\:radius-r-md {
+  .md\:rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
   }
 
-  .md\:radius-b-md {
+  .md\:rounded-b {
     border-bottom-right-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .md\:radius-l-md {
+  .md\:rounded-l {
     border-top-left-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .md\:radius-tl-md {
+  .md\:rounded-tl {
     border-top-left-radius: .25rem;
   }
 
-  .md\:radius-tr-md {
+  .md\:rounded-tr {
     border-top-right-radius: .25rem;
   }
 
-  .md\:radius-br-md {
+  .md\:rounded-br {
     border-bottom-right-radius: .25rem;
   }
 
-  .md\:radius-bl-md {
+  .md\:rounded-bl {
     border-bottom-left-radius: .25rem;
   }
 
-  .md\:radius-lg {
+  .md\:rounded-lg {
     border-radius: .5rem;
   }
 
-  .md\:radius-t-lg {
+  .md\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
   }
 
-  .md\:radius-r-lg {
+  .md\:rounded-r-lg {
     border-top-right-radius: .5rem;
     border-bottom-right-radius: .5rem;
   }
 
-  .md\:radius-b-lg {
+  .md\:rounded-b-lg {
     border-bottom-right-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .md\:radius-l-lg {
+  .md\:rounded-l-lg {
     border-top-left-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .md\:radius-tl-lg {
+  .md\:rounded-tl-lg {
     border-top-left-radius: .5rem;
   }
 
-  .md\:radius-tr-lg {
+  .md\:rounded-tr-lg {
     border-top-right-radius: .5rem;
   }
 
-  .md\:radius-br-lg {
+  .md\:rounded-br-lg {
     border-bottom-right-radius: .5rem;
   }
 
-  .md\:radius-bl-lg {
+  .md\:rounded-bl-lg {
     border-bottom-left-radius: .5rem;
   }
 
-  .md\:radius-full {
+  .md\:rounded-full {
     border-radius: 9999px;
   }
 
-  .md\:radius-t-full {
+  .md\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
   }
 
-  .md\:radius-r-full {
+  .md\:rounded-r-full {
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
   }
 
-  .md\:radius-b-full {
+  .md\:rounded-b-full {
     border-bottom-right-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .md\:radius-l-full {
+  .md\:rounded-l-full {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .md\:radius-tl-full {
+  .md\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
 
-  .md\:radius-tr-full {
+  .md\:rounded-tr-full {
     border-top-right-radius: 9999px;
   }
 
-  .md\:radius-br-full {
+  .md\:rounded-br-full {
     border-bottom-right-radius: 9999px;
   }
 
-  .md\:radius-bl-full {
+  .md\:rounded-bl-full {
     border-bottom-left-radius: 9999px;
   }
 
@@ -11474,203 +11474,203 @@ button,
     border-style: none;
   }
 
-  .lg\:radius-none {
+  .lg\:rounded-none {
     border-radius: 0;
   }
 
-  .lg\:radius-t-none {
+  .lg\:rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .lg\:radius-r-none {
+  .lg\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .lg\:radius-b-none {
+  .lg\:rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .lg\:radius-l-none {
+  .lg\:rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .lg\:radius-tl-none {
+  .lg\:rounded-tl-none {
     border-top-left-radius: 0;
   }
 
-  .lg\:radius-tr-none {
+  .lg\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .lg\:radius-br-none {
+  .lg\:rounded-br-none {
     border-bottom-right-radius: 0;
   }
 
-  .lg\:radius-bl-none {
+  .lg\:rounded-bl-none {
     border-bottom-left-radius: 0;
   }
 
-  .lg\:radius-sm {
+  .lg\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .lg\:radius-t-sm {
+  .lg\:rounded-t-sm {
     border-top-left-radius: .125rem;
     border-top-right-radius: .125rem;
   }
 
-  .lg\:radius-r-sm {
+  .lg\:rounded-r-sm {
     border-top-right-radius: .125rem;
     border-bottom-right-radius: .125rem;
   }
 
-  .lg\:radius-b-sm {
+  .lg\:rounded-b-sm {
     border-bottom-right-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:radius-l-sm {
+  .lg\:rounded-l-sm {
     border-top-left-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:radius-tl-sm {
+  .lg\:rounded-tl-sm {
     border-top-left-radius: .125rem;
   }
 
-  .lg\:radius-tr-sm {
+  .lg\:rounded-tr-sm {
     border-top-right-radius: .125rem;
   }
 
-  .lg\:radius-br-sm {
+  .lg\:rounded-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .lg\:radius-bl-sm {
+  .lg\:rounded-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .lg\:radius-md {
+  .lg\:rounded {
     border-radius: .25rem;
   }
 
-  .lg\:radius-t-md {
+  .lg\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
   }
 
-  .lg\:radius-r-md {
+  .lg\:rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
   }
 
-  .lg\:radius-b-md {
+  .lg\:rounded-b {
     border-bottom-right-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .lg\:radius-l-md {
+  .lg\:rounded-l {
     border-top-left-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .lg\:radius-tl-md {
+  .lg\:rounded-tl {
     border-top-left-radius: .25rem;
   }
 
-  .lg\:radius-tr-md {
+  .lg\:rounded-tr {
     border-top-right-radius: .25rem;
   }
 
-  .lg\:radius-br-md {
+  .lg\:rounded-br {
     border-bottom-right-radius: .25rem;
   }
 
-  .lg\:radius-bl-md {
+  .lg\:rounded-bl {
     border-bottom-left-radius: .25rem;
   }
 
-  .lg\:radius-lg {
+  .lg\:rounded-lg {
     border-radius: .5rem;
   }
 
-  .lg\:radius-t-lg {
+  .lg\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
   }
 
-  .lg\:radius-r-lg {
+  .lg\:rounded-r-lg {
     border-top-right-radius: .5rem;
     border-bottom-right-radius: .5rem;
   }
 
-  .lg\:radius-b-lg {
+  .lg\:rounded-b-lg {
     border-bottom-right-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .lg\:radius-l-lg {
+  .lg\:rounded-l-lg {
     border-top-left-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .lg\:radius-tl-lg {
+  .lg\:rounded-tl-lg {
     border-top-left-radius: .5rem;
   }
 
-  .lg\:radius-tr-lg {
+  .lg\:rounded-tr-lg {
     border-top-right-radius: .5rem;
   }
 
-  .lg\:radius-br-lg {
+  .lg\:rounded-br-lg {
     border-bottom-right-radius: .5rem;
   }
 
-  .lg\:radius-bl-lg {
+  .lg\:rounded-bl-lg {
     border-bottom-left-radius: .5rem;
   }
 
-  .lg\:radius-full {
+  .lg\:rounded-full {
     border-radius: 9999px;
   }
 
-  .lg\:radius-t-full {
+  .lg\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
   }
 
-  .lg\:radius-r-full {
+  .lg\:rounded-r-full {
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
   }
 
-  .lg\:radius-b-full {
+  .lg\:rounded-b-full {
     border-bottom-right-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .lg\:radius-l-full {
+  .lg\:rounded-l-full {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .lg\:radius-tl-full {
+  .lg\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
 
-  .lg\:radius-tr-full {
+  .lg\:rounded-tr-full {
     border-top-right-radius: 9999px;
   }
 
-  .lg\:radius-br-full {
+  .lg\:rounded-br-full {
     border-bottom-right-radius: 9999px;
   }
 
-  .lg\:radius-bl-full {
+  .lg\:rounded-bl-full {
     border-bottom-left-radius: 9999px;
   }
 
@@ -14595,203 +14595,203 @@ button,
     border-style: none;
   }
 
-  .xl\:radius-none {
+  .xl\:rounded-none {
     border-radius: 0;
   }
 
-  .xl\:radius-t-none {
+  .xl\:rounded-t-none {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .xl\:radius-r-none {
+  .xl\:rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .xl\:radius-b-none {
+  .xl\:rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .xl\:radius-l-none {
+  .xl\:rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .xl\:radius-tl-none {
+  .xl\:rounded-tl-none {
     border-top-left-radius: 0;
   }
 
-  .xl\:radius-tr-none {
+  .xl\:rounded-tr-none {
     border-top-right-radius: 0;
   }
 
-  .xl\:radius-br-none {
+  .xl\:rounded-br-none {
     border-bottom-right-radius: 0;
   }
 
-  .xl\:radius-bl-none {
+  .xl\:rounded-bl-none {
     border-bottom-left-radius: 0;
   }
 
-  .xl\:radius-sm {
+  .xl\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .xl\:radius-t-sm {
+  .xl\:rounded-t-sm {
     border-top-left-radius: .125rem;
     border-top-right-radius: .125rem;
   }
 
-  .xl\:radius-r-sm {
+  .xl\:rounded-r-sm {
     border-top-right-radius: .125rem;
     border-bottom-right-radius: .125rem;
   }
 
-  .xl\:radius-b-sm {
+  .xl\:rounded-b-sm {
     border-bottom-right-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:radius-l-sm {
+  .xl\:rounded-l-sm {
     border-top-left-radius: .125rem;
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:radius-tl-sm {
+  .xl\:rounded-tl-sm {
     border-top-left-radius: .125rem;
   }
 
-  .xl\:radius-tr-sm {
+  .xl\:rounded-tr-sm {
     border-top-right-radius: .125rem;
   }
 
-  .xl\:radius-br-sm {
+  .xl\:rounded-br-sm {
     border-bottom-right-radius: .125rem;
   }
 
-  .xl\:radius-bl-sm {
+  .xl\:rounded-bl-sm {
     border-bottom-left-radius: .125rem;
   }
 
-  .xl\:radius-md {
+  .xl\:rounded {
     border-radius: .25rem;
   }
 
-  .xl\:radius-t-md {
+  .xl\:rounded-t {
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
   }
 
-  .xl\:radius-r-md {
+  .xl\:rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
   }
 
-  .xl\:radius-b-md {
+  .xl\:rounded-b {
     border-bottom-right-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .xl\:radius-l-md {
+  .xl\:rounded-l {
     border-top-left-radius: .25rem;
     border-bottom-left-radius: .25rem;
   }
 
-  .xl\:radius-tl-md {
+  .xl\:rounded-tl {
     border-top-left-radius: .25rem;
   }
 
-  .xl\:radius-tr-md {
+  .xl\:rounded-tr {
     border-top-right-radius: .25rem;
   }
 
-  .xl\:radius-br-md {
+  .xl\:rounded-br {
     border-bottom-right-radius: .25rem;
   }
 
-  .xl\:radius-bl-md {
+  .xl\:rounded-bl {
     border-bottom-left-radius: .25rem;
   }
 
-  .xl\:radius-lg {
+  .xl\:rounded-lg {
     border-radius: .5rem;
   }
 
-  .xl\:radius-t-lg {
+  .xl\:rounded-t-lg {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
   }
 
-  .xl\:radius-r-lg {
+  .xl\:rounded-r-lg {
     border-top-right-radius: .5rem;
     border-bottom-right-radius: .5rem;
   }
 
-  .xl\:radius-b-lg {
+  .xl\:rounded-b-lg {
     border-bottom-right-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .xl\:radius-l-lg {
+  .xl\:rounded-l-lg {
     border-top-left-radius: .5rem;
     border-bottom-left-radius: .5rem;
   }
 
-  .xl\:radius-tl-lg {
+  .xl\:rounded-tl-lg {
     border-top-left-radius: .5rem;
   }
 
-  .xl\:radius-tr-lg {
+  .xl\:rounded-tr-lg {
     border-top-right-radius: .5rem;
   }
 
-  .xl\:radius-br-lg {
+  .xl\:rounded-br-lg {
     border-bottom-right-radius: .5rem;
   }
 
-  .xl\:radius-bl-lg {
+  .xl\:rounded-bl-lg {
     border-bottom-left-radius: .5rem;
   }
 
-  .xl\:radius-full {
+  .xl\:rounded-full {
     border-radius: 9999px;
   }
 
-  .xl\:radius-t-full {
+  .xl\:rounded-t-full {
     border-top-left-radius: 9999px;
     border-top-right-radius: 9999px;
   }
 
-  .xl\:radius-r-full {
+  .xl\:rounded-r-full {
     border-top-right-radius: 9999px;
     border-bottom-right-radius: 9999px;
   }
 
-  .xl\:radius-b-full {
+  .xl\:rounded-b-full {
     border-bottom-right-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .xl\:radius-l-full {
+  .xl\:rounded-l-full {
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
   }
 
-  .xl\:radius-tl-full {
+  .xl\:rounded-tl-full {
     border-top-left-radius: 9999px;
   }
 
-  .xl\:radius-tr-full {
+  .xl\:rounded-tr-full {
     border-top-right-radius: 9999px;
   }
 
-  .xl\:radius-br-full {
+  .xl\:rounded-br-full {
     border-bottom-right-radius: 9999px;
   }
 
-  .xl\:radius-bl-full {
+  .xl\:rounded-bl-full {
     border-bottom-left-radius: 9999px;
   }
 
diff --git a/defaultConfig.js b/defaultConfig.js
index baf82df42bfa..dbb001fe7c20 100644
--- a/defaultConfig.js
+++ b/defaultConfig.js
@@ -406,16 +406,21 @@ module.exports = {
   | Border radius                    https://tailwindcss.com/docs/border-radius
   |-----------------------------------------------------------------------------
   |
-  | Here is where you define your border radius values.
+  | Here is where you define your border radius values. If a `default` radius
+  | is provided, it will be made available as the non-suffixed `.rounded`
+  | utility.
   |
-  | Class name: .radius{-side?}-{size}
+  | If your scale includes a `0` value to reset already rounded corners, it's
+  | a good idea to put it first so other values are able to override it.
+  |
+  | Class name: .rounded{-side?}{-size?}
   |
   */
 
   borderRadius: {
     'none': '0',
     'sm': '.125rem',
-    'md': '.25rem',
+    default: '.25rem',
     'lg': '.5rem',
     'full': '9999px',
   },
diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
index c11a7655a7d5..408d694a6c25 100644
--- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue
+++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
@@ -22,7 +22,7 @@
         <p class="text-xs">xl</p>
       </span>
     </div>
-    <div class="radius-md overflow-hidden border-2 border-smoke mb-8">
+    <div class="rounded overflow-hidden border-2 border-smoke mb-8">
       <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
         <div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
       </div>
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index b76bedf42b6d..9081c6798497 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -31,7 +31,7 @@
   > p code, p& code& {
     @apply .inline-block;
     @apply .bg-smoke-lighter;
-    @apply .radius-sm;
+    @apply .rounded-sm;
     @apply .text-sm;
     @apply .p-1;
     @apply .leading-none;
@@ -46,7 +46,7 @@
     @apply .font-mono;
     @apply .border-2;
     @apply .border-smoke;
-    @apply .radius-md;
+    @apply .rounded;
     font-weight: 400;
   }
 
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 48268c15349d..f2e1f1f88bf7 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -24,7 +24,7 @@
         </p>
       </div>
       <div class="relative">
-        <input id="docsearch" class="placeholder-grey-dark radius-md bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
+        <input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
         <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
           <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
         </div>
diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php
index cde8dd68ed18..3c5925c0b8be 100644
--- a/docs/source/_partials/code-sample.blade.php
+++ b/docs/source/_partials/code-sample.blade.php
@@ -1,4 +1,4 @@
-<div class="radius-md overflow-hidden border-2 border-grey-light mb-8 bg-white">
+<div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
   <div class="border-b-2 border-grey-light p-4 {{ $class ?? '' }}">
     {{ $slot }}
   </div>
diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php
index 159e08e726be..f69383f2acd7 100644
--- a/docs/source/_partials/customized-config.blade.php
+++ b/docs/source/_partials/customized-config.blade.php
@@ -1,4 +1,4 @@
-<div class="border-2 border-smoke radius-md mb-8">
+<div class="border-2 border-smoke rounded mb-8">
   <div class="bg-smoke-lighter p-4 font-mono text-sm">
     <div class="whitespace-pre text-grey-dark">{</div>
     <div class="whitespace-pre text-grey-light">  // ...</div>
diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php
index 50e7aef41e90..4f2be45b5f24 100644
--- a/docs/source/_partials/feature-badges.blade.php
+++ b/docs/source/_partials/feature-badges.blade.php
@@ -1,15 +1,15 @@
 <div class="mb-6">
   <div class="flex flex-wrap -mb-2">
     @if ($responsive)
-    <a href="#responsive" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex radius-full bg-green-light text-white mr-1">
+    <a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Responsive</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex radius-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Responsive</span>
@@ -17,15 +17,15 @@
     @endif
 
     @if ($customizable)
-    <a href="#customizing" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex radius-full bg-green-light text-white mr-1">
+    <a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Customizable</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex radius-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Customizable</span>
@@ -33,15 +33,15 @@
     @endif
 
     @if ($hover)
-    <a href="#hover" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex radius-full bg-green-light text-white mr-1">
+    <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Hover</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex radius-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Hover</span>
@@ -49,15 +49,15 @@
     @endif
 
     @if ($focus)
-    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex radius-full bg-green-light text-white mr-1">
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Focus</span>
     </span>
     @else
-    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex radius-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Focus</span>
diff --git a/docs/source/_partials/work-in-progress-example.blade.php b/docs/source/_partials/work-in-progress-example.blade.php
index dc95d2093641..be08a866d65e 100644
--- a/docs/source/_partials/work-in-progress-example.blade.php
+++ b/docs/source/_partials/work-in-progress-example.blade.php
@@ -1,5 +1,5 @@
 <div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
     <div class="flex">
       <div class="py-1">
         <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
diff --git a/docs/source/_partials/work-in-progress.blade.php b/docs/source/_partials/work-in-progress.blade.php
index 47cd42cbb94d..16a349c7023f 100644
--- a/docs/source/_partials/work-in-progress.blade.php
+++ b/docs/source/_partials/work-in-progress.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3 mb-4">
+<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3 mb-4">
   <div class="flex">
     <div class="py-1">
       <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
index f0c2b7247bd2..a55a18f57423 100644
--- a/docs/source/docs/border-color.blade.md
+++ b/docs/source/docs/border-color.blade.md
@@ -37,7 +37,7 @@ features:
 In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
-<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold radius-md">
+<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
   Button
 </button>
 @endcomponent
diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index 56a88689cbb4..b18af47d6eec 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -20,227 +20,227 @@ features:
     </thead>
     <tbody class="align-baseline">
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-top-right-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;<br>border-bottom-right-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-sm</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .125rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-top-right-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;<br>border-bottom-right-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .25rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-top-right-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;<br>border-bottom-right-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-lg</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-top-right-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;<br>border-bottom-right-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-full</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-t-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-top-right-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-r-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;<br>border-bottom-right-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-b-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;<br>border-bottom-left-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-l-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-bottom-left-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-tr-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-br-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.radius-bl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-none</td>
         <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 0;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom left corner of an element.</td>
       </tr>
@@ -250,113 +250,113 @@ features:
 
 ## Rounded corners
 
-Use the `.radius-sm`, `.radius-md`, or `.radius-lg` utilities to apply different border radius sizes to an element.
+Use the `.rounded-sm`, `.rounded`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 radius-sm">.radius-sm</div>
-<div class="bg-grey-light mr-3 p-4 radius-md">.radius-md</div>
-<div class="bg-grey-light p-4 radius-lg">.radius-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-sm">.rounded-sm</div>
+<div class="bg-grey-light mr-3 p-4 rounded">.rounded</div>
+<div class="bg-grey-light p-4 rounded-lg">.rounded-lg</div>
 @slot('code')
-<div class="radius-sm"></div>
-<div class="radius-md"></div>
-<div class="radius-lg"></div>
+<div class="rounded-sm"></div>
+<div class="rounded"></div>
+<div class="rounded-lg"></div>
 @endslot
 @endcomponent
 
 ## Pills and circles
 
-Use the `.radius-full` utility to create pills and circles.
+Use the `.rounded-full` utility to create pills and circles.
 
 @component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm'])
-<div class="bg-grey-light mr-3 py-2 px-4 radius-full">Pill shape</div>
-<div class="bg-grey-light h-16 w-16 radius-full flex items-center justify-center">Circle</div>
+<div class="bg-grey-light mr-3 py-2 px-4 rounded-full">Pill shape</div>
+<div class="bg-grey-light h-16 w-16 rounded-full flex items-center justify-center">Circle</div>
 @slot('code')
-<div class="radius-full py-2 px-4">Pill shape</div>
-<div class="radius-full h-16 w-16 flex items-center justify-center">Circle</div>
+<div class="rounded-full py-2 px-4">Pill shape</div>
+<div class="rounded-full h-16 w-16 flex items-center justify-center">Circle</div>
 @endslot
 @endcomponent
 
 ## No rounding
 
-Use `.radius-none` to remove an existing border radius from an element.
+Use `.rounded-none` to remove an existing border radius from an element.
 
 This is most commonly used to remove a border radius that was applied at a smaller breakpoint.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-<div class="p-4 radius-none bg-grey-light">.radius-none</div>
+<div class="p-4 rounded-none bg-grey-light">.rounded-none</div>
 @slot('code')
-<div class="radius-none"></div>
+<div class="rounded-none"></div>
 @endslot
 @endcomponent
 
 ## Rounding sides separately
 
-Use `.radius-{t|r|b|l}-{size}` to only round one side an element.
+Use `.rounded-{t|r|b|l}{-size?}` to only round one side an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 radius-t-lg">.radius-t-lg</div>
-<div class="bg-grey-light mr-3 p-4 radius-r-lg">.radius-r-lg</div>
-<div class="bg-grey-light mr-3 p-4 radius-b-lg">.radius-b-lg</div>
-<div class="bg-grey-light p-4 radius-l-lg">.radius-l-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-t-lg">.rounded-t-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-r-lg">.rounded-r-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-b-lg">.rounded-b-lg</div>
+<div class="bg-grey-light p-4 rounded-l-lg">.rounded-l-lg</div>
 @slot('code')
-<div class="radius-t-lg"></div>
-<div class="radius-r-lg"></div>
-<div class="radius-b-lg"></div>
-<div class="radius-l-lg"></div>
+<div class="rounded-t-lg"></div>
+<div class="rounded-r-lg"></div>
+<div class="rounded-b-lg"></div>
+<div class="rounded-l-lg"></div>
 @endslot
 @endcomponent
 
 ## Rounding corners separately
 
-Use `.radius-{tl|tr|br|bl}-{size}` to only round one corner an element.
+Use `.rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 radius-tl-lg">.radius-tl-lg</div>
-<div class="bg-grey-light mr-3 p-4 radius-tr-lg">.radius-tr-lg</div>
-<div class="bg-grey-light mr-3 p-4 radius-br-lg">.radius-br-lg</div>
-<div class="bg-grey-light p-4 radius-bl-lg">.radius-bl-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-tl-lg">.rounded-tl-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-tr-lg">.rounded-tr-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-br-lg">.rounded-br-lg</div>
+<div class="bg-grey-light p-4 rounded-bl-lg">.rounded-bl-lg</div>
 @slot('code')
-<div class="radius-tl-lg"></div>
-<div class="radius-tr-lg"></div>
-<div class="radius-br-lg"></div>
-<div class="radius-bl-lg"></div>
+<div class="rounded-tl-lg"></div>
+<div class="rounded-tr-lg"></div>
+<div class="rounded-br-lg"></div>
+<div class="rounded-bl-lg"></div>
 @endslot
 @endcomponent
 
 ## Responsive
 
-To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:radius-lg` to apply the `radius-lg` utility at only medium screen sizes and above.
+To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above.
 
 For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
 
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 radius-md"></div>
+  <div class="bg-grey w-12 h-12 rounded"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 radius-t-md"></div>
+  <div class="bg-grey w-12 h-12 rounded-t"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 radius-b-lg"></div>
+  <div class="bg-grey w-12 h-12 rounded-b-lg"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 radius-none"></div>
+  <div class="bg-grey w-12 h-12 rounded-none"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 radius-r-md"></div>
+  <div class="bg-grey w-12 h-12 rounded-r"></div>
 </div>
 @endslot
 @slot('code')
-<div class="none:radius-md sm:radius-t-md md:radius-b-lg lg:radius-none xlradius-r-md ...">
+<div class="none:rounded sm:rounded-t md:rounded-b-lg lg:rounded-none xlrounded-r ...">
   <!-- ... -->
 </div>
 @endslot
@@ -366,13 +366,13 @@ For more information about Tailwind's responsive design features, check out the
 
 By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
 
-Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.radius-t`) aren't customizable.
+Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable.
 
 @component('_partials.customized-config', ['key' => 'borderRadius'])
   'none': '0',
 - 'sm': '.125rem',
-- 'md': '.25rem',
-+ 'md': '4px',
+- default: '.25rem',
++ default: '4px',
 - 'lg': '.5rem',
 - 'full': '9999px',
 + 'large': '12px',
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index f4f45c7bb817..19dca9611951 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -18,22 +18,22 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
 <div class="flex items-start mt-8 text-sm leading-none">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">border</code></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
   </div>
   <div class="pl-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">0</code> 0px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">2</code> 2px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">4</code> 4px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">8</code> 8px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
   </div>
 </div>
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index 9c9008b9370d..e4ca285b7eb5 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -12,7 +12,7 @@ To get you started, we've provided a generous palette of great looking colors th
 
 <div class="flex flex-wrap -mx-4">
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Grey</div>
         <div class="flex justify-between">
@@ -62,7 +62,7 @@ To get you started, we've provided a generous palette of great looking colors th
 
 <div class="flex flex-wrap -mx-4">
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Red</div>
         <div class="flex justify-between">
@@ -101,7 +101,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Orange</div>
         <div class="flex justify-between">
@@ -140,7 +140,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Yellow</div>
         <div class="flex justify-between">
@@ -179,7 +179,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Green</div>
         <div class="flex justify-between">
@@ -218,7 +218,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Teal</div>
         <div class="flex justify-between">
@@ -257,7 +257,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Blue</div>
         <div class="flex justify-between">
@@ -296,7 +296,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Indigo</div>
         <div class="flex justify-between">
@@ -335,7 +335,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Purple</div>
         <div class="flex justify-between">
@@ -374,7 +374,7 @@ To get you started, we've provided a generous palette of great looking colors th
     </div>
   </div>
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
-    <div class="radius-md overflow-hidden">
+    <div class="rounded overflow-hidden">
       <div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
         <div class="tracking-wide uppercase mb-6">Pink</div>
         <div class="flex justify-between">
diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md
index 318ed80f086e..dd47ef44bcd2 100644
--- a/docs/source/docs/examples/alerts.blade.md
+++ b/docs/source/docs/examples/alerts.blade.md
@@ -9,7 +9,7 @@ description: null
 ### Traditional
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 radius-md relative" role="alert">
+<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
   <strong class="font-bold">Holy smokes!</strong>
   <span class="block sm:inline">Something seriously bad happened.</span>
   <span class="absolute pin-t pin-b pin-r px-4 py-3">
@@ -31,10 +31,10 @@ description: null
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div role="alert">
-  <div class="bg-red text-white font-bold radius-t-md px-4 py-2">
+  <div class="bg-red text-white font-bold rounded-t px-4 py-2">
     Danger
   </div>
-  <div class="border border-t-0 border-red-light radius-b-md bg-red-lightest px-4 py-3 text-red-dark">
+  <div class="border border-t-0 border-red-light rounded-b bg-red-lightest px-4 py-3 text-red-dark">
     <p>Something not ideal might be happening.</p>
   </div>
 </div>
@@ -52,7 +52,7 @@ description: null
 ### Top Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-teal-lightest border-t-4 border-teal radius-b-md text-teal-darkest px-4 py-3 shadow-md" role="alert">
+<div class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md
index 69633261e866..6e7d5a7580b3 100644
--- a/docs/source/docs/examples/buttons.blade.md
+++ b/docs/source/docs/examples/buttons.blade.md
@@ -9,13 +9,13 @@ description: null
 ### Simple
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
@@ -26,7 +26,7 @@ description: null
 
 <style>
   .btn {
-    @apply&nbsp;.font-bold .py-2 .px-4 .radius-md;
+    @apply&nbsp;.font-bold .py-2 .px-4 .rounded;
   }
   .btn-blue {
     @apply&nbsp;.bg-blue .text-white;
@@ -41,7 +41,7 @@ description: null
 ### Pill
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-full">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
   Button
 </button>
 @endcomponent
@@ -49,7 +49,7 @@ description: null
 ### Outline
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent radius-md">
+<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
   Button
 </button>
 @endcomponent
@@ -57,7 +57,7 @@ description: null
 ### Bordered
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
   Button
 </button>
 @endcomponent
@@ -65,7 +65,7 @@ description: null
 ### Disabled
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue text-white font-bold py-2 px-4 radius-md opacity-50 cursor-not-allowed">
+<button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
   Button
 </button>
 @endcomponent
@@ -73,7 +73,7 @@ description: null
 ### 3D
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue radius-md">
+<button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded">
   Button
 </button>
 @endcomponent
@@ -81,7 +81,7 @@ description: null
 ### Elevated
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter radius-md shadow">
+<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter rounded shadow">
   Button
 </button>
 @endcomponent
@@ -90,10 +90,10 @@ description: null
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-l-md">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-l">
     Prev
   </button>
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-r-md">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-r">
     Next
   </button>
 </div>
@@ -102,7 +102,7 @@ description: null
 ### Icons
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 radius-md inline-flex items-center">
+<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
   <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
   <span>Download</span>
 </button>
diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md
index 6a059ad1832f..a011f683faf8 100644
--- a/docs/source/docs/examples/cards.blade.md
+++ b/docs/source/docs/examples/cards.blade.md
@@ -9,7 +9,7 @@ description: null
 ## Stacked
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
-<div class="max-w-sm radius-md overflow-hidden shadow-lg">
+<div class="max-w-sm rounded overflow-hidden shadow-lg">
   <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
   <div class="px-6 py-4">
     <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
@@ -18,9 +18,9 @@ description: null
     </p>
   </div>
   <div class="px-6 py-4">
-    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
-    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
-    <span class="inline-block bg-grey-lighter radius-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
   </div>
 </div>
 @endcomponent
@@ -29,9 +29,9 @@ description: null
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md w-full lg:flex">
-  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover radius-t-md lg:radius-t-none lg:radius-l-md text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
+  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
   </div>
-  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white radius-b-md lg:radius-b-none lg:radius-r-md p-4 flex flex-col justify-between leading-normal">
+  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
     <div class="mb-8">
       <p class="text-sm text-grey-dark flex items-center">
         <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -43,7 +43,7 @@ description: null
       <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
     </div>
     <div class="flex items-center">
-      <img class="w-10 h-10 radius-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
+      <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
       <div class="text-sm">
         <p class="text-black leading-none">Jonathan Reinink</p>
         <p class="text-grey-dark">Aug 18</p>
diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md
index 64109a31341e..14598d3be8a0 100644
--- a/docs/source/docs/examples/forms.blade.md
+++ b/docs/source/docs/examples/forms.blade.md
@@ -10,22 +10,22 @@ description: null
 
 @component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
 <div class="w-full max-w-xs">
-  <form class="bg-white shadow-md radius-md px-8 pt-6 pb-8 mb-4">
+  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
     <div class="mb-4">
       <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
         Username
       </label>
-      <input class="shadow appearance-none border radius-md w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
+      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
     </div>
     <div class="mb-6">
       <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
         Password
       </label>
-      <input class="shadow appearance-none border border-red radius-md w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
+      <input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
       <p class="text-red text-xs italic">Please choose a password.</p>
     </div>
     <div class="flex items-center justify-between">
-      <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md" type="button">
+      <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
         Sign In
       </button>
       <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
@@ -50,7 +50,7 @@ description: null
       </label>
     </div>
     <div class="md:w-2/3">
-      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple radius-md w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
     </div>
   </div>
   <div class="md:flex md:items-center mb-6">
@@ -60,7 +60,7 @@ description: null
       </label>
     </div>
     <div class="md:w-2/3">
-      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple radius-md w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
     </div>
   </div>
   <div class="md:flex md:items-center mb-6">
@@ -75,7 +75,7 @@ description: null
   <div class="md:flex md:items-center">
     <div class="md:w-1/3"></div>
     <div class="md:w-2/3">
-      <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 radius-md" type="button">
+      <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="button">
         Sign Up
       </button>
     </div>
@@ -92,14 +92,14 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
         First Name
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red radius-md py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
       <p class="text-red text-xs italic">Please fill out this field.</p>
     </div>
     <div class="md:w-1/2 px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
         Last Name
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
     </div>
   </div>
   <div class="-mx-3 md:flex mb-6">
@@ -107,7 +107,7 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
         Password
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
       <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
     </div>
   </div>
@@ -116,14 +116,14 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
         City
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
     </div>
     <div class="md:w-1/2 px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
         State
       </label>
       <div class="relative">
-        <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 radius-md" id="grid-state">
+        <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
           <option>New Mexico</option>
           <option>Missouri</option>
           <option>Texas</option>
@@ -137,7 +137,7 @@ description: null
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
         Zip
       </label>
-      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter radius-md py-3 px-4" id="grid-zip" type="text" placeholder="90210">
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
     </div>
   </div>
 </form>
@@ -149,10 +149,10 @@ description: null
 <form class="w-full max-w-sm">
   <div class="flex items-center border-b border-b-2 border-teal py-2">
     <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
-    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 radius-md" type="button">
+    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
       Sign Up
     </button>
-    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 radius-md" type="button">
+    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
       Cancel
     </button>
   </div>
diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md
index afc6838fc17a..ab81c1aa5ed8 100644
--- a/docs/source/docs/examples/navigation.blade.md
+++ b/docs/source/docs/examples/navigation.blade.md
@@ -34,7 +34,7 @@ description: null
     <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
   </div>
   <div class="block lg:hidden">
-    <button class="flex items-center px-3 py-2 border radius-md text-teal-lighter border-teal-light hover:text-white hover:border-white">
+    <button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
       <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
     </button>
   </div>
@@ -51,7 +51,7 @@ description: null
       </a>
     </div>
     <div>
-      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border radius-md text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
+      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
     </div>
   </div>
 </nav>
@@ -62,7 +62,7 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex border-b">
   <li class="-mb-px mr-1">
-    <a class="bg-white inline-block border-l border-t border-r radius-t-md py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
+    <a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
   </li>
   <li class="mr-1">
     <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
@@ -81,10 +81,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex">
   <li class="mr-3">
-    <a class="inline-block border border-blue radius-md py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
+    <a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
   </li>
   <li class="mr-3">
-    <a class="inline-block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
+    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
   </li>
   <li class="mr-3">
     <a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
@@ -97,10 +97,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex">
   <li class="flex-1 mr-2">
-    <a class="text-center block border border-blue radius-md py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
+    <a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
   </li>
   <li class="flex-1 mr-2">
-    <a class="text-center block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
+    <a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
   </li>
   <li class="text-center flex-1">
     <a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
@@ -113,10 +113,10 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex justify-between">
   <li class="mr-3">
-    <a class="inline-block border border-blue radius-md py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
+    <a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
   </li>
   <li class="mr-3">
-    <a class="inline-block border border-white radius-md hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
+    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
   </li>
   <li class="mr-3">
     <a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
diff --git a/docs/source/docs/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md
index e51529ba901d..ce261fafdec8 100644
--- a/docs/source/docs/extracting-components.blade.md
+++ b/docs/source/docs/extracting-components.blade.md
@@ -11,12 +11,12 @@ While we strongly believe you can get a lot further with just utilities than you
 For example, using a utility-first approach, implementing a button style early in a project might look something like this:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
 @slot('code')
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 @endslot
@@ -35,7 +35,7 @@ To make this as easy as possible, Tailwind provides the `@apply` directive for a
 Here's what a `.btn-blue` class might look like using `@apply` to compose it from existing utilities:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
@@ -46,7 +46,7 @@ Here's what a `.btn-blue` class might look like using `@apply` to compose it fro
 
 <style>
 .btn-blue {
-  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .radius-md;
+  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
 }
 .btn-blue:hover {
   @@apply .bg-blue-dark;
@@ -62,20 +62,20 @@ Note that `hover:`, `focus:`, and `{screen}:` utility variants can't be mixed in
 Say you have these two buttons:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md mr-4">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
   Button
 </button>
 
 @slot('code')
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
   Button
 </button>
 @endslot
@@ -85,14 +85,14 @@ It might be tempting to implement component classes for these buttons like this:
 
 ```less
 .btn-blue {
-  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .radius-md;
+  @@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
 }
 .btn-blue:hover {
   @@apply .bg-blue-dark;
 }
 
 .btn-grey {
-  @@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .radius-md;
+  @@apply .bg-grey-light .text-grey-darkest .font-bold .py-2 .px-4 .rounded;
 }
 .btn-grey:hover {
   @@apply .bg-grey;
@@ -107,7 +107,7 @@ A better approach is to extract the parts that are the same into a separate clas
 
 ```less
 .btn {
-  @@apply .font-bold .py-2 .px-4 .radius-md;
+  @@apply .font-bold .py-2 .px-4 .rounded;
 }
 
 .btn-blue {
@@ -128,11 +128,11 @@ A better approach is to extract the parts that are the same into a separate clas
 Now you'd apply two classes any time you needed to style a button:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md mr-4">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mr-4">
   Button
 </button>
 
-<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 radius-md">
+<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded">
   Button
 </button>
 
@@ -152,7 +152,7 @@ This makes it easy to change the shared styles in one place by just editing the
 It also allows you to add new one-off button styles without being forced to create a new component class or duplicated the shared styles:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-green hover:bg-green-light text-white font-bold py-2 px-4 radius-md">
+<button class="bg-green hover:bg-green-light text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
@@ -173,7 +173,7 @@ Here's an example:
 @@tailwind preflight;
 
 .btn {
-  @@apply .font-bold .py-2 .px-4 .radius-md;
+  @@apply .font-bold .py-2 .px-4 .rounded;
 }
 .btn-blue {
   @@apply .bg-blue .text-white;
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
index c69b8007ca75..dd3911541b46 100644
--- a/docs/source/docs/forms.blade.md
+++ b/docs/source/docs/forms.blade.md
@@ -41,7 +41,7 @@ Form controls are great candidates for component classes, but just for fun, here
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-block relative w-64">
-  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 radius-md shadow">
+  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
     <option>Really long option that will likely overlap the chevron</option>
     <option>Option 2</option>
     <option>Option 3</option>
diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index 72f94a9eed06..c8c619d9ddba 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -44,7 +44,7 @@ This is extremely useful when you find a common utility pattern in your HTML tha
 
 ```less
 .btn {
-  @@apply .font-bold .py-2 .px-4 .radius-md;
+  @@apply .font-bold .py-2 .px-4 .rounded;
 }
 .btn-blue {
   @@apply .bg-blue .text-white;
diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md
index f569a4a80e84..7d56f5393f50 100644
--- a/docs/source/docs/installation.blade.md
+++ b/docs/source/docs/installation.blade.md
@@ -32,7 +32,7 @@ For most projects (and to take advantage of Tailwind's customization features),
 
 Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
 
-<div class="radius-md bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
+<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
   <div class="text-smoke-darker"># Using npm</div>
   <div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
   <div class="text-smoke-darker mt-6"># Using Yarn</div>
@@ -45,7 +45,7 @@ Tailwind is configured almost entirely in plain JavaScript. To do this you'll ne
 
 We've provided a CLI utility to do this easily:
 
-<div class="radius-md bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
+<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
   <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
 </div>
 
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
index 531586c21901..780831ccce77 100644
--- a/docs/source/docs/opacity.blade.md
+++ b/docs/source/docs/opacity.blade.md
@@ -72,27 +72,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 radius-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 radius-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('md')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 radius-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 radius-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 radius-full inline-block"></div>
+  <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index d014eed8b5da..d8784c09fefd 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -202,14 +202,14 @@ Use `.fixed` to position an element relative to the browser window.
 Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children.
 
 @component('_partials.code-sample')
-<div class="radius-b-md overflow-hidden max-w-md mx-auto mt-4 mb-4">
-  <div class="radius-t-md border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
+<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
+  <div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
     <div class="mr-6">
-      <span class="inline-block radius-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block radius-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block radius-full bg-smoke-dark h-3 w-3"></span>
+      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
+      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
+      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
     </div>
-    <div class="flex-1 bg-white border border-smoke radius-md mr-4"></div>
+    <div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
   </div>
   <div class="relative bg-smoke h-64">
 
@@ -260,17 +260,17 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
 <div class="flex items-start mt-8 text-sm leading-none mb-8">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">pin</code></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pin</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Edge</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">y</code> Top and Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">x</code> Left and Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Top and Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Left and Right</div>
   </div>
 </div>
 
diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md
index 14bae7cae14f..db2258d36293 100644
--- a/docs/source/docs/responsive-design.blade.md
+++ b/docs/source/docs/responsive-design.blade.md
@@ -13,27 +13,27 @@ This is done using predefined screen sizes (media query breakpoints), each of wh
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="bg-purple text-white w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="bg-green text-white w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="bg-blue text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="bg-red text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="bg-orange text-yellow w-24 h-24 radius-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
index 5a18e37d504e..e5a492c83f2c 100644
--- a/docs/source/docs/shadows.blade.md
+++ b/docs/source/docs/shadows.blade.md
@@ -103,27 +103,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
+  <div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
+  <div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
+  <div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
+  <div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 radius-full"></div>
+  <div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index cbfce6f4781b..57029cad5ef8 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -18,30 +18,30 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
 <div class="flex items-start mt-8 text-sm">
   <div class="pr-12">
     <div class="mb-3 text-slate uppercase">Class</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">p</code> Padding</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">m</code> Margin</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">-m</code> Negative Margin</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
   </div>
   <div class="pl-12 pr-12 border-l">
     <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">t</code> Top</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">r</code> Right</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">b</code> Bottom</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">l</code> Left</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">x</code> Horizontal</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">y</code> Vertical</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
   </div>
   <div class="pl-12 border-l">
     <div class="mb-3 text-slate uppercase">Space</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">0</code> 0</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">1</code> 0.25rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">2</code> 0.5rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">3</code> 0.75rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">4</code> 1rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">6</code> 1.5rem</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border radius-md">8</code> 2rem</div>
-    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border radius-md">px</code> 1px</div>
-    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border radius-md">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
+    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">px</code> 1px</div>
+    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
   </div>
 </div>
diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md
index cbf8f8a75da9..2be6db5d8e7f 100644
--- a/docs/source/docs/text-color.blade.md
+++ b/docs/source/docs/text-color.blade.md
@@ -37,7 +37,7 @@ features:
 In addition to the standard responsive variations, text colors also come in `hover:` variations that apply the given text color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
-<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold radius-md">
+<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
   Button
 </button>
 @endcomponent
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
index 161d9f05dab6..ffa2180ce0cd 100644
--- a/docs/source/docs/visibility.blade.md
+++ b/docs/source/docs/visibility.blade.md
@@ -43,7 +43,7 @@ features:
 Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="visible bg-smoke w-24 h-24 radius-full"></div>
+<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
 @endcomponent
 
 ### Invisible
@@ -51,7 +51,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
 Use `.invisible` to hide an element, but still maintain its space.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="invisible bg-smoke w-24 h-24 radius-full"></div>
+<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
 @endcomponent
 
 ## Responsive
@@ -63,27 +63,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
+  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 radius-full"></div>
+  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
+  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 radius-full"></div>
+  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 radius-full"></div>
+  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md
index 626985bbe8f4..97b582be6f41 100644
--- a/docs/source/docs/what-is-tailwind.blade.md
+++ b/docs/source/docs/what-is-tailwind.blade.md
@@ -29,31 +29,31 @@ Instead, Tailwind provides highly composable, low-level *utility classes* that m
 Here's an example of a contact card component built with Tailwind without writing a single line of CSS:
 
 @component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
-<div class="bg-white mx-auto max-w-sm shadow-lg radius-lg overflow-hidden">
+<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
   <div class="sm:flex sm:items-center px-6 py-4">
-    <img class="block h-16 sm:h-24 radius-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="text-xl leading-tight">Adam Wathan</p>
         <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
       </div>
       <div>
-        <button class="text-xs font-semibold radius-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
       </div>
     </div>
   </div>
 </div>
 @slot('code')
-<div class="bg-white mx-auto max-w-sm shadow-lg radius-lg overflow-hidden">
+<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
   <div class="sm:flex sm:items-center px-6 py-4">
-    <img class="block h-16 sm:h-24 radius-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
     <div class="text-center sm:text-left sm:flex-grow">
       <div class="mb-4">
         <p class="text-xl leading-tight">Adam Wathan</p>
         <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
       </div>
       <div>
-        <button class="text-xs font-semibold radius-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
       </div>
     </div>
   </div>
@@ -68,13 +68,13 @@ While you can do a *lot* with just utility classes, sometimes a component class
 Tailwind provides tools for [extracting component classes](/docs/extracting-components) from repeated utility patterns, making it easy to update multiple instances of a component from one place:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
-<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 radius-md">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
   Button
 </button>
 
@@ -85,7 +85,7 @@ Tailwind provides tools for [extracting component classes](/docs/extracting-comp
 
 <style>
   .btn {
-    @apply&nbsp;.font-bold .py-2 .px-4 .radius-md;
+    @apply&nbsp;.font-bold .py-2 .px-4 .rounded;
   }
   .btn-blue {
     @apply&nbsp;.bg-blue .text-white;
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
index e4dc6f075afb..ecd597535eae 100644
--- a/docs/source/index.blade.php
+++ b/docs/source/index.blade.php
@@ -23,8 +23,8 @@
       </div>
       <h2 class="mt-12 font-light text-3xl sm:text-4xl text-center">A Utility-First CSS Framework<br class="hidden sm:inline-block"> for Rapid UI Development</h2>
       <div class="mt-12 sm:flex sm:justify-center">
-        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs radius-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
-        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs radius-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
       </div>
     </div>
   </div>
@@ -38,7 +38,7 @@
     <div class="pb-4 flex justify-center flex-wrap max-w-md xl:max-w-full border-b-2 border-grey-light">
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/adamwathan" class="block hover:underline text-dark text-lg text-medium">Adam Wathan</a>
             <a href="https://twitter.com/adamwathan" class="block hover:underline text-tailwind-teal-dark text-sm">@adamwathan</a>
@@ -47,7 +47,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/reinink" class="block hover:underline text-dark text-lg text-medium">Jonathan Reinink</a>
             <a href="https://twitter.com/reinink" class="block hover:underline text-tailwind-teal-dark text-sm">@reinink</a>
@@ -56,7 +56,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
           <div class="pl-4">
             <a href="https://twitter.com/davidhemphill" class="block hover:underline text-dark text-lg text-medium">David Hemphill</a>
             <a href="https://twitter.com/davidhemphill" class="block hover:underline text-tailwind-teal-dark text-sm">@davidhemphill</a>
@@ -65,7 +65,7 @@
       </div>
       <div class="mb-8 w-64 md:flex-x-center">
         <div class="flex items-center">
-          <img class="h-16 w-16 radius-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
           <div class="pl-4">
             <a href="https://twitter.com/steveschoger" class="block hover:underline text-dark text-lg text-medium">Steve Schoger</a>
             <a href="https://twitter.com/steveschoger" class="block hover:underline text-tailwind-teal-dark text-sm">@steveschoger</a>
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index 735bf36ad89b..8ef553db1fb8 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -2,36 +2,38 @@ import _ from 'lodash'
 import defineClasses from '../util/defineClasses'
 
 function sizedBorder(radius, modifier) {
+  modifier = modifier === 'default' ? '' : `-${modifier}`
+
   return defineClasses({
-    [`radius-${modifier}`]: {
+    [`rounded${modifier}`]: {
       'border-radius': `${radius}`,
     },
-    [`radius-t-${modifier}`]: {
+    [`rounded-t${modifier}`]: {
       'border-top-left-radius': `${radius}`,
       'border-top-right-radius': `${radius}`,
     },
-    [`radius-r-${modifier}`]: {
+    [`rounded-r${modifier}`]: {
       'border-top-right-radius': `${radius}`,
       'border-bottom-right-radius': `${radius}`,
     },
-    [`radius-b-${modifier}`]: {
+    [`rounded-b${modifier}`]: {
       'border-bottom-right-radius': `${radius}`,
       'border-bottom-left-radius': `${radius}`,
     },
-    [`radius-l-${modifier}`]: {
+    [`rounded-l${modifier}`]: {
       'border-top-left-radius': `${radius}`,
       'border-bottom-left-radius': `${radius}`,
     },
-    [`radius-tl-${modifier}`]: {
+    [`rounded-tl${modifier}`]: {
       'border-top-left-radius': `${radius}`,
     },
-    [`radius-tr-${modifier}`]: {
+    [`rounded-tr${modifier}`]: {
       'border-top-right-radius': `${radius}`,
     },
-    [`radius-br-${modifier}`]: {
+    [`rounded-br${modifier}`]: {
       'border-bottom-right-radius': `${radius}`,
     },
-    [`radius-bl-${modifier}`]: {
+    [`rounded-bl${modifier}`]: {
       'border-bottom-left-radius': `${radius}`,
     },
   })