Skip to content

Commit 39f6a3d

Browse files
adamwathanadamwathan
committed
Merge branch 'chasegiunta-master'
2 parents 571d9d7 + 2779a67 commit 39f6a3d

File tree

3 files changed

+346
-214
lines changed

3 files changed

+346
-214
lines changed

‎README.md

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ module.exports = {
3131
}
3232
```
3333

34-
## Usage
34+
## Basic usage
3535

3636
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
3737

@@ -72,3 +72,52 @@ Every element has been normalized/reset to a simple visually consistent style th
7272
```
7373

7474
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:
81+
82+
```js
83+
// tailwind.config.js
84+
plugins: [
85+
require("@tailwindcss/forms")({
86+
strategy: 'class',
87+
}),
88+
],
89+
```
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:
92+
93+
```html
94+
<input type="email" class="form-input px-4 py-3 rounded-full">
95+
96+
<select class="form-select px-4 py-3 rounded-full">
97+
<!-- ... -->
98+
</select>
99+
100+
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
101+
```
102+
103+
Here is a complete table of the provided `form-*` classes for reference:
104+
105+
| Base | Class |
106+
| ------------------------- | ------------------ |
107+
| `[type='text']` | `form-input` |
108+
| `[type='email']` | `form-input` |
109+
| `[type='url']` | `form-input` |
110+
| `[type='password']` | `form-input` |
111+
| `[type='number']` | `form-input` |
112+
| `[type='date']` | `form-input` |
113+
| `[type='datetime-local']` | `form-input` |
114+
| `[type='month']` | `form-input` |
115+
| `[type='search']` | `form-input` |
116+
| `[type='tel']` | `form-input` |
117+
| `[type='time']` | `form-input` |
118+
| `[type='week']` | `form-input` |
119+
| `textarea` | `form-textarea` |
120+
| `select` | `form-select` |
121+
| `select[multiple]` | `form-multiselect` |
122+
| `[type='checkbox']` | `form-checkbox` |
123+
| `[type='radio']` | `form-radio` |

