Skip to content

Commit 5ec0726

Browse files
adamwathanadamwathan
committed
Update kitchen sink
1 parent f289a7b commit 5ec0726

File tree

2 files changed

+67
-34
lines changed

2 files changed

+67
-34
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ module.exports = {
3131

3232
## Usage
3333

34+
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
35+
3436
All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities.
3537

3638
Currently we add basic utility-friendly form styles for the following form element types:

‎index.html

Lines changed: 65 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,12 @@
1111
</head>
1212
<body>
1313
<div class="antialiased text-gray-900 px-6">
14-
<div class="max-w-2xl mx-auto py-12">
15-
<div class="grid grid-cols-2 gap-6 items-start">
14+
<div class="max-w-4xl mx-auto py-12">
15+
<h2 class="text-2xl font-bold">Styled</h2>
16+
<p class="mt-2 text-lg text-gray-500">
17+
These are form elements this plugin styles by default.
18+
</p>
19+
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
1620
<div class="grid grid-cols-1 gap-6">
1721
<label class="block">
1822
<span class="text-gray-700">Input (text)</span>
@@ -23,8 +27,17 @@
2327
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
2428
</label>
2529
<label class="block">
26-
<span class="text-gray-700">Input (range)</span>
27-
<input type="range" class="mt-1 block w-full" />
30+
<span class="text-gray-700">Input (email, multiple)</span>
31+
<input
32+
type="email"
33+
multiple
34+
class="mt-1 block w-full"
35+
placeholder="john@example.com"
36+
/>
37+
</label>
38+
<label class="block">
39+
<span class="text-gray-700">Input (password)</span>
40+
<input type="password" class="mt-1 block w-full" placeholder="john@example.com" />
2841
</label>
2942
<label class="block">
3043
<span class="text-gray-700">Input (date)</span>
@@ -54,22 +67,32 @@
5467
<span class="text-gray-700">Input (week)</span>
5568
<input type="week" class="mt-1 block w-full" />
5669
</label>
70+
</div>
71+
<div class="grid grid-cols-1 gap-6">
5772
<label class="block">
58-
<span class="text-gray-700">Input (email, multiple)</span>
59-
<input
60-
type="email"
61-
multiple
62-
class="mt-1 block w-full"
63-
placeholder="john@example.com"
64-
/>
73+
<span class="text-gray-700">Input (tel)</span>
74+
<input type="tel" multiple class="mt-1 block w-full" placeholder="john@example.com" />
6575
</label>
6676
<label class="block">
67-
<span class="text-gray-700">Input (file)</span>
68-
<input type="file" class="mt-1 block w-full" />
77+
<span class="text-gray-700">Input (url)</span>
78+
<input type="url" multiple class="mt-1 block w-full" placeholder="john@example.com" />
6979
</label>
7080
<label class="block">
71-
<span class="text-gray-700">Input (file)</span>
72-
<input type="file" multiple class="mt-1 block w-full" />
81+
<span class="text-gray-700">Select</span>
82+
<select class="block w-full mt-1">
83+
<option>Option 1</option>
84+
<option>Option 2</option>
85+
</select>
86+
</label>
87+
<label class="block">
88+
<span class="text-gray-700">Select (multiple)</span>
89+
<select class="block w-full h-24 mt-1" multiple="">
90+
<option>Option 1</option>
91+
<option>Option 2</option>
92+
<option>Option 3</option>
93+
<option>Option 4</option>
94+
<option>Option 5</option>
95+
</select>
7396
</label>
7497
<label class="block">
7598
<span class="text-gray-700">Textarea</span>
@@ -103,25 +126,6 @@
103126
</div>
104127
</div>
105128
</div>
106-
</div>
107-
<div class="grid grid-cols-1 gap-6">
108-
<label class="block">
109-
<span class="text-gray-700">Select</span>
110-
<select class="block w-full mt-1">
111-
<option>Option 1</option>
112-
<option>Option 2</option>
113-
</select>
114-
</label>
115-
<label class="block">
116-
<span class="text-gray-700">Multiselect</span>
117-
<select class="block w-full h-24 mt-1" multiple="">
118-
<option>Option 1</option>
119-
<option>Option 2</option>
120-
<option>Option 3</option>
121-
<option>Option 4</option>
122-
<option>Option 5</option>
123-
</select>
124-
</label>
125129
<div class="block">
126130
<span class="text-gray-700">Radio Buttons</span>
127131
<div class="mt-2">
@@ -148,6 +152,33 @@
148152
</div>
149153
</div>
150154
</div>
155+
<div class="max-w-4xl mx-auto py-12">
156+
<h2 class="text-2xl font-bold">Unstyled</h2>
157+
<p class="mt-2 text-lg text-gray-500">
158+
These are form elements we don't handle (yet?), but we use this to make sure we haven't
159+
accidentally styled them by mistake.
160+
</p>
161+
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
162+
<div class="grid grid-cols-1 gap-6">
163+
<label class="block">
164+
<span class="text-gray-700">Input (range)</span>
165+
<input type="range" class="mt-1 block w-full" />
166+
</label>
167+
<label class="block">
168+
<span class="text-gray-700">Input (color)</span>
169+
<input type="color" class="mt-1 block w-full" />
170+
</label>
171+
<label class="block">
172+
<span class="text-gray-700">Input (file)</span>
173+
<input type="file" class="mt-1 block w-full" />
174+
</label>
175+
<label class="block">
176+
<span class="text-gray-700">Input (file, multiple)</span>
177+
<input type="file" multiple class="mt-1 block w-full" />
178+
</label>
179+
</div>
180+
</div>
181+
</div>
151182
</div>
152183
</body>
153184
</html>

0 commit comments

Comments
 (0)