diff --git a/CHANGELOG.md b/CHANGELOG.md index 21bdcad..2e02609 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -Nothing yet! +### Changed + +- Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71)) ## [0.4.1] - 2022-03-02 diff --git a/README.md b/README.md index 3b88276..adf5f6a 100644 --- a/README.md +++ b/README.md @@ -67,22 +67,9 @@ Every element has been normalized/reset to a simple visually consistent style th More customization examples and best practices coming soon. -### Using classes instead of element selectors +### Using classes to style -Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. - -For situations where the default strategy doesn't work well with your project, you can use the `class` strategy to make all form styling _opt-in_ instead of applied globally: - -```js -// tailwind.config.js -plugins: [ - require("@tailwindcss/forms")({ - strategy: 'class', - }), -], -``` - -When using the `class` strategy, form elements do not receive any reset styles by default, and reset styles are added per element using a new set of `form-*` classes generated by the plugin: +In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `
`, look like a form element. ```html @@ -115,3 +102,23 @@ Here is a complete table of the provided `form-*` classes for reference: | `select[multiple]` | `form-multiselect` | | `[type='checkbox']` | `form-checkbox` | | `[type='radio']` | `form-radio` | + +### Using only global styles or only classes + +Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects. + +If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches. + +```js +// tailwind.config.js +plugins: [ + require("@tailwindcss/forms")({ + strategy: 'base', // only generate global styles + strategy: 'class', // only generate classes + }), +], +``` + +When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated. + +When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes. diff --git a/src/index.js b/src/index.js index d081e4b..ee60f72 100644 --- a/src/index.js +++ b/src/index.js @@ -5,9 +5,9 @@ const colors = require('tailwindcss/colors') const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base const { spacing, borderWidth, borderRadius } = defaultTheme -const forms = plugin.withOptions(function (options = { strategy: 'base' }) { +const forms = plugin.withOptions(function (options = { strategy: undefined }) { return function ({ addBase, addComponents, theme }) { - const strategy = options.strategy + const strategy = options.strategy === undefined ? ['base', 'class'] : [options.strategy] const rules = [ { @@ -283,20 +283,21 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) { }, ] - const strategyRules = rules + const getStrategyRules = (strategy) => rules .map((rule) => { - if (rule[strategy] === null) { - return null - } + if (rule[strategy] === null) return null return { [rule[strategy]]: rule.styles } }) .filter(Boolean) - ;({ - 'base': addBase, - 'class': addComponents - })[strategy](strategyRules) + if (strategy.includes('base')) { + addBase(getStrategyRules('base')) + } + + if (strategy.includes('class')) { + addComponents(getStrategyRules('class')) + } } })