Skip to content

Commit ab4790d

Browse files
adamwathanadamwathan
committed
Add classes to kitchen sink for testing
1 parent 456cfd1 commit ab4790d

File tree

1 file changed

+44
-22
lines changed

1 file changed

+44
-22
lines changed

‎kitchen-sink.html

+44-22
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)