Skip to content

Commit 12c53c3

Browse files
adamwathanadamwathan
committed
Update demo to use v3
1 parent 61902f6 commit 12c53c3

File tree

4 files changed

+167
-33
lines changed

4 files changed

+167
-33
lines changed

‎index.html‎

Lines changed: 155 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
<meta charset="UTF-8" />
44
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
55
<title>@tailwindcss/forms examples</title>
6-
7-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/base.min.css" />
8-
<link rel="stylesheet" href="/dist/forms.min.css" />
9-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/components.min.css" />
10-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/utilities.min.css" />
6+
<link rel="stylesheet" href="/dist/tailwind.css" />
117
</head>
128
<body>
139
<div class="antialiased text-gray-900 px-6">
@@ -76,29 +72,61 @@ <h2 class="text-2xl font-bold">Simple</h2>
7672
<span class="text-gray-700">Full name</span>
7773
<input
7874
type="text"
79-
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"
75+
class="
76+
mt-1
77+
block
78+
w-full
79+
rounded-md
80+
border-gray-300
81+
shadow-sm
82+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
83+
"
8084
placeholder=""
8185
/>
8286
</label>
8387
<label class="block">
8488
<span class="text-gray-700">Email address</span>
8589
<input
8690
type="email"
87-
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"
91+
class="
92+
mt-1
93+
block
94+
w-full
95+
rounded-md
96+
border-gray-300
97+
shadow-sm
98+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
99+
"
88100
placeholder="john@example.com"
89101
/>
90102
</label>
91103
<label class="block">
92104
<span class="text-gray-700">When is your event?</span>
93105
<input
94106
type="date"
95-
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"
107+
class="
108+
mt-1
109+
block
110+
w-full
111+
rounded-md
112+
border-gray-300
113+
shadow-sm
114+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
115+
"
96116
/>
97117
</label>
98118
<label class="block">
99119
<span class="text-gray-700">What type of event is it?</span>
100120
<select
101-
class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
121+
class="
122+
block
123+
w-full
124+
mt-1
125+
rounded-md
126+
border-gray-300
127+
shadow-sm
128+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
129+
"
102130
>
103131
<option>Corporate event</option>
104132
<option>Wedding</option>
@@ -109,7 +137,15 @@ <h2 class="text-2xl font-bold">Simple</h2>
109137
<label class="block">
110138
<span class="text-gray-700">Additional details</span>
111139
<textarea
112-
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"
140+
class="
141+
mt-1
142+
block
143+
w-full
144+
rounded-md
145+
border-gray-300
146+
shadow-sm
147+
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
148+
"
113149
rows="3"
114150
></textarea>
115151
</label>
@@ -119,7 +155,17 @@ <h2 class="text-2xl font-bold">Simple</h2>
119155
<label class="inline-flex items-center">
120156
<input
121157
type="checkbox"
122-
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
158+
class="
159+
rounded
160+
border-gray-300
161+
text-indigo-600
162+
shadow-sm
163+
focus:border-indigo-300
164+
focus:ring
165+
focus:ring-offset-0
166+
focus:ring-indigo-200
167+
focus:ring-opacity-50
168+
"
123169
checked
124170
/>
125171
<span class="ml-2">Email me news and special offers</span>
@@ -138,29 +184,57 @@ <h2 class="text-2xl font-bold">Underline</h2>
138184
<span class="text-gray-700">Full name</span>
139185
<input
140186
type="text"
141-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
187+
class="
188+
mt-0
189+
block
190+
w-full
191+
px-0.5
192+
border-0 border-b-2 border-gray-200
193+
focus:ring-0 focus:border-black
194+
"
142195
placeholder=""
143196
/>
144197
</label>
145198
<label class="block">
146199
<span class="text-gray-700">Email address</span>
147200
<input
148201
type="email"
149-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
202+
class="
203+
mt-0
204+
block
205+
w-full
206+
px-0.5
207+
border-0 border-b-2 border-gray-200
208+
focus:ring-0 focus:border-black
209+
"
150210
placeholder="john@example.com"
151211
/>
152212
</label>
153213
<label class="block">
154214
<span class="text-gray-700">When is your event?</span>
155215
<input
156216
type="date"
157-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
217+
class="
218+
mt-0
219+
block
220+
w-full
221+
px-0.5
222+
border-0 border-b-2 border-gray-200
223+
focus:ring-0 focus:border-black
224+
"
158225
/>
159226
</label>
160227
<label class="block">
161228
<span class="text-gray-700">What type of event is it?</span>
162229
<select
163-
class="block w-full mt-0 px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
230+
class="
231+
block
232+
w-full
233+
mt-0
234+
px-0.5
235+
border-0 border-b-2 border-gray-200
236+
focus:ring-0 focus:border-black
237+
"
164238
>
165239
<option>Corporate event</option>
166240
<option>Wedding</option>
@@ -171,7 +245,14 @@ <h2 class="text-2xl font-bold">Underline</h2>
171245
<label class="block">
172246
<span class="text-gray-700">Additional details</span>
173247
<textarea
174-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
248+
class="
249+
mt-0
250+
block
251+
w-full
252+
px-0.5
253+
border-0 border-b-2 border-gray-200
254+
focus:ring-0 focus:border-black
255+
"
175256
rows="2"
176257
></textarea>
177258
</label>
@@ -181,7 +262,11 @@ <h2 class="text-2xl font-bold">Underline</h2>
181262
<label class="inline-flex items-center">
182263
<input
183264
type="checkbox"
184-
class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
265+
class="
266+
border-gray-300 border-2
267+
text-black
268+
focus:border-gray-300 focus:ring-black
269+
"
185270
/>
186271
<span class="ml-2">Email me news and special offers</span>
187272
</label>
@@ -199,29 +284,61 @@ <h2 class="text-2xl font-bold">Solid</h2>
199284
<span class="text-gray-700">Full name</span>
200285
<input
201286
type="text"
202-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
287+
class="
288+
mt-1
289+
block
290+
w-full
291+
rounded-md
292+
bg-gray-100
293+
border-transparent
294+
focus:border-gray-500 focus:bg-white focus:ring-0
295+
"
203296
placeholder=""
204297
/>
205298
</label>
206299
<label class="block">
207300
<span class="text-gray-700">Email address</span>
208301
<input
209302
type="email"
210-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
303+
class="
304+
mt-1
305+
block
306+
w-full
307+
rounded-md
308+
bg-gray-100
309+
border-transparent
310+
focus:border-gray-500 focus:bg-white focus:ring-0
311+
"
211312
placeholder="john@example.com"
212313
/>
213314
</label>
214315
<label class="block">
215316
<span class="text-gray-700">When is your event?</span>
216317
<input
217318
type="date"
218-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
319+
class="
320+
mt-1
321+
block
322+
w-full
323+
rounded-md
324+
bg-gray-100
325+
border-transparent
326+
focus:border-gray-500 focus:bg-white focus:ring-0
327+
"
219328
/>
220329
</label>
221330
<label class="block">
222331
<span class="text-gray-700">What type of event is it?</span>
223332
<select
224-
class="block w-full mt-1 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
333+
class="
334+
block
335+
w-full
336+
mt-1
337+
rounded-md
338+
bg-gray-100
339+
border-transparent
340+
focus:border-gray-500 focus:bg-white focus:ring-0
341+
"
225342
>
226343
<option>Corporate event</option>
227344
<option>Wedding</option>
@@ -232,7 +349,15 @@ <h2 class="text-2xl font-bold">Solid</h2>
232349
<label class="block">
233350
<span class="text-gray-700">Additional details</span>
234351
<textarea
235-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
352+
class="
353+
mt-1
354+
block
355+
w-full
356+
rounded-md
357+
bg-gray-100
358+
border-transparent
359+
focus:border-gray-500 focus:bg-white focus:ring-0
360+
"
236361
rows="3"
237362
></textarea>
238363
</label>
@@ -242,7 +367,14 @@ <h2 class="text-2xl font-bold">Solid</h2>
242367
<label class="inline-flex items-center">
243368
<input
244369
type="checkbox"
245-
class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 text-gray-700 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
370+
class="
371+
rounded
372+
bg-gray-200
373+
border-transparent
374+
focus:border-transparent focus:bg-gray-200
375+
text-gray-700
376+
focus:ring-1 focus:ring-offset-2 focus:ring-gray-500
377+
"
246378
/>
247379
<span class="ml-2">Email me news and special offers</span>
248380
</label>

