Skip to content

Commit 5f18069

Browse files
committed
Update README.md
1 parent fbfe0ee commit 5f18069

File tree

1 file changed

+35
-21
lines changed

1 file changed

+35
-21
lines changed

README.md

+35-21
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,41 @@ module.exports = {
3737

3838
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
3939

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.
40+
There's currently two options you can choose in how we we add basic utility-friendly form styles:
41+
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
44+
45+
```
46+
plugins: [
47+
require("@tailwindcss/forms")({
48+
strategy: 'class',
49+
}),
50+
],
51+
```
52+
53+
| Base | Class |
54+
| ------------------------- | ------------------ |
55+
| `[type='text']` | `form-input` |
56+
| `[type='email']` | `form-input` |
57+
| `[type='url']` | `form-input` |
58+
| `[type='password']` | `form-input` |
59+
| `[type='number']` | `form-input` |
60+
| `[type='date']` | `form-input` |
61+
| `[type='datetime-local']` | `form-input` |
62+
| `[type='month']` | `form-input` |
63+
| `[type='search']` | `form-input` |
64+
| `[type='tel']` | `form-input` |
65+
| `[type='time']` | `form-input` |
66+
| `[type='week']` | `form-input` |
67+
| `[multiple]` | `form-multiselect` |
68+
| `textarea` | `form-textarea` |
69+
| `select` | `form-select` |
70+
| `[type='checkbox']` | `form-checkbox` |
71+
| `[type='radio']` | `form-radio` |
72+
| `[type='file']` | `form-file` |
73+
74+
**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.
6175

6276
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:
6377

0 commit comments

Comments
 (0)