‎kitchen-sink.html

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,73 +20,95 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
2020
<div class="grid grid-cols-1 gap-6">
2121
<label class="block">
2222
<span class="text-gray-700">Input (text)</span>
23-
<input type="text" class="mt-1 block w-full" placeholder="john@example.com" />
23+
<input
24+
type="text"
25+
class="form-input mt-1 block w-full"
26+
placeholder="john@example.com"
27+
/>
2428
</label>
2529
<label class="block">
2630
<span class="text-gray-700">Input (email)</span>
27-
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
31+
<input
32+
type="email"
33+
class="form-input mt-1 block w-full"
34+
placeholder="john@example.com"
35+
/>
2836
</label>
2937
<label class="block">
3038
<span class="text-gray-700">Input (email, multiple)</span>
3139
<input
3240
type="email"
3341
multiple
34-
class="mt-1 block w-full"
42+
class="form-input mt-1 block w-full"
3543
placeholder="john@example.com"
3644
/>
3745
</label>
3846
<label class="block">
3947
<span class="text-gray-700">Input (password)</span>
40-
<input type="password" class="mt-1 block w-full" placeholder="john@example.com" />
48+
<input
49+
type="password"
50+
class="form-input mt-1 block w-full"
51+
placeholder="john@example.com"
52+
/>
4153
</label>
4254
<label class="block">
4355
<span class="text-gray-700">Input (date)</span>
44-
<input type="date" class="mt-1 block w-full" />
56+
<input type="date" class="form-input mt-1 block w-full" />
4557
</label>
4658
<label class="block">
4759
<span class="text-gray-700">Input (datetime-local)</span>
48-
<input type="datetime-local" class="mt-1 block w-full" />
60+
<input type="datetime-local" class="form-input mt-1 block w-full" />
4961
</label>
5062
<label class="block">
5163
<span class="text-gray-700">Input (month)</span>
52-
<input type="month" class="mt-1 block w-full" />
64+
<input type="month" class="form-input mt-1 block w-full" />
5365
</label>
5466
<label class="block">
5567
<span class="text-gray-700">Input (number)</span>
56-
<input type="number" class="mt-1 block w-full" />
68+
<input type="number" class="form-input mt-1 block w-full" />
5769
</label>
5870
<label class="block">
5971
<span class="text-gray-700">Input (search)</span>
60-
<input type="search" class="mt-1 block w-full" />
72+
<input type="search" class="form-input mt-1 block w-full" />
6173
</label>
6274
<label class="block">
6375
<span class="text-gray-700">Input (time)</span>
64-
<input type="time" class="mt-1 block w-full" />
76+
<input type="time" class="form-input mt-1 block w-full" />
6577
</label>
6678
<label class="block">
6779
<span class="text-gray-700">Input (week)</span>
68-
<input type="week" class="mt-1 block w-full" />
80+
<input type="week" class="form-input mt-1 block w-full" />
6981
</label>
7082
</div>
7183
<div class="grid grid-cols-1 gap-6">
7284
<label class="block">
7385
<span class="text-gray-700">Input (tel)</span>
74-
<input type="tel" multiple class="mt-1 block w-full" placeholder="john@example.com" />
86+
<input
87+
type="tel"
88+
multiple
89+
class="form-input mt-1 block w-full"
90+
placeholder="john@example.com"
91+
/>
7592
</label>
7693
<label class="block">
7794
<span class="text-gray-700">Input (url)</span>
78-
<input type="url" multiple class="mt-1 block w-full" placeholder="john@example.com" />
95+
<input
96+
type="url"
97+
multiple
98+
class="form-input mt-1 block w-full"
99+
placeholder="john@example.com"
100+
/>
79101
</label>
80102
<label class="block">
81103
<span class="text-gray-700">Select</span>
82-
<select class="block w-full mt-1">
104+
<select class="form-select block w-full mt-1">
83105
<option>Option 1</option>
84106
<option>Option 2</option>
85107
</select>
86108
</label>
87109
<label class="block">
88110
<span class="text-gray-700">Select (multiple)</span>
89-
<select class="block w-full mt-1" multiple="">
111+
<select class="form-multiselect block w-full mt-1" multiple="">
90112
<option>Option 1</option>
91113
<option>Option 2</option>
92114
<option>Option 3</option>
@@ -97,7 +119,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
97119
<label class="block">
98120
<span class="text-gray-700">Textarea</span>
99121
<textarea
100-
class="mt-1 block w-full h-24"
122+
class="form-textarea mt-1 block w-full h-24"
101123
rows="3"
102124
placeholder="Enter some long form content."
103125
></textarea>
@@ -107,19 +129,19 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
107129
<div class="mt-2">
108130
<div>
109131
<label class="inline-flex items-center">
110-
<input type="checkbox" checked />
132+
<input class="form-checkbox" type="checkbox" checked />
111133
<span class="ml-2">Option 1</span>
112134
</label>
113135
</div>
114136
<div>
115137
<label class="inline-flex items-center">
116-
<input type="checkbox" />
138+
<input class="form-checkbox" type="checkbox" />
117139
<span class="ml-2">Option 2</span>
118140
</label>
119141
</div>
120142
<div>
121143
<label class="inline-flex items-center">
122-
<input type="checkbox" />
144+
<input class="form-checkbox" type="checkbox" />
123145
<span class="ml-2">Option 3</span>
124146
</label>
125147
</div>
@@ -130,19 +152,19 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
130152
<div class="mt-2">
131153
<div>
132154
<label class="inline-flex items-center">
133-
<input type="radio" checked name="radio-direct" value="1" />
155+
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
134156
<span class="ml-2">Option 1</span>
135157
</label>
136158
</div>
137159
<div>
138160
<label class="inline-flex items-center">
139-
<input type="radio" name="radio-direct" value="2" />
161+
<input class="form-radio" type="radio" name="radio-direct" value="2" />
140162
<span class="ml-2">Option 2</span>
141163
</label>
142164
</div>
143165
<div>
144166
<label class="inline-flex items-center">
145-
<input type="radio" name="radio-direct" value="3" />
167+
<input class="form-radio" type="radio" name="radio-direct" value="3" />
146168
<span class="ml-2">Option 3</span>
147169
</label>
148170
</div>

0 commit comments

Comments
 (0)