Tailwind CSS Utility Classes — Complete Notes
1. Layout & Display
Class CSS Property What it does
block display: block Element takes full width, starts on new line
inline display: inline Sits within text flow, no width/height control
Sits in line with text, but width/height CAN be
inline-block display: inline-block
set
hidden display: none Completely hides the element
flex display: flex Turns container into a flexbox
inline-flex display: inline-flex Flexbox that sits inline with text
grid display: grid Turns container into a CSS grid
2. Position
Class CSS Property What it does
Default. Element stays in normal document
static position: static
flow
Element stays in flow, but can be shifted
relative position: relative using top/left/right/bottom relative to its
own original position
Removed from flow, positioned relative to
absolute position: absolute
nearest relative/absolute parent
Stays fixed on screen even when scrolling
fixed position: fixed
(e.g. sticky navbars, back-to-top buttons)
Behaves normal until scroll reaches a point,
sticky position: sticky
then sticks (e.g. sticky headers)
top-0, left-0, top/left/right/bottom: 0 Used WITH relative/absolute/fixed to pin
Class CSS Property What it does
right-0,
element to an edge
bottom-0
top:0; right:0;
inset-0 Pins element to all four edges (fills parent)
bottom:0; left:0
Controls stacking order — higher number =
z-10, z-50 z-index
on top
Example — badge on top-right of a card:
<div class="relative">
<img src="..." class="w-64">
<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 rounded-
full">New</span>
</div>
3. Sizing
Class CSS Property What it does
w-full width: 100% Full width of parent
Height adjusts automatically based on
h-auto height: auto
content/ratio
h-screen height: 100vh Full viewport height
w-64, h-64 fixed size (256px) Exact fixed dimensions
max-w-md max-width: 28rem Never grows past this width, can shrink
min-h-
min-height: 100vh Never shorter than full screen height
screen
custom/arbitrary
w-[10px] Any custom exact value you choose
value
Class CSS Property What it does
w-1/2 width: 50% Fractional/percentage width
4. Spacing (Padding & Margin)
Class What it does
p-4 Padding on all 4 sides
px-4 / py-4 Padding left+right / top+bottom only
pt-4, pb-4, pl-4, pr-
Padding on one side only
4
m-4 Margin on all 4 sides
mx-auto Auto margin left+right — centers a block with a defined width
mx-4 / my-4 Margin left+right / top+bottom only
Adds horizontal gap BETWEEN child elements (not on outer
space-x-4
edges)
space-y-4 Adds vertical gap between stacked children
gap-4 Gap between items in flex/grid containers (both directions)
5. Flexbox / Grid Alignment
Class CSS Property What it does
justify-center justify-content: center Aligns items along the main axis
Class CSS Property What it does
justify-content: space- Spreads items with equal space between
justify-between
between them
items-center align-items: center Aligns items along the cross axis
place-content-
centers both axes Common shorthand for centering in grid
center
Stacks flex items vertically (swaps
flex-col flex-direction: column
main/cross axis)
Allows items to wrap to next line instead
flex-wrap flex-wrap: wrap
of overflowing
Main axis = direction items flow (row = horizontal by default). Cross axis =
perpendicular direction (vertical by default). Axes swap when using flex-col.
6. Typography
Class What it does
text-white Text color
text-xl, text-2xl Font size
font-bold, font-semibold Font weight
italic Italic style
underline Adds underline
no-underline Removes underline (for links)
tracking-wide Increases letter spacing
leading-relaxed Line height (spacing between lines)
text-center Centers text horizontally
truncate Cuts off overflowing text with "..."
font-sans / font-serif / font-mono Font family
7. Background
Class What it does
bg-slate-500 Background color (from Tailwind's palette)
bg-[#1a1a2e] Custom hex background color
bg-[url('[Link]')] Custom background image
bg-cover Image covers full element, cropping if needed
bg-contain Image fits fully inside, may leave empty space
bg-center Positions background image at center
bg-no-repeat Prevents image from tiling
bg-fixed Background stays fixed while page scrolls (parallax effect)
8. Borders
Class What it does
rounded-lg Rounds corners (border-radius, "lg" = large ≈ 8px)
rounded-full Fully circular/pill shape
border Adds 1px border on all sides
border-4 Sets border width (4px)
border-teal-600 Border color
border-[#1a1a2e] Custom hex border color
9. Shadows
Class What it does
shadow-sm Small, subtle shadow
shadow Default shadow
Class What it does
shadow-md Medium shadow
shadow-lg Large shadow — gives a "lifted" card look
shadow-xl / shadow-2xl Extra large / biggest shadow
shadow-none Removes shadow
shadow-teal-500/50 Colored shadow with opacity (Tailwind v3+)
Use case: Add depth to cards, buttons, or modals so they look raised off the page.
<div class="bg-white rounded-lg shadow-lg p-6">Card with a lifted look</div>
10. Transitions & Animation
Class What it does
Enables smooth animation when a property changes (instead of
transition
instant snap)
Sets how long the transition takes (300ms). Options: 75, 150, 300,
duration-300
500, 700, 1000
ease-in Animation starts slow, speeds up
ease-out Animation starts fast, slows down
ease-in-out Smooth both ways (most natural feel)
hover:text-
Applies a style ONLY on mouse hover
black
hover:scale-
Slightly enlarges element on hover
105
animate-spin Continuous spinning animation (e.g. loading spinner)
animate-
Bouncing animation
bounce
Class What it does
animate-pulse Fading pulse animation (e.g. skeleton loaders)
animate-ping Expanding ping/radar effect
Example — smooth hover button:
<button class="bg-teal-600 text-white px-4 py-2 rounded-lg transition duration-
300 ease-in-out hover:bg-black hover:scale-105">
Buy Now
</button>
11. Responsive Breakpoints (Mobile-First)
Prefix Min screen width
(none) Mobile default — always applies
sm: 640px and up
md: 768px and up
lg: 1024px and up
xl: 1280px and up
2xl: 1536px and up
Rule: Write base (mobile) classes without prefix. Add a prefix to change that
property ONLY when the screen reaches that size or bigger.
<div class="hidden md:block">Login/Signup</div>
Hidden on mobile → visible from tablet (md) upward.
Quick Reference — Common Combos
Centered card with shadow:
<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
Full-screen centered content:
<div class="h-screen flex justify-center items-center">
Responsive image, no distortion:
<img class="w-full h-auto object-cover" src="...">
Smooth hover button:
<button class="transition duration-300 hover:bg-black hover:text-white">
Sticky navbar:
<nav class="sticky top-0 z-50 bg-white shadow">
