Generate both global styles and classes by default (tailwindlabs#71)

* feat(option): allow both strategies

* feat: base and class by default

* Refactor

* Update changelog

* Rework readme

Co-authored-by: Jordan Pittman <[email protected]>
Co-authored-by: Jonathan Reinink <[email protected]>

Author: 3 people

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
 

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 `<div>`, look like a form element.
 
 ```html
 <input type="email" class="form-input px-4 py-3 rounded-full">
@@ -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.

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