1# Tailwind CSS Utility Reference
2 
3Core utility classes for layout, spacing, typography, colors, borders, and shadows.
4 
5## Layout Utilities
6 
7### Display
8 
9```html
10<div class="block">Block</div>
11<div class="inline-block">Inline Block</div>
12<div class="inline">Inline</div>
13<div class="flex">Flexbox</div>
14<div class="inline-flex">Inline Flex</div>
15<div class="grid">Grid</div>
16<div class="inline-grid">Inline Grid</div>
17<div class="hidden">Hidden</div>
18```
19 
20### Flexbox
21 
22**Container:**
23```html
24<div class="flex flex-row">Row (default)</div>
25<div class="flex flex-col">Column</div>
26<div class="flex flex-row-reverse">Reverse row</div>
27<div class="flex flex-col-reverse">Reverse column</div>
28```
29 
30**Justify (main axis):**
31```html
32<div class="flex justify-start">Start</div>
33<div class="flex justify-center">Center</div>
34<div class="flex justify-end">End</div>
35<div class="flex justify-between">Space between</div>
36<div class="flex justify-around">Space around</div>
37<div class="flex justify-evenly">Space evenly</div>
38```
39 
40**Align (cross axis):**
41```html
42<div class="flex items-start">Start</div>
43<div class="flex items-center">Center</div>
44<div class="flex items-end">End</div>
45<div class="flex items-baseline">Baseline</div>
46<div class="flex items-stretch">Stretch</div>
47```
48 
49**Gap:**
50```html
51<div class="flex gap-4">All sides</div>
52<div class="flex gap-x-6 gap-y-2">X and Y</div>
53```
54 
55**Wrap:**
56```html
57<div class="flex flex-wrap">Wrap</div>
58<div class="flex flex-nowrap">No wrap</div>
59```
60 
61### Grid
62 
63**Columns:**
64```html
65<div class="grid grid-cols-1">1 column</div>
66<div class="grid grid-cols-2">2 columns</div>
67<div class="grid grid-cols-3">3 columns</div>
68<div class="grid grid-cols-4">4 columns</div>
69<div class="grid grid-cols-12">12 columns</div>
70<div class="grid grid-cols-[1fr_500px_2fr]">Custom</div>
71```
72 
73**Rows:**
74```html
75<div class="grid grid-rows-3">3 rows</div>
76<div class="grid grid-rows-[auto_1fr_auto]">Custom</div>
77```
78 
79**Span:**
80```html
81<div class="col-span-2">Span 2 columns</div>
82<div class="row-span-3">Span 3 rows</div>
83```
84 
85**Gap:**
86```html
87<div class="grid gap-4">All sides</div>
88<div class="grid gap-x-8 gap-y-4">X and Y</div>
89```
90 
91### Positioning
92 
93```html
94<div class="static">Static (default)</div>
95<div class="relative">Relative</div>
96<div class="absolute">Absolute</div>
97<div class="fixed">Fixed</div>
98<div class="sticky">Sticky</div>
99 
100<!-- Position values -->
101<div class="absolute top-0 right-0">Top right</div>
102<div class="absolute inset-0">All sides 0</div>
103<div class="absolute inset-x-4">Left/right 4</div>
104<div class="absolute inset-y-8">Top/bottom 8</div>
105```
106 
107### Z-Index
108 
109```html
110<div class="z-0">z-index: 0</div>
111<div class="z-10">z-index: 10</div>
112<div class="z-20">z-index: 20</div>
113<div class="z-50">z-index: 50</div>
114```
115 
116## Spacing Utilities
117 
118### Padding
119 
120```html
121<div class="p-4">All sides</div>
122<div class="px-6">Left and right</div>
123<div class="py-3">Top and bottom</div>
124<div class="pt-8">Top</div>
125<div class="pr-4">Right</div>
126<div class="pb-2">Bottom</div>
127<div class="pl-6">Left</div>
128```
129 
130### Margin
131 
132```html
133<div class="m-4">All sides</div>
134<div class="mx-auto">Center horizontally</div>
135<div class="my-6">Top and bottom</div>
136<div class="mt-8">Top</div>
137<div class="-mt-4">Negative top</div>
138<div class="ml-auto">Push to right</div>
139```
140 
141### Space Between
142 
143```html
144<div class="space-x-4">Horizontal spacing</div>
145<div class="space-y-6">Vertical spacing</div>
146```
147 
148### Spacing Scale
149 
150- `0`: 0px
151- `px`: 1px
152- `0.5`: 0.125rem (2px)
153- `1`: 0.25rem (4px)
154- `2`: 0.5rem (8px)
155- `3`: 0.75rem (12px)
156- `4`: 1rem (16px)
157- `6`: 1.5rem (24px)
158- `8`: 2rem (32px)
159- `12`: 3rem (48px)
160- `16`: 4rem (64px)
161- `24`: 6rem (96px)
162 
163## Typography
164 
165### Font Size
166 
167```html
168<p class="text-xs">Extra small (12px)</p>
169<p class="text-sm">Small (14px)</p>
170<p class="text-base">Base (16px)</p>
171<p class="text-lg">Large (18px)</p>
172<p class="text-xl">XL (20px)</p>
173<p class="text-2xl">2XL (24px)</p>
174<p class="text-3xl">3XL (30px)</p>
175<p class="text-4xl">4XL (36px)</p>
176<p class="text-5xl">5XL (48px)</p>
177```
178 
179### Font Weight
180 
181```html
182<p class="font-thin">Thin (100)</p>
183<p class="font-light">Light (300)</p>
184<p class="font-normal">Normal (400)</p>
185<p class="font-medium">Medium (500)</p>
186<p class="font-semibold">Semibold (600)</p>
187<p class="font-bold">Bold (700)</p>
188<p class="font-black">Black (900)</p>
189```
190 
191### Text Alignment
192 
193```html
194<p class="text-left">Left</p>
195<p class="text-center">Center</p>
196<p class="text-right">Right</p>
197<p class="text-justify">Justify</p>
198```
199 
200### Line Height
201 
202```html
203<p class="leading-none">1</p>
204<p class="leading-tight">1.25</p>
205<p class="leading-normal">1.5</p>
206<p class="leading-relaxed">1.75</p>
207<p class="leading-loose">2</p>
208```
209 
210### Combined Font Utilities
211 
212```html
213<h1 class="text-4xl/tight font-bold">
214  Font size 4xl with tight line height
215</h1>
216```
217 
218### Text Transform
219 
220```html
221<p class="uppercase">UPPERCASE</p>
222<p class="lowercase">lowercase</p>
223<p class="capitalize">Capitalize</p>
224<p class="normal-case">Normal</p>
225```
226 
227### Text Decoration
228 
229```html
230<p class="underline">Underline</p>
231<p class="line-through">Line through</p>
232<p class="no-underline">No underline</p>
233```
234 
235### Text Overflow
236 
237```html
238<p class="truncate">Truncate with ellipsis...</p>
239<p class="line-clamp-3">Clamp to 3 lines...</p>
240<p class="text-ellipsis overflow-hidden">Ellipsis</p>
241```
242 
243## Colors
244 
245### Text Colors
246 
247```html
248<p class="text-black">Black</p>
249<p class="text-white">White</p>
250<p class="text-gray-500">Gray 500</p>
251<p class="text-red-600">Red 600</p>
252<p class="text-blue-500">Blue 500</p>
253<p class="text-green-600">Green 600</p>
254```
255 
256### Background Colors
257 
258```html
259<div class="bg-white">White</div>
260<div class="bg-gray-100">Gray 100</div>
261<div class="bg-blue-500">Blue 500</div>
262<div class="bg-red-600">Red 600</div>
263```
264 
265### Color Scale
266 
267Each color has 11 shades (50-950):
268- `50`: Lightest
269- `100-400`: Light variations
270- `500`: Base color
271- `600-800`: Dark variations
272- `950`: Darkest
273 
274### Opacity Modifiers
275 
276```html
277<div class="bg-black/75">75% opacity</div>
278<div class="text-blue-500/30">30% opacity</div>
279<div class="bg-purple-500/[0.87]">87% opacity</div>
280```
281 
282### Gradients
283 
284```html
285<div class="bg-gradient-to-r from-blue-500 to-purple-600">
286  Left to right gradient
287</div>
288<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
289  With via color
290</div>
291```
292 
293Directions: `to-t | to-tr | to-r | to-br | to-b | to-bl | to-l | to-tl`
294 
295## Borders
296 
297### Border Width
298 
299```html
300<div class="border">1px all sides</div>
301<div class="border-2">2px all sides</div>
302<div class="border-t">Top only</div>
303<div class="border-r-4">Right 4px</div>
304<div class="border-b-2">Bottom 2px</div>
305<div class="border-l">Left only</div>
306<div class="border-0">No border</div>
307```
308 
309### Border Color
310 
311```html
312<div class="border border-gray-300">Gray</div>
313<div class="border-2 border-blue-500">Blue</div>
314<div class="border border-red-600/50">Red with opacity</div>
315```
316 
317### Border Radius
318 
319```html
320<div class="rounded">0.25rem</div>
321<div class="rounded-md">0.375rem</div>
322<div class="rounded-lg">0.5rem</div>
323<div class="rounded-xl">0.75rem</div>
324<div class="rounded-2xl">1rem</div>
325<div class="rounded-full">9999px</div>
326 
327<!-- Individual corners -->
328<div class="rounded-t-lg">Top corners</div>
329<div class="rounded-br-xl">Bottom right</div>
330```
331 
332### Border Style
333 
334```html
335<div class="border border-solid">Solid</div>
336<div class="border-2 border-dashed">Dashed</div>
337<div class="border border-dotted">Dotted</div>
338```
339 
340## Shadows
341 
342```html
343<div class="shadow-sm">Small</div>
344<div class="shadow">Default</div>
345<div class="shadow-md">Medium</div>
346<div class="shadow-lg">Large</div>
347<div class="shadow-xl">Extra large</div>
348<div class="shadow-2xl">2XL</div>
349<div class="shadow-none">No shadow</div>
350```
351 
352### Colored Shadows
353 
354```html
355<div class="shadow-lg shadow-blue-500/50">Blue shadow</div>
356```
357 
358## Width & Height
359 
360### Width
361 
362```html
363<div class="w-full">100%</div>
364<div class="w-1/2">50%</div>
365<div class="w-1/3">33.333%</div>
366<div class="w-64">16rem</div>
367<div class="w-[500px]">500px</div>
368<div class="w-screen">100vw</div>
369 
370<!-- Min/Max width -->
371<div class="min-w-0">min-width: 0</div>
372<div class="max-w-md">max-width: 28rem</div>
373<div class="max-w-screen-xl">max-width: 1280px</div>
374```
375 
376### Height
377 
378```html
379<div class="h-full">100%</div>
380<div class="h-screen">100vh</div>
381<div class="h-64">16rem</div>
382<div class="h-[500px]">500px</div>
383 
384<!-- Min/Max height -->
385<div class="min-h-screen">min-height: 100vh</div>
386<div class="max-h-96">max-height: 24rem</div>
387```
388 
389## Arbitrary Values
390 
391Use square brackets for custom values:
392 
393```html
394<!-- Spacing -->
395<div class="p-[17px]">Custom padding</div>
396<div class="top-[117px]">Custom position</div>
397 
398<!-- Colors -->
399<div class="bg-[#bada55]">Hex color</div>
400<div class="text-[rgb(123,45,67)]">RGB</div>
401 
402<!-- Sizes -->
403<div class="w-[500px]">Custom width</div>
404<div class="text-[22px]">Custom font size</div>
405 
406<!-- CSS variables -->
407<div class="bg-[var(--brand-color)]">CSS var</div>
408 
409<!-- Complex values -->
410<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
411```
412 
413## Aspect Ratio
414 
415```html
416<div class="aspect-square">1:1</div>
417<div class="aspect-video">16:9</div>
418<div class="aspect-[4/3]">4:3</div>
419```
420 
421## Overflow
422 
423```html
424<div class="overflow-auto">Auto scroll</div>
425<div class="overflow-hidden">Hidden</div>
426<div class="overflow-scroll">Always scroll</div>
427<div class="overflow-x-auto">Horizontal scroll</div>
428<div class="overflow-y-hidden">No vertical scroll</div>
429```
430 
431## Opacity
432 
433```html
434<div class="opacity-0">0%</div>
435<div class="opacity-50">50%</div>
436<div class="opacity-75">75%</div>
437<div class="opacity-100">100%</div>
438```
439 
440## Cursor
441 
442```html
443<div class="cursor-pointer">Pointer</div>
444<div class="cursor-wait">Wait</div>
445<div class="cursor-not-allowed">Not allowed</div>
446<div class="cursor-default">Default</div>
447```
448 
449## User Select
450 
451```html
452<div class="select-none">No select</div>
453<div class="select-text">Text selectable</div>
454<div class="select-all">Select all</div>
455```
456