tailwindcss-forms-style 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/ISSUE_TEMPLATE/1.bug_report.yml +38 -0
- package/.github/ISSUE_TEMPLATE/config.yml +11 -0
- package/.github/workflows/prepare-release.yml +56 -0
- package/.github/workflows/release-insiders.yml +42 -0
- package/.github/workflows/release.yml +42 -0
- package/CHANGELOG.md +201 -0
- package/LICENSE +21 -0
- package/README.md +142 -0
- package/index.html +255 -0
- package/kitchen-sink.html +222 -0
- package/package.json +44 -0
- package/scripts/release-channel.js +18 -0
- package/scripts/release-notes.js +21 -0
- package/src/index.d.ts +9 -0
- package/src/index.js +368 -0
- package/tailwind.config.js +9 -0
package/index.html
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>tailwindcss-forms-style examples</title>
|
|
7
|
+
<link rel="stylesheet" href="/dist/tailwind.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="px-6 text-gray-900 antialiased">
|
|
11
|
+
<div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">
|
|
12
|
+
<div class="py-8">
|
|
13
|
+
<h1 class="text-4xl font-bold">tailwindcss-forms-style examples</h1>
|
|
14
|
+
<p class="mt-2 text-lg text-gray-600">
|
|
15
|
+
An opinionated form reset designed to make form elements easy to style with utility
|
|
16
|
+
classes.
|
|
17
|
+
</p>
|
|
18
|
+
<div class="mt-4 flex space-x-4">
|
|
19
|
+
<a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"
|
|
20
|
+
>Documentation</a
|
|
21
|
+
>
|
|
22
|
+
<a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="py-12">
|
|
26
|
+
<h2 class="text-2xl font-bold">Unstyled</h2>
|
|
27
|
+
<p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>
|
|
28
|
+
<div class="mt-8 max-w-md">
|
|
29
|
+
<div class="grid grid-cols-1 gap-6">
|
|
30
|
+
<label class="block">
|
|
31
|
+
<span class="text-gray-700">Full name</span>
|
|
32
|
+
<input type="text" class="mt-1 block w-full" placeholder="" />
|
|
33
|
+
</label>
|
|
34
|
+
<label class="block">
|
|
35
|
+
<span class="text-gray-700">Email address</span>
|
|
36
|
+
<input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
|
|
37
|
+
</label>
|
|
38
|
+
<label class="block">
|
|
39
|
+
<span class="text-gray-700">When is your event?</span>
|
|
40
|
+
<input type="date" class="mt-1 block w-full" />
|
|
41
|
+
</label>
|
|
42
|
+
<label class="block">
|
|
43
|
+
<span class="text-gray-700">What type of event is it?</span>
|
|
44
|
+
<select class="mt-1 block w-full">
|
|
45
|
+
<option>Corporate event</option>
|
|
46
|
+
<option>Wedding</option>
|
|
47
|
+
<option>Birthday</option>
|
|
48
|
+
<option>Other</option>
|
|
49
|
+
</select>
|
|
50
|
+
</label>
|
|
51
|
+
<label class="block">
|
|
52
|
+
<span class="text-gray-700">Additional details</span>
|
|
53
|
+
<textarea class="mt-1 block w-full" rows="3"></textarea>
|
|
54
|
+
</label>
|
|
55
|
+
<div class="block">
|
|
56
|
+
<div class="mt-2">
|
|
57
|
+
<div>
|
|
58
|
+
<label class="inline-flex items-center">
|
|
59
|
+
<input type="checkbox" checked />
|
|
60
|
+
<span class="ml-2">Email me news and special offers</span>
|
|
61
|
+
</label>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="py-12">
|
|
69
|
+
<h2 class="text-2xl font-bold">Simple</h2>
|
|
70
|
+
<div class="mt-8 max-w-md">
|
|
71
|
+
<div class="grid grid-cols-1 gap-6">
|
|
72
|
+
<label class="block">
|
|
73
|
+
<span class="text-gray-700">Full name</span>
|
|
74
|
+
<input
|
|
75
|
+
type="text"
|
|
76
|
+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
77
|
+
placeholder=""
|
|
78
|
+
/>
|
|
79
|
+
</label>
|
|
80
|
+
<label class="block">
|
|
81
|
+
<span class="text-gray-700">Email address</span>
|
|
82
|
+
<input
|
|
83
|
+
type="email"
|
|
84
|
+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
85
|
+
placeholder="john@example.com"
|
|
86
|
+
/>
|
|
87
|
+
</label>
|
|
88
|
+
<label class="block">
|
|
89
|
+
<span class="text-gray-700">When is your event?</span>
|
|
90
|
+
<input
|
|
91
|
+
type="date"
|
|
92
|
+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
93
|
+
/>
|
|
94
|
+
</label>
|
|
95
|
+
<label class="block">
|
|
96
|
+
<span class="text-gray-700">What type of event is it?</span>
|
|
97
|
+
<select
|
|
98
|
+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
99
|
+
>
|
|
100
|
+
<option>Corporate event</option>
|
|
101
|
+
<option>Wedding</option>
|
|
102
|
+
<option>Birthday</option>
|
|
103
|
+
<option>Other</option>
|
|
104
|
+
</select>
|
|
105
|
+
</label>
|
|
106
|
+
<label class="block">
|
|
107
|
+
<span class="text-gray-700">Additional details</span>
|
|
108
|
+
<textarea
|
|
109
|
+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
110
|
+
rows="3"
|
|
111
|
+
></textarea>
|
|
112
|
+
</label>
|
|
113
|
+
<div class="block">
|
|
114
|
+
<div class="mt-2">
|
|
115
|
+
<div>
|
|
116
|
+
<label class="inline-flex items-center">
|
|
117
|
+
<input
|
|
118
|
+
type="checkbox"
|
|
119
|
+
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"
|
|
120
|
+
checked
|
|
121
|
+
/>
|
|
122
|
+
<span class="ml-2">Email me news and special offers</span>
|
|
123
|
+
</label>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="py-12">
|
|
131
|
+
<h2 class="text-2xl font-bold">Underline</h2>
|
|
132
|
+
<div class="mt-8 max-w-md">
|
|
133
|
+
<div class="grid grid-cols-1 gap-6">
|
|
134
|
+
<label class="block">
|
|
135
|
+
<span class="text-gray-700">Full name</span>
|
|
136
|
+
<input
|
|
137
|
+
type="text"
|
|
138
|
+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
|
|
139
|
+
placeholder=""
|
|
140
|
+
/>
|
|
141
|
+
</label>
|
|
142
|
+
<label class="block">
|
|
143
|
+
<span class="text-gray-700">Email address</span>
|
|
144
|
+
<input
|
|
145
|
+
type="email"
|
|
146
|
+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
|
|
147
|
+
placeholder="john@example.com"
|
|
148
|
+
/>
|
|
149
|
+
</label>
|
|
150
|
+
<label class="block">
|
|
151
|
+
<span class="text-gray-700">When is your event?</span>
|
|
152
|
+
<input
|
|
153
|
+
type="date"
|
|
154
|
+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
|
|
155
|
+
/>
|
|
156
|
+
</label>
|
|
157
|
+
<label class="block">
|
|
158
|
+
<span class="text-gray-700">What type of event is it?</span>
|
|
159
|
+
<select
|
|
160
|
+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-10 focus:border-black focus:ring-0"
|
|
161
|
+
>
|
|
162
|
+
<option>Corporate event</option>
|
|
163
|
+
<option>Wedding</option>
|
|
164
|
+
<option>Birthday</option>
|
|
165
|
+
<option>Other</option>
|
|
166
|
+
</select>
|
|
167
|
+
</label>
|
|
168
|
+
<label class="block">
|
|
169
|
+
<span class="text-gray-700">Additional details</span>
|
|
170
|
+
<textarea
|
|
171
|
+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
|
|
172
|
+
rows="2"
|
|
173
|
+
></textarea>
|
|
174
|
+
</label>
|
|
175
|
+
<div class="block">
|
|
176
|
+
<div class="mt-2">
|
|
177
|
+
<div>
|
|
178
|
+
<label class="inline-flex items-center">
|
|
179
|
+
<input
|
|
180
|
+
type="checkbox"
|
|
181
|
+
class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
|
|
182
|
+
/>
|
|
183
|
+
<span class="ml-2">Email me news and special offers</span>
|
|
184
|
+
</label>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="py-12">
|
|
192
|
+
<h2 class="text-2xl font-bold">Solid</h2>
|
|
193
|
+
<div class="mt-8 max-w-md">
|
|
194
|
+
<div class="grid grid-cols-1 gap-6">
|
|
195
|
+
<label class="block">
|
|
196
|
+
<span class="text-gray-700">Full name</span>
|
|
197
|
+
<input
|
|
198
|
+
type="text"
|
|
199
|
+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
|
|
200
|
+
placeholder=""
|
|
201
|
+
/>
|
|
202
|
+
</label>
|
|
203
|
+
<label class="block">
|
|
204
|
+
<span class="text-gray-700">Email address</span>
|
|
205
|
+
<input
|
|
206
|
+
type="email"
|
|
207
|
+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
|
|
208
|
+
placeholder="john@example.com"
|
|
209
|
+
/>
|
|
210
|
+
</label>
|
|
211
|
+
<label class="block">
|
|
212
|
+
<span class="text-gray-700">When is your event?</span>
|
|
213
|
+
<input
|
|
214
|
+
type="date"
|
|
215
|
+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
|
|
216
|
+
/>
|
|
217
|
+
</label>
|
|
218
|
+
<label class="block">
|
|
219
|
+
<span class="text-gray-700">What type of event is it?</span>
|
|
220
|
+
<select
|
|
221
|
+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
|
|
222
|
+
>
|
|
223
|
+
<option>Corporate event</option>
|
|
224
|
+
<option>Wedding</option>
|
|
225
|
+
<option>Birthday</option>
|
|
226
|
+
<option>Other</option>
|
|
227
|
+
</select>
|
|
228
|
+
</label>
|
|
229
|
+
<label class="block">
|
|
230
|
+
<span class="text-gray-700">Additional details</span>
|
|
231
|
+
<textarea
|
|
232
|
+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
|
|
233
|
+
rows="3"
|
|
234
|
+
></textarea>
|
|
235
|
+
</label>
|
|
236
|
+
<div class="block">
|
|
237
|
+
<div class="mt-2">
|
|
238
|
+
<div>
|
|
239
|
+
<label class="inline-flex items-center">
|
|
240
|
+
<input
|
|
241
|
+
type="checkbox"
|
|
242
|
+
class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"
|
|
243
|
+
/>
|
|
244
|
+
<span class="ml-2">Email me news and special offers</span>
|
|
245
|
+
</label>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</body>
|
|
255
|
+
</html>
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>tailwindcss-forms-style Kitchen Sink</title>
|
|
7
|
+
<link rel="stylesheet" href="/dist/tailwind.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="px-6 text-gray-900 antialiased">
|
|
11
|
+
<div class="mx-auto max-w-xl py-12 md:max-w-4xl">
|
|
12
|
+
<h2 class="text-2xl font-bold">Reset styles</h2>
|
|
13
|
+
<p class="mt-2 text-lg text-gray-500">
|
|
14
|
+
These are form elements this plugin styles by default.
|
|
15
|
+
</p>
|
|
16
|
+
<div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
|
17
|
+
<div class="grid grid-cols-1 gap-6">
|
|
18
|
+
<label class="block">
|
|
19
|
+
<span class="text-gray-700">Input (text)</span>
|
|
20
|
+
<input
|
|
21
|
+
type="text"
|
|
22
|
+
class="form-input mt-1 block w-full"
|
|
23
|
+
placeholder="john@example.com"
|
|
24
|
+
/>
|
|
25
|
+
</label>
|
|
26
|
+
<label class="block">
|
|
27
|
+
<span class="text-gray-700">Input (email)</span>
|
|
28
|
+
<input
|
|
29
|
+
type="email"
|
|
30
|
+
class="form-input mt-1 block w-full"
|
|
31
|
+
placeholder="john@example.com"
|
|
32
|
+
/>
|
|
33
|
+
</label>
|
|
34
|
+
<label class="block">
|
|
35
|
+
<span class="text-gray-700">Input (email, multiple)</span>
|
|
36
|
+
<input
|
|
37
|
+
type="email"
|
|
38
|
+
multiple
|
|
39
|
+
class="form-input mt-1 block w-full"
|
|
40
|
+
placeholder="john@example.com"
|
|
41
|
+
/>
|
|
42
|
+
</label>
|
|
43
|
+
<label class="block">
|
|
44
|
+
<span class="text-gray-700">Input (password)</span>
|
|
45
|
+
<input
|
|
46
|
+
type="password"
|
|
47
|
+
class="form-input mt-1 block w-full"
|
|
48
|
+
placeholder="john@example.com"
|
|
49
|
+
/>
|
|
50
|
+
</label>
|
|
51
|
+
<label class="block">
|
|
52
|
+
<span class="text-gray-700">Input (date)</span>
|
|
53
|
+
<input type="date" class="form-input mt-1 block w-full" />
|
|
54
|
+
</label>
|
|
55
|
+
<label class="block">
|
|
56
|
+
<span class="text-gray-700">Input (datetime-local)</span>
|
|
57
|
+
<input type="datetime-local" class="form-input mt-1 block w-full" />
|
|
58
|
+
</label>
|
|
59
|
+
<label class="block">
|
|
60
|
+
<span class="text-gray-700">Input (month)</span>
|
|
61
|
+
<input type="month" class="form-input mt-1 block w-full" />
|
|
62
|
+
</label>
|
|
63
|
+
<label class="block">
|
|
64
|
+
<span class="text-gray-700">Input (number)</span>
|
|
65
|
+
<input type="number" class="form-input mt-1 block w-full" />
|
|
66
|
+
</label>
|
|
67
|
+
<label class="block">
|
|
68
|
+
<span class="text-gray-700">Input (search)</span>
|
|
69
|
+
<input type="search" class="form-input mt-1 block w-full" />
|
|
70
|
+
</label>
|
|
71
|
+
<label class="block">
|
|
72
|
+
<span class="text-gray-700">Input (time)</span>
|
|
73
|
+
<input type="time" class="form-input mt-1 block w-full" />
|
|
74
|
+
</label>
|
|
75
|
+
<label class="block">
|
|
76
|
+
<span class="text-gray-700">Input (week)</span>
|
|
77
|
+
<input type="week" class="form-input mt-1 block w-full" />
|
|
78
|
+
</label>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="grid grid-cols-1 gap-6">
|
|
81
|
+
<label class="block">
|
|
82
|
+
<span class="text-gray-700">Input (tel)</span>
|
|
83
|
+
<input
|
|
84
|
+
type="tel"
|
|
85
|
+
multiple
|
|
86
|
+
class="form-input mt-1 block w-full"
|
|
87
|
+
placeholder="john@example.com"
|
|
88
|
+
/>
|
|
89
|
+
</label>
|
|
90
|
+
<label class="block">
|
|
91
|
+
<span class="text-gray-700">Input (url)</span>
|
|
92
|
+
<input
|
|
93
|
+
type="url"
|
|
94
|
+
multiple
|
|
95
|
+
class="form-input mt-1 block w-full"
|
|
96
|
+
placeholder="john@example.com"
|
|
97
|
+
/>
|
|
98
|
+
</label>
|
|
99
|
+
<label class="block">
|
|
100
|
+
<span class="text-gray-700">Select</span>
|
|
101
|
+
<select class="form-select mt-1 block w-full">
|
|
102
|
+
<option>Option 1</option>
|
|
103
|
+
<option>Option 2</option>
|
|
104
|
+
</select>
|
|
105
|
+
</label>
|
|
106
|
+
<label class="block">
|
|
107
|
+
<span class="text-gray-700">Select (single, with size)</span>
|
|
108
|
+
<select class="form-select mt-1 block w-full" size="3">
|
|
109
|
+
<option>Option 1</option>
|
|
110
|
+
<option>Option 2</option>
|
|
111
|
+
<option>Option 3</option>
|
|
112
|
+
<option>Option 4</option>
|
|
113
|
+
<option>Option 5</option>
|
|
114
|
+
</select>
|
|
115
|
+
</label>
|
|
116
|
+
<label class="block">
|
|
117
|
+
<span class="text-gray-700">Select (multiple)</span>
|
|
118
|
+
<select class="form-multiselect mt-1 block w-full" multiple>
|
|
119
|
+
<option>Option 1</option>
|
|
120
|
+
<option>Option 2</option>
|
|
121
|
+
<option>Option 3</option>
|
|
122
|
+
<option>Option 4</option>
|
|
123
|
+
<option>Option 5</option>
|
|
124
|
+
</select>
|
|
125
|
+
</label>
|
|
126
|
+
<label class="block">
|
|
127
|
+
<span class="text-gray-700">Select (multiple, with size)</span>
|
|
128
|
+
<select class="form-multiselect mt-1 block w-full" multiple size="3">
|
|
129
|
+
<option>Option 1</option>
|
|
130
|
+
<option>Option 2</option>
|
|
131
|
+
<option>Option 3</option>
|
|
132
|
+
<option>Option 4</option>
|
|
133
|
+
<option>Option 5</option>
|
|
134
|
+
</select>
|
|
135
|
+
</label>
|
|
136
|
+
<label class="block">
|
|
137
|
+
<span class="text-gray-700">Textarea</span>
|
|
138
|
+
<textarea
|
|
139
|
+
class="form-textarea mt-1 block h-24 w-full"
|
|
140
|
+
rows="3"
|
|
141
|
+
placeholder="Enter some long form content."
|
|
142
|
+
></textarea>
|
|
143
|
+
</label>
|
|
144
|
+
<fieldset class="block">
|
|
145
|
+
<legend class="text-gray-700">Checkboxes</legend>
|
|
146
|
+
<div class="mt-2">
|
|
147
|
+
<div>
|
|
148
|
+
<label class="inline-flex items-center">
|
|
149
|
+
<input class="form-checkbox" type="checkbox" checked />
|
|
150
|
+
<span class="ml-2">Option 1</span>
|
|
151
|
+
</label>
|
|
152
|
+
</div>
|
|
153
|
+
<div>
|
|
154
|
+
<label class="inline-flex items-center">
|
|
155
|
+
<input class="form-checkbox" type="checkbox" />
|
|
156
|
+
<span class="ml-2">Option 2</span>
|
|
157
|
+
</label>
|
|
158
|
+
</div>
|
|
159
|
+
<div>
|
|
160
|
+
<label class="inline-flex items-center">
|
|
161
|
+
<input class="form-checkbox" type="checkbox" />
|
|
162
|
+
<span class="ml-2">Option 3</span>
|
|
163
|
+
</label>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</fieldset>
|
|
167
|
+
<fieldset class="block">
|
|
168
|
+
<legend class="text-gray-700">Radio Buttons</legend>
|
|
169
|
+
<div class="mt-2">
|
|
170
|
+
<div>
|
|
171
|
+
<label class="inline-flex items-center">
|
|
172
|
+
<input class="form-radio" type="radio" checked name="radio-direct" value="1" />
|
|
173
|
+
<span class="ml-2">Option 1</span>
|
|
174
|
+
</label>
|
|
175
|
+
</div>
|
|
176
|
+
<div>
|
|
177
|
+
<label class="inline-flex items-center">
|
|
178
|
+
<input class="form-radio" type="radio" name="radio-direct" value="2" />
|
|
179
|
+
<span class="ml-2">Option 2</span>
|
|
180
|
+
</label>
|
|
181
|
+
</div>
|
|
182
|
+
<div>
|
|
183
|
+
<label class="inline-flex items-center">
|
|
184
|
+
<input class="form-radio" type="radio" name="radio-direct" value="3" />
|
|
185
|
+
<span class="ml-2">Option 3</span>
|
|
186
|
+
</label>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</fieldset>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="mx-auto max-w-4xl py-12">
|
|
194
|
+
<h2 class="text-2xl font-bold">Untouched</h2>
|
|
195
|
+
<p class="mt-2 text-lg text-gray-500">
|
|
196
|
+
These are form elements we don't handle (yet?), but we use this to make sure we haven't
|
|
197
|
+
accidentally styled them by mistake.
|
|
198
|
+
</p>
|
|
199
|
+
<div class="mt-8 grid grid-cols-2 items-start gap-6">
|
|
200
|
+
<div class="grid grid-cols-1 gap-6">
|
|
201
|
+
<label class="block">
|
|
202
|
+
<span class="text-gray-700">Input (range)</span>
|
|
203
|
+
<input type="range" class="mt-1 block w-full" />
|
|
204
|
+
</label>
|
|
205
|
+
<label class="block">
|
|
206
|
+
<span class="text-gray-700">Input (color)</span>
|
|
207
|
+
<input type="color" class="mt-1 block w-full" />
|
|
208
|
+
</label>
|
|
209
|
+
<label class="block">
|
|
210
|
+
<span class="text-gray-700">Input (file)</span>
|
|
211
|
+
<input type="file" class="mt-1 block w-full" />
|
|
212
|
+
</label>
|
|
213
|
+
<label class="block">
|
|
214
|
+
<span class="text-gray-700">Input (file, multiple)</span>
|
|
215
|
+
<input type="file" multiple class="mt-1 block w-full" />
|
|
216
|
+
</label>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</body>
|
|
222
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "tailwindcss-forms-style",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"main": "src/index.js",
|
|
5
|
+
"types": "src/index.d.ts",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
|
+
},
|
|
10
|
+
"prettier": {
|
|
11
|
+
"printWidth": 100,
|
|
12
|
+
"semi": false,
|
|
13
|
+
"singleQuote": true,
|
|
14
|
+
"trailingComma": "es5",
|
|
15
|
+
"plugins": [
|
|
16
|
+
"prettier-plugin-tailwindcss"
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
|
|
21
|
+
"serve": "live-server .",
|
|
22
|
+
"watch": "npm run build -- -w",
|
|
23
|
+
"build": "tailwindcss -o dist/tailwind.css",
|
|
24
|
+
"test": "exit 0",
|
|
25
|
+
"release-channel": "node ./scripts/release-channel.js",
|
|
26
|
+
"release-notes": "node ./scripts/release-notes.js",
|
|
27
|
+
"format": "prettier . --write"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"autoprefixer": "^10.4.6",
|
|
34
|
+
"concurrently": "^5.3.0",
|
|
35
|
+
"live-server": "^1.2.2",
|
|
36
|
+
"postcss": "^8.4.13",
|
|
37
|
+
"prettier": "^3.3.3",
|
|
38
|
+
"prettier-plugin-tailwindcss": "^0.6.8",
|
|
39
|
+
"tailwindcss": "^3.0.24"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"mini-svg-data-uri": "^1.2.3"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Given a version, figure out what the release channel is so that we can publish to the correct
|
|
2
|
+
// channel on npm.
|
|
3
|
+
//
|
|
4
|
+
// E.g.:
|
|
5
|
+
//
|
|
6
|
+
// 1.2.3 -> latest (default)
|
|
7
|
+
// 0.0.0-insiders.ffaa88 -> insiders
|
|
8
|
+
// 4.1.0-alpha.4 -> alpha
|
|
9
|
+
|
|
10
|
+
let version =
|
|
11
|
+
process.argv[2] || process.env.npm_package_version || require('../package.json').version
|
|
12
|
+
|
|
13
|
+
let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
|
|
14
|
+
if (match) {
|
|
15
|
+
console.log(match[1])
|
|
16
|
+
} else {
|
|
17
|
+
console.log('latest')
|
|
18
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Given a version, figure out what the release notes are so that we can use this to pre-fill the
|
|
2
|
+
// relase notes on a GitHub release for the current version.
|
|
3
|
+
|
|
4
|
+
let path = require('path')
|
|
5
|
+
let fs = require('fs')
|
|
6
|
+
|
|
7
|
+
let version =
|
|
8
|
+
process.argv[2] || process.env.npm_package_version || require('../package.json').version
|
|
9
|
+
|
|
10
|
+
let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
|
|
11
|
+
let match = new RegExp(
|
|
12
|
+
`## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
|
|
13
|
+
'g'
|
|
14
|
+
).exec(changelog)
|
|
15
|
+
|
|
16
|
+
if (match) {
|
|
17
|
+
let [, date, notes] = match
|
|
18
|
+
console.log(notes.trim())
|
|
19
|
+
} else {
|
|
20
|
+
console.log(`Placeholder release notes for version: v${version}`)
|
|
21
|
+
}
|