Skip to content

Commit 0571354

Browse files
hyunbinseoRobinMalfait
hyunbinseo
and
RobinMalfait
authored
chore: sort prettier classes with prettier (#169)
Sorted HTML classes using the official [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme) plugin. A CLI command has been added to format all files. --------- Co-authored-by: Robin Malfait <[email protected]>
1 parent e581f0e commit 0571354

File tree

6 files changed

+189
-85
lines changed

6 files changed

+189
-85
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ Every element has been normalized/reset to a simple visually consistent style th
5555

5656
```html
5757
<!-- You can actually customize padding on a select element now: -->
58-
<select class="px-4 py-3 rounded-full">
58+
<select class="rounded-full px-4 py-3">
5959
<!-- ... -->
6060
</select>
6161

@@ -70,9 +70,9 @@ More customization examples and best practices coming soon.
7070
In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
7171

7272
```html
73-
<input type="email" class="form-input px-4 py-3 rounded-full">
73+
<input type="email" class="form-input rounded-full px-4 py-3" />
7474

75-
<select class="form-select px-4 py-3 rounded-full">
75+
<select class="form-select rounded-full px-4 py-3">
7676
<!-- ... -->
7777
</select>
7878

‎index.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -7,8 +7,8 @@
77
<link rel="stylesheet" href="/dist/tailwind.css" />
88
</head>
99
<body>
10-
<div class="antialiased text-gray-900 px-6">
11-
<div class="max-w-xl mx-auto py-12 divide-y md:max-w-4xl">
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">
1212
<div class="py-8">
1313
<h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
1414
<p class="mt-2 text-lg text-gray-600">
@@ -41,7 +41,7 @@ <h2 class="text-2xl font-bold">Unstyled</h2>
4141
</label>
4242
<label class="block">
4343
<span class="text-gray-700">What type of event is it?</span>
44-
<select class="block w-full mt-1">
44+
<select class="mt-1 block w-full">
4545
<option>Corporate event</option>
4646
<option>Wedding</option>
4747
<option>Birthday</option>
@@ -95,7 +95,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
9595
<label class="block">
9696
<span class="text-gray-700">What type of event is it?</span>
9797
<select
98-
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"
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"
9999
>
100100
<option>Corporate event</option>
101101
<option>Wedding</option>
@@ -116,7 +116,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
116116
<label class="inline-flex items-center">
117117
<input
118118
type="checkbox"
119-
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"
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"
120120
checked
121121
/>
122122
<span class="ml-2">Email me news and special offers</span>
@@ -135,29 +135,29 @@ <h2 class="text-2xl font-bold">Underline</h2>
135135
<span class="text-gray-700">Full name</span>
136136
<input
137137
type="text"
138-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
138+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
139139
placeholder=""
140140
/>
141141
</label>
142142
<label class="block">
143143
<span class="text-gray-700">Email address</span>
144144
<input
145145
type="email"
146-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
146+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
147147
placeholder="[email protected]"
148148
/>
149149
</label>
150150
<label class="block">
151151
<span class="text-gray-700">When is your event?</span>
152152
<input
153153
type="date"
154-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
154+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
155155
/>
156156
</label>
157157
<label class="block">
158158
<span class="text-gray-700">What type of event is it?</span>
159159
<select
160-
class="block w-full mt-0 pl-0.5 pr-7 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
160+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-7 focus:border-black focus:ring-0"
161161
>
162162
<option>Corporate event</option>
163163
<option>Wedding</option>
@@ -168,7 +168,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
168168
<label class="block">
169169
<span class="text-gray-700">Additional details</span>
170170
<textarea
171-
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
171+
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
172172
rows="2"
173173
></textarea>
174174
</label>
@@ -178,7 +178,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
178178
<label class="inline-flex items-center">
179179
<input
180180
type="checkbox"
181-
class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
181+
class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
182182
/>
183183
<span class="ml-2">Email me news and special offers</span>
184184
</label>
@@ -196,29 +196,29 @@ <h2 class="text-2xl font-bold">Solid</h2>
196196
<span class="text-gray-700">Full name</span>
197197
<input
198198
type="text"
199-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
199+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
200200
placeholder=""
201201
/>
202202
</label>
203203
<label class="block">
204204
<span class="text-gray-700">Email address</span>
205205
<input
206206
type="email"
207-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
207+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
208208
placeholder="[email protected]"
209209
/>
210210
</label>
211211
<label class="block">
212212
<span class="text-gray-700">When is your event?</span>
213213
<input
214214
type="date"
215-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
215+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
216216
/>
217217
</label>
218218
<label class="block">
219219
<span class="text-gray-700">What type of event is it?</span>
220220
<select
221-
class="block w-full mt-1 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
221+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
222222
>
223223
<option>Corporate event</option>
224224
<option>Wedding</option>
@@ -229,7 +229,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
229229
<label class="block">
230230
<span class="text-gray-700">Additional details</span>
231231
<textarea
232-
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
232+
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
233233
rows="3"
234234
></textarea>
235235
</label>
@@ -239,7 +239,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
239239
<label class="inline-flex items-center">
240240
<input
241241
type="checkbox"
242-
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"
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"
243243
/>
244244
<span class="ml-2">Email me news and special offers</span>
245245
</label>

‎kitchen-sink.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -7,13 +7,13 @@
77
<link rel="stylesheet" href="/dist/tailwind.css" />
88
</head>
99
<body>
10-
<div class="antialiased text-gray-900 px-6">
11-
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
10+
<div class="px-6 text-gray-900 antialiased">
11+
<div class="mx-auto max-w-xl py-12 md:max-w-4xl">
1212
<h2 class="text-2xl font-bold">Reset styles</h2>
1313
<p class="mt-2 text-lg text-gray-500">
1414
These are form elements this plugin styles by default.
1515
</p>
16-
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
16+
<div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
1717
<div class="grid grid-cols-1 gap-6">
1818
<label class="block">
1919
<span class="text-gray-700">Input (text)</span>
@@ -98,14 +98,14 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
9898
</label>
9999
<label class="block">
100100
<span class="text-gray-700">Select</span>
101-
<select class="form-select block w-full mt-1">
101+
<select class="form-select mt-1 block w-full">
102102
<option>Option 1</option>
103103
<option>Option 2</option>
104104
</select>
105105
</label>
106106
<label class="block">
107107
<span class="text-gray-700">Select (single, with size)</span>
108-
<select class="form-select block w-full mt-1" size="3">
108+
<select class="form-select mt-1 block w-full" size="3">
109109
<option>Option 1</option>
110110
<option>Option 2</option>
111111
<option>Option 3</option>
@@ -115,7 +115,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
115115
</label>
116116
<label class="block">
117117
<span class="text-gray-700">Select (multiple)</span>
118-
<select class="form-multiselect block w-full mt-1" multiple>
118+
<select class="form-multiselect mt-1 block w-full" multiple>
119119
<option>Option 1</option>
120120
<option>Option 2</option>
121121
<option>Option 3</option>
@@ -125,7 +125,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
125125
</label>
126126
<label class="block">
127127
<span class="text-gray-700">Select (multiple, with size)</span>
128-
<select class="form-multiselect block w-full mt-1" multiple size="3">
128+
<select class="form-multiselect mt-1 block w-full" multiple size="3">
129129
<option>Option 1</option>
130130
<option>Option 2</option>
131131
<option>Option 3</option>
@@ -136,7 +136,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
136136
<label class="block">
137137
<span class="text-gray-700">Textarea</span>
138138
<textarea
139-
class="form-textarea mt-1 block w-full h-24"
139+
class="form-textarea mt-1 block h-24 w-full"
140140
rows="3"
141141
placeholder="Enter some long form content."
142142
></textarea>
@@ -190,13 +190,13 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
190190
</div>
191191
</div>
192192
</div>
193-
<div class="max-w-4xl mx-auto py-12">
193+
<div class="mx-auto max-w-4xl py-12">
194194
<h2 class="text-2xl font-bold">Untouched</h2>
195195
<p class="mt-2 text-lg text-gray-500">
196196
These are form elements we don't handle (yet?), but we use this to make sure we haven't
197197
accidentally styled them by mistake.
198198
</p>
199-
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
199+
<div class="mt-8 grid grid-cols-2 items-start gap-6">
200200
<div class="grid grid-cols-1 gap-6">
201201
<label class="block">
202202
<span class="text-gray-700">Input (range)</span>

0 commit comments

Comments
 (0)