You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+56-22
Original file line number
Diff line number
Diff line change
@@ -31,16 +31,53 @@ module.exports = {
31
31
}
32
32
```
33
33
34
-
## Usage
34
+
## Basic usage
35
35
36
36
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
37
37
38
38
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
39
39
40
-
There's currently two options you can choose in how we we add basic utility-friendly form styles:
40
+
Currently we add basic utility-friendly form styles for the following form element types:
41
+
42
+
-`input[type='text']`
43
+
-`input[type='password']`
44
+
-`input[type='email']`
45
+
-`input[type='number']`
46
+
-`input[type='url']`
47
+
-`input[type='date']`
48
+
-`input[type='datetime-local']`
49
+
-`input[type='month']`
50
+
-`input[type='week']`
51
+
-`input[type='time']`
52
+
-`input[type='search']`
53
+
-`input[type='tel']`
54
+
-`input[type='checkbox']`
55
+
-`input[type='radio']`
56
+
-`select`
57
+
-`select[multiple]`
58
+
-`textarea`
59
+
60
+
**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example.
41
61
42
-
-`base` - The default selector strategy
43
-
-`class` - Requires a `form-` class to be applied to the form element in order for styles to be applied
62
+
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
63
+
64
+
```html
65
+
<!-- You can actually customize padding on a select element now: -->
66
+
<selectclass="px-4 py-3 rounded-full">
67
+
<!-- ... -->
68
+
</select>
69
+
70
+
<!-- Or change a checkbox color using text color utilities: -->
More customization examples and best practices coming soon.
75
+
76
+
### Using classes instead of element selectors
77
+
78
+
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.
79
+
80
+
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:
44
81
45
82
```js
46
83
// tailwind.config.js
@@ -51,6 +88,20 @@ plugins: [
51
88
],
52
89
```
53
90
91
+
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:
**Note that for text inputs, when using the default `base` strategy, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example.
76
-
77
-
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
78
-
79
-
```html
80
-
<!-- You can actually customize padding on a select element now: -->
81
-
<selectclass="px-4 py-3 rounded-full">
82
-
<!-- ... -->
83
-
</select>
84
-
85
-
<!-- Or change a checkbox color using text color utilities: -->
0 commit comments