Add basic configuration instructions to demo/docs

Author: adamwathan

docs/pages/index.mdx

@@ -1,5 +1,7 @@
+import dedent from 'dedent'
 import CodeSample from '../components/CodeSample'
 import Layout from '../components/Layout'
+import Highlight from 'react-highlight'
 
 export default Layout
 
@@ -23,6 +25,49 @@ unopinionated, and easy to customize by adding utilities instead of having to wr
 
 ---
 
+## Configuration
+
+You can customize any of the default form styles applied by this plugin using the `theme.customForms`
+section of your `tailwind.config.js` file.
+
+Here is a list of the all of the available options, as well as their default values:
+
+<div className="rounded-b-lg p-4 bg-gray-800">
+  <Highlight className="language-js">{dedent`
+    // tailwind.config.js
+    const defaultTheme = require('tailwindcss/defaultTheme')\n
+    module.exports = {
+      theme: {
+        customForms: {
+          horizontalPadding: defaultTheme.spacing[3],
+          verticalPadding: defaultTheme.spacing[2],
+          lineHeight: defaultTheme.lineHeight.normal,
+          fontSize: defaultTheme.fontSize.base,
+          borderColor: defaultTheme.borderColor.default,
+          borderWidth: defaultTheme.borderWidth.default,
+          borderRadius: defaultTheme.borderRadius.default,
+          backgroundColor: defaultTheme.colors.white,
+          focusBorderColor: defaultTheme.colors.blue[400],
+          focusShadow: defaultTheme.boxShadow.outline,
+          checkboxSize: '1em',
+          radioSize: '1em',
+          checkboxIcon: \`<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="M13.293 4.293a1 1 0 0 1 0 1.414L7 12a1 1 0 0 1-1.414 0L3.293 9.707a1 1 0 0 1 1.414-1.414l1.586 1.586 5.586-5.586a1 1 0 0 1 1.414 0z"/></svg>\`,
+          radioIcon: \`<svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/></svg>\`,
+          checkedColor: 'currentColor',
+          selectIcon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="\${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>\`,
+          selectIconOffset: defaultTheme.spacing[2],
+          selectIconSize: '1.5em',
+        }
+      },
+      plugins: [
+        require('@tailwindcss/custom-forms'),
+      ],
+    }
+  `}</Highlight>
+</div>
+
+---
+
 ## Text Input
 
 Add basic styles to a normal `input` element using the `form-input` class.

docs/static/css/tailwind.css

@@ -46,7 +46,7 @@
   border-radius: theme('borderRadius.lg');
 }
 .hljs-comment, .hljs-quote {
-  color: theme('colors.gray-500');
+  color: theme('colors.gray.500');
   font-style: italic;
 }
 .hljs-name {