Merge pull request #196 from tailwindcss/rounded-to-radius

[0.2] Rework `rounded` utilities to `radius`, add ability to target corners

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',
   },
 
 

src/generators/rounded.js

@@ -2,28 +2,38 @@ 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}`]: {
-      'border-top-right-radius': `${radius}`,
+    [`radius-t-${modifier}`]: {
       'border-top-left-radius': `${radius}`,
+      'border-top-right-radius': `${radius}`,
     },
-    [`rounded-r${modifier}`]: {
+    [`radius-r-${modifier}`]: {
       'border-top-right-radius': `${radius}`,
       'border-bottom-right-radius': `${radius}`,
     },
-    [`rounded-b${modifier}`]: {
+    [`radius-b-${modifier}`]: {
       'border-bottom-right-radius': `${radius}`,
       'border-bottom-left-radius': `${radius}`,
     },
-    [`rounded-l${modifier}`]: {
+    [`radius-l-${modifier}`]: {
       'border-top-left-radius': `${radius}`,
       'border-bottom-left-radius': `${radius}`,
     },
+    [`radius-tr-${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
+    },
+    [`radius-br-${modifier}`]: {
+      'border-bottom-right-radius': `${radius}`,
+    },
+    [`radius-bl-${modifier}`]: {
+      'border-bottom-left-radius': `${radius}`,
+    },
+    [`radius-tl-${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+    },
   })
 }