Document styling checkboxes/radios directly when IE11 support is not needed

Author: adamwathan

pages/index.mdx

@@ -124,6 +124,37 @@ impose any opinions in that regard. Here we've used flexbox to center the checkb
   </div>
 `}/>
 
+### Styling checkboxes directly (No IE 11 support)
+
+If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
+`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.
+
+<CodeSample code={`
+  <div class="block">
+    <span class="text-gray-700">Checkboxes</span>
+    <div class="mt-2">
+      <div>
+        <label class="inline-flex items-center">
+          <input type="checkbox" class="form-checkbox text-gray-800" checked/>
+          <span class="ml-2">Option 1</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input type="checkbox" class="form-checkbox text-gray-800"/>
+          <span class="ml-2">Option 2</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input type="checkbox" class="form-checkbox text-gray-800"/>
+          <span class="ml-2">Option 3</span>
+        </label>
+      </div>
+    </div>
+  </div>
+`}/>
+
 ### Changing the color
 
 You can customize the background color of a checkbox when it's checked by using Tailwind's text
@@ -234,6 +265,37 @@ impose any opinions in that regard. Here we've used flexbox to center the radio
   </div>
 `}/>
 
+### Styling radio buttons directly (No IE 11 support)
+
+If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
+`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.
+
+<CodeSample code={`
+  <div class="block">
+    <span class="text-gray-700">Radio Buttons</span>
+    <div class="mt-2">
+      <div>
+        <label class="inline-flex items-center">
+          <input type="radio" class="form-radio text-gray-800" name="radio" value="1" checked/>
+          <span class="ml-2">Option 1</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input type="radio" class="form-radio text-gray-800" name="radio" value="2"/>
+          <span class="ml-2">Option 2</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input type="radio" class="form-radio text-gray-800" name="radio" value="3"/>
+          <span class="ml-2">Option 3</span>
+        </label>
+      </div>
+    </div>
+  </div>
+`}/>
+
 ### Changing the color
 
 You can customize the background color of a radio button when it's checked by using Tailwind's text

tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
 
       addComponents({
         '.form-checkbox': {
+          appearance: 'none',
           display: 'inline-block',
           height: theme('spacing.4', defaultTheme.spacing[4]),
           width: theme('spacing.4', defaultTheme.spacing[4]),
@@ -30,14 +31,14 @@ module.exports = {
           borderRadius: theme('borderRadius.default', defaultTheme.borderRadius.default),
           backgroundColor: '#fff',
           userSelect: 'none',
-          'input[type=checkbox]:focus + &': {
+          'input[type=checkbox]:focus + &, input[type=checkbox]&:focus': {
             outline: 'none',
             boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
           },
-          'input[type=checkbox]:focus:not(:checked) + &': {
+          'input[type=checkbox]:focus:not(:checked) + &, input[type=checkbox]&:focus:not(:checked)': {
             borderColor: defaultTheme.colors.blue[400],
           },
-          'input[type=checkbox]:checked + &': {
+          'input[type=checkbox]:checked + &, input[type=checkbox]&:checked': {
             backgroundColor: 'currentColor',
             borderColor: 'currentColor',
             backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 14.586l7.293-8.293a1 1 0 0 1 1.414 1.414l-8 9a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414l3.293 3.293z' fill-rule='evenodd'/%3E%3C/svg%3E")`,
@@ -47,6 +48,7 @@ module.exports = {
           },
         },
         '.form-radio': {
+          appearance: 'none',
           display: 'inline-block',
           height: theme('spacing.4', defaultTheme.spacing[4]),
           width: theme('spacing.4', defaultTheme.spacing[4]),
@@ -55,14 +57,14 @@ module.exports = {
           borderRadius: '9999px',
           backgroundColor: '#fff',
           userSelect: 'none',
-          'input[type=radio]:focus + &': {
+          'input[type=radio]:focus + &, input[type=radio]&:focus': {
             outline: 'none',
             boxShadow: theme('boxShadow.outline', defaultTheme.boxShadow.outline),
           },
-          'input[type=radio]:focus:not(:checked) + &': {
+          'input[type=radio]:focus:not(:checked) + &, input[type=radio]&:focus:not(:checked)': {
             borderColor: defaultTheme.colors.blue[400],
           },
-          'input[type=radio]:checked + &': {
+          'input[type=radio]:checked + &, input[type=radio]&:checked': {
             backgroundColor: 'currentColor',
             borderColor: 'currentColor',
             backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E")`,