Adventures in learning Tailwind, Alpine, Laravel and Livewire
Lines with a blue background are official Tailwind sizes.
PX | REM (assumes a 16px base) | TW Width sizes | TW Font sizes |
---|---|---|---|
1 | px | ||
2 | .125 | 0.5 | |
4 | .25 | 1 | |
6 | .375 | 1.5 | |
8 | .5 | 2 | |
10 | .625 | 2.5 | |
12 | .725 | 3 | xs |
14 | .875 | 3.5 | sm |
16 | 1 | 4 | base |
18 | 1.125 | lg | |
20 | 1.25 | 5 | xl |
22 | |||
24 | 1.5 | 6 | 2xl |
26 | |||
28 | 1.75 | 7 | |
30 | 1.875 | 3xl | |
32 | 2 | 8 | |
34 | |||
36 | 2.25 | 9 | 4xl |
38 | |||
40 | 2.5 | 10 | |
42 | |||
44 | 2.75 | 11 | |
46 | |||
48 | 3 | 12 | 5xl |
50 | |||
52 | |||
54 | |||
56 | 3.5 | 14 | |
58 | |||
60 | 3.75 | 6xl | |
62 | |||
64 | 4 | 16 | |
66 | |||
68 | |||
70 | |||
72 | 4.5 | 6xl | |
74 | |||
76 | |||
78 | |||
80 | 5 | 20 | |
82 | |||
84 | |||
86 | |||
88 | |||
90 | |||
92 | |||
94 | |||
96 | 6 | 24 | 8xl |
98 | |||
100 | |||
102 | |||
104 | |||
106 | |||
108 | |||
110 | |||
112 | 7 | 28 | |
114 | |||
116 | |||
118 | |||
120 | |||
122 | |||
124 | |||
126 | |||
128 | 8 | 32 | 9xl |
130 | |||
132 | |||
134 | |||
136 | |||
138 | |||
140 | |||
142 | |||
144 | 9 | 36 | |
146 | |||
148 | |||
150 | |||
152 | |||
154 | |||
156 | |||
158 | |||
160 | 10 | 40 | |
162 | |||
164 | |||
162 | |||
166 | |||
168 | |||
170 | |||
172 | |||
174 | |||
176 | 11 | 44 | |
178 | |||
180 | |||
182 | |||
184 | |||
186 | |||
188 | |||
190 | |||
192 | 12 | 48 | |
194 | |||
196 | |||
198 | |||
200 | |||
202 | |||
204 | |||
206 | |||
208 | 13 | 52 | |
210 | |||
212 | |||
214 | |||
216 | |||
218 | |||
220 | |||
222 | |||
224 | 14 | 56 | |
226 | |||
228 | |||
230 | |||
232 | |||
234 | |||
236 | |||
238 | |||
240 | 15 | 60 | |
242 | |||
244 | |||
246 | |||
248 | |||
250 | |||
252 | |||
254 | |||
256 | 16 | 64 | |
258 | |||
260 | |||
262 | |||
264 | |||
268 | |||
270 | |||
272 | 17 | ||
274 | |||
276 | |||
278 | |||
280 | |||
282 | |||
284 | |||
286 | |||
288 | 18 | 72 | |
290 | |||
292 | |||
294 | |||
296 | |||
298 | |||
300 | |||
302 | |||
304 | 19 | ||
306 | |||
308 | |||
310 | |||
312 | |||
314 | |||
316 | |||
318 | |||
320 | 20 | 80 | |
322 | |||
324 | |||
326 | |||
328 | |||
330 | |||
332 | |||
334 | |||
336 | 21 | ||
338 | |||
340 | |||
342 | |||
344 | |||
346 | |||
348 | |||
350 | |||
352 | 22 | ||
354 | |||
356 | |||
358 | |||
360 | |||
362 | |||
364 | |||
366 | |||
368 | 23 | ||
370 | |||
372 | |||
374 | |||
376 | |||
378 | |||
380 | |||
382 | |||
384 | 24 | 96 | |
386 | |||
388 | |||
390 | |||
392 | |||
394 | |||
396 | |||
398 | |||
400 | 25 |