Make checkboxes/radios 1em by default

Author: adamwathan

pages/index.mdx

@@ -191,8 +191,8 @@ color utilities, like `text-indigo-600`.
 
 ### Changing the size
 
-Use Tailwind's width and height utilities (like `h-6` and `w-6`) to customize the size of the
-checkbox.
+By default, checkboxes will match the current font size. If you want to give them an explicit size,
+use Tailwind's width and height utilities, like `h-6` and `w-6`.
 
 <CodeSample code={`
   <div class="block">
@@ -332,8 +332,8 @@ color utilities, like `text-indigo-600`.
 
 ### Changing the size
 
-Use Tailwind's width and height utilities (like `h-6` and `w-6`) to customize the size of the
-radio button.
+By default, radio buttons will match the current font size. If you want to give them an explicit size,
+use Tailwind's width and height utilities, like `h-6` and `w-6`.
 
 <CodeSample code={`
   <div class="block">

tailwind.config.js

@@ -24,8 +24,8 @@ module.exports = {
         '.form-checkbox': {
           appearance: 'none',
           display: 'inline-block',
-          height: theme('spacing.4', defaultTheme.spacing[4]),
-          width: theme('spacing.4', defaultTheme.spacing[4]),
+          height: '1em',
+          width: '1em',
           verticalAlign: 'middle',
           borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
           borderRadius: theme('borderRadius.default', defaultTheme.borderRadius.default),
@@ -50,8 +50,8 @@ module.exports = {
         '.form-radio': {
           appearance: 'none',
           display: 'inline-block',
-          height: theme('spacing.4', defaultTheme.spacing[4]),
-          width: theme('spacing.4', defaultTheme.spacing[4]),
+          height: '1em',
+          width: '1em',
           verticalAlign: 'middle',
           borderWidth: theme('borderWidth.default', defaultTheme.borderWidth.default),
           borderRadius: '9999px',