‎kitchen-sink.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
<meta charset="UTF-8" />
44
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
55
<title>@tailwindcss/forms Kitchen Sink</title>
6-
7-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/base.min.css" />
8-
<link rel="stylesheet" href="/dist/forms.min.css" />
9-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/components.min.css" />
10-
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/utilities.min.css" />
6+
<link rel="stylesheet" href="/dist/tailwind.css" />
117
</head>
128
<body>
139
<div class="antialiased text-gray-900 px-6">

‎package.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,11 @@
1616
"scripts": {
1717
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
1818
"serve": "live-server .",
19-
"watch": "chokidar \"./src/**/*.js\" -c \"npm run build\"",
20-
"build": "node scripts/build.js",
21-
"prepublishOnly": "npm run build"
19+
"watch": "npm run build -- -w",
20+
"build": "tailwindcss -o dist/tailwind.css"
2221
},
2322
"peerDependencies": {
24-
"tailwindcss": ">=2.0.0"
23+
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
2524
},
2625
"devDependencies": {
2726
"autoprefixer": "^10.0.2",
@@ -30,7 +29,7 @@
3029
"concurrently": "^5.3.0",
3130
"live-server": "^1.2.1",
3231
"postcss": "^8.1.7",
33-
"tailwindcss": "insiders"
32+
"tailwindcss": "next"
3433
},
3534
"dependencies": {
3635
"mini-svg-data-uri": "^1.2.3"

‎tailwind.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
content: ['./index.html', './kitchen-sink.html'],
3+
theme: {
4+
extend: {},
5+
},
6+
plugins: [require('./src')],
7+
}

0 commit comments

Comments
 (0)