diff --git a/README.md b/README.md
index 74d3ec2..664319b 100644
--- a/README.md
+++ b/README.md
@@ -71,4 +71,24 @@ Every element has been normalized/reset to a simple visually consistent style th
```
+## Customization
+You can provide a configuration with custom values for the ringColors and borderColors:
+```js
+// tailwind.config.js
+module.exports = {
+ theme: {
+ // ...
+ },
+ plugins: [
+ require('@tailwindcss/forms')({
+ colors: {
+ borderColor: '#BADA55',
+ ringColor: '#C0FFEE',
+ }
+ }),
+ // ...
+ ],
+}
+```
+
More customization examples and best practices coming soon.
diff --git a/src/index.js b/src/index.js
index dc22410..171a1e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,9 +4,10 @@ const defaultTheme = require('tailwindcss/defaultTheme')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
-const forms = plugin(function ({ addBase, theme }) {
- addBase({
- [`
+const forms = function(pluginConfiguration = {}) {
+ return plugin(function ({ addBase, theme }) {
+ addBase({
+ [`
[type='text'],
[type='email'],
[type='url'],
@@ -23,181 +24,182 @@ const forms = plugin(function ({ addBase, theme }) {
textarea,
select
`]: {
- appearance: 'none',
- 'background-color': '#fff',
- 'border-color': theme('colors.gray.500', colors.gray[500]),
- 'border-width': borderWidth['DEFAULT'],
- 'border-radius': borderRadius.none,
- 'padding-top': spacing[2],
- 'padding-right': spacing[3],
- 'padding-bottom': spacing[2],
- 'padding-left': spacing[3],
- 'font-size': baseFontSize,
- 'line-height': baseLineHeight,
- '&:focus': {
- outline: outline.none[0],
- 'outline-offset': outline.none[1],
- '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
- '--tw-ring-offset-width': '0px',
- '--tw-ring-offset-color': '#fff',
- '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
- '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
- '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
- 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
- 'border-color': theme('colors.blue.600', colors.blue[600]),
- },
- },
-
- 'input::placeholder, textarea::placeholder': {
- color: theme('colors.gray.500', colors.gray[500]),
- opacity: '1',
- },
-
- '::-webkit-datetime-edit-fields-wrapper': {
- padding: '0',
- },
-
- // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
- // This sucks because users can't change line-height with a utility on date inputs now.
- // Reference: https://github.com/twbs/bootstrap/pull/31993
- '::-webkit-date-and-time-value': {
- 'min-height': '1.5em',
- },
-
- select: {
- 'background-image': `url("${svgToDataUri(
- ``
- )}")`,
- 'background-position': `right ${spacing[2]} center`,
- 'background-repeat': `no-repeat`,
- 'background-size': `1.5em 1.5em`,
- 'padding-right': spacing[10],
- 'color-adjust': `exact`,
- },
-
- '[multiple]': {
- 'background-image': 'initial',
- 'background-position': 'initial',
- 'background-repeat': 'unset',
- 'background-size': 'initial',
- 'padding-right': spacing[3],
- 'color-adjust': 'unset',
- },
-
- [`
+ appearance: 'none',
+ 'background-color': '#fff',
+ 'border-color': theme('colors.gray.500', colors.gray[500]),
+ 'border-width': borderWidth['DEFAULT'],
+ 'border-radius': borderRadius.none,
+ 'padding-top': spacing[2],
+ 'padding-right': spacing[3],
+ 'padding-bottom': spacing[2],
+ 'padding-left': spacing[3],
+ 'font-size': baseFontSize,
+ 'line-height': baseLineHeight,
+ '&:focus': {
+ outline: outline.none[0],
+ 'outline-offset': outline.none[1],
+ '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+ '--tw-ring-offset-width': '0px',
+ '--tw-ring-offset-color': '#fff',
+ '--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]),
+ '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+ 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
+ 'border-color': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.blue.600', colors.blue[600]),
+ },
+ },
+
+ 'input::placeholder, textarea::placeholder': {
+ color: theme('colors.gray.500', colors.gray[500]),
+ opacity: '1',
+ },
+
+ '::-webkit-datetime-edit-fields-wrapper': {
+ padding: '0',
+ },
+
+ // Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
+ // This sucks because users can't change line-height with a utility on date inputs now.
+ // Reference: https://github.com/twbs/bootstrap/pull/31993
+ '::-webkit-date-and-time-value': {
+ 'min-height': '1.5em',
+ },
+
+ select: {
+ 'background-image': `url("${svgToDataUri(
+ ``
+ )}")`,
+ 'background-position': `right ${spacing[2]} center`,
+ 'background-repeat': `no-repeat`,
+ 'background-size': `1.5em 1.5em`,
+ 'padding-right': spacing[10],
+ 'color-adjust': `exact`,
+ },
+
+ '[multiple]': {
+ 'background-image': 'initial',
+ 'background-position': 'initial',
+ 'background-repeat': 'unset',
+ 'background-size': 'initial',
+ 'padding-right': spacing[3],
+ 'color-adjust': 'unset',
+ },
+
+ [`
[type='checkbox'],
[type='radio']
`]: {
- appearance: 'none',
- padding: '0',
- 'color-adjust': 'exact',
- display: 'inline-block',
- 'vertical-align': 'middle',
- 'background-origin': 'border-box',
- 'user-select': 'none',
- 'flex-shrink': '0',
- height: spacing[4],
- width: spacing[4],
- color: theme('colors.blue.600', colors.blue[600]),
- 'background-color': '#fff',
- 'border-color': theme('colors.gray.500', colors.gray[500]),
- 'border-width': borderWidth['DEFAULT'],
- },
-
- [`[type='checkbox']`]: {
- 'border-radius': borderRadius['none'],
- },
-
- [`[type='radio']`]: {
- 'border-radius': '100%',
- },
-
- [`
+ appearance: 'none',
+ padding: '0',
+ 'color-adjust': 'exact',
+ display: 'inline-block',
+ 'vertical-align': 'middle',
+ 'background-origin': 'border-box',
+ 'user-select': 'none',
+ 'flex-shrink': '0',
+ height: spacing[4],
+ width: spacing[4],
+ color: theme('colors.blue.600', colors.blue[600]),
+ 'background-color': '#fff',
+ 'border-color': theme('colors.gray.500', colors.gray[500]),
+ 'border-width': borderWidth['DEFAULT'],
+ },
+
+ [`[type='checkbox']`]: {
+ 'border-radius': borderRadius['none'],
+ },
+
+ [`[type='radio']`]: {
+ 'border-radius': '100%',
+ },
+
+ [`
[type='checkbox']:focus,
[type='radio']:focus
`]: {
- outline: outline.none[0],
- 'outline-offset': outline.none[1],
- '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
- '--tw-ring-offset-width': '2px',
- '--tw-ring-offset-color': '#fff',
- '--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
- '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
- '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
- 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
- 'border-color': theme('colors.gray.500', colors.gray[500]),
- },
-
- [`
+ outline: outline.none[0],
+ 'outline-offset': outline.none[1],
+ '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+ '--tw-ring-offset-width': '2px',
+ '--tw-ring-offset-color': '#fff',
+ '--tw-ring-color': pluginConfiguration.colors && pluginConfiguration.colors.ringColor || theme('colors.blue.600', colors.blue[600]),
+ '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+ 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
+ 'border-color': pluginConfiguration.colors && pluginConfiguration.colors.borderColor || theme('colors.gray.500', colors.gray[500]),
+ },
+
+ [`
[type='checkbox']:checked,
[type='radio']:checked
`]: {
- 'border-color': `transparent`,
- 'background-color': `currentColor`,
- 'background-size': `100% 100%`,
- 'background-position': `center`,
- 'background-repeat': `no-repeat`,
- },
-
- [`[type='checkbox']:checked`]: {
- 'background-image': `url("${svgToDataUri(
- ``
- )}")`,
- },
-
- [`[type='radio']:checked`]: {
- 'background-image': `url("${svgToDataUri(
- ``
- )}")`,
- },
-
- [`
+ 'border-color': `transparent`,
+ 'background-color': `currentColor`,
+ 'background-size': `100% 100%`,
+ 'background-position': `center`,
+ 'background-repeat': `no-repeat`,
+ },
+
+ [`[type='checkbox']:checked`]: {
+ 'background-image': `url("${svgToDataUri(
+ ``
+ )}")`,
+ },
+
+ [`[type='radio']:checked`]: {
+ 'background-image': `url("${svgToDataUri(
+ ``
+ )}")`,
+ },
+
+ [`
[type='checkbox']:checked:hover,
[type='checkbox']:checked:focus,
[type='radio']:checked:hover,
[type='radio']:checked:focus
`]: {
- 'border-color': 'transparent',
- 'background-color': 'currentColor',
- },
-
- [`[type='checkbox']:indeterminate`]: {
- 'background-image': `url("${svgToDataUri(
- ``
- )}")`,
- 'border-color': `transparent`,
- 'background-color': `currentColor`,
- 'background-size': `100% 100%`,
- 'background-position': `center`,
- 'background-repeat': `no-repeat`,
- },
-
- [`
+ 'border-color': 'transparent',
+ 'background-color': 'currentColor',
+ },
+
+ [`[type='checkbox']:indeterminate`]: {
+ 'background-image': `url("${svgToDataUri(
+ ``
+ )}")`,
+ 'border-color': `transparent`,
+ 'background-color': `currentColor`,
+ 'background-size': `100% 100%`,
+ 'background-position': `center`,
+ 'background-repeat': `no-repeat`,
+ },
+
+ [`
[type='checkbox']:indeterminate:hover,
[type='checkbox']:indeterminate:focus
`]: {
- 'border-color': 'transparent',
- 'background-color': 'currentColor',
- },
-
- [`[type='file']`]: {
- background: 'unset',
- 'border-color': 'inherit',
- 'border-width': '0',
- 'border-radius': '0',
- padding: '0',
- 'font-size': 'unset',
- 'line-height': 'inherit',
- },
-
- [`[type='file']:focus`]: {
- outline: `1px solid ButtonText`,
- outline: `1px auto -webkit-focus-ring-color`,
- },
+ 'border-color': 'transparent',
+ 'background-color': 'currentColor',
+ },
+
+ [`[type='file']`]: {
+ background: 'unset',
+ 'border-color': 'inherit',
+ 'border-width': '0',
+ 'border-radius': '0',
+ padding: '0',
+ 'font-size': 'unset',
+ 'line-height': 'inherit',
+ },
+
+ [`[type='file']:focus`]: {
+ outline: `1px solid ButtonText`,
+ outline: `1px auto -webkit-focus-ring-color`,
+ },
+ })
})
-})
+}
module.exports = forms