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'))
+ }
}
})