Tailwind CSS All Properties Guide
A comprehensive guide with simple definitions for students to learn and apply Tailwind CSS.
Layout
Class Definition
container Sets a responsive fixed-width container.
block / inline-block / inline Sets display type.
flex / inline-flex Enables Flexbox layout.
grid / inline-grid Enables Grid layout.
hidden Hides an element completely.
visible / invisible Show/hide element without removing space.
overflow-auto / hidden / scroll Controls overflow behavior.
object-contain / object-cover Controls image/video fit inside container.
Flexbox and Grid
Class Definition
flex-row / flex-col Direction of flex items (row or column).
justify-start / center / end / between / around
Horizontal alignment of flex items.
items-start / center / end / stretch Vertical alignment of items.
gap-x-4 / gap-y-2 Spacing between items in flex/grid.
flex-wrap / flex-nowrap Wraps flex items to next line.
grid-cols-3 / grid-rows-2 Sets number of columns/rows.
Spacing (Margin & Padding)
Class Definition
m-4 / mt-2 / ml-1 Margin on all sides or specific side.
p-4 / px-2 / py-3 Padding on all sides or specific axis.
space-x-4 / space-y-2 Space between sibling elements.
Sizing
Class Definition
w-10 / w-full Width: fixed or full width.
h-12 / h-screen Height: fixed or full screen height.
min-w-0 / max-w-md Minimum/maximum width.
min-h-screen / max-h-20 Minimum/maximum height.
Typography
Class Definition
text-sm / text-2xl Font size.
font-thin / font-bold Font weight.
text-left / text-center / text-right Text alignment.
text-gray-700 / text-blue-500 Text color.
uppercase / lowercase / capitalize Text case transformation.
tracking-wide / tracking-tight Letter spacing.
leading-snug / leading-loose Line height.
Backgrounds
Class Definition
bg-red-500 / bg-blue-200 Background color.
bg-cover / bg-contain Background image size.
bg-center / bg-left Background image position.
bg-no-repeat No repeat for background images.
Borders
Class Definition
border / border-2 Border width.
border-red-500 / border-gray-300 Border color.
rounded / rounded-lg / rounded-full Border radius (roundness).
border-dashed / border-solid Border styles.
Effects
Class Definition
shadow / shadow-lg Box shadows.
opacity-50 / opacity-100 Opacity level.
hover:bg-blue-500 Hover background color.
transition / duration-300 Smooth transitions/animations.
Positioning
Class Definition
relative / absolute / fixed / sticky Set position of element.
top-0 / left-2 Offsets for positioned elements.
z-10 / z-50 Stacking order (z-index).
List, Tables & Misc
Class Definition
list-disc / list-decimal List bullet styles.
table-auto / table-fixed Table layout options.
cursor-pointer Pointer cursor on hover.
select-none / select-text Text selection behavior.
resize / resize-none Resize options for textareas/divs.
Responsive Design
Class Definition
sm: Small screens (≥ 640px).
md: Medium screens (≥ 768px).
lg: Large screens (≥ 1024px).
xl: Extra-large screens (≥ 1280px).
2xl: 2X Extra-large screens (≥ 1536px).
State Variants
Class Definition
hover: Styles applied on hover.
focus: Styles applied when focused.
active: Styles on active (clicked).
disabled: Styles when disabled.
