Tailwind CSS Common Class Cheat Sheet
This quick reference guide summarizes the most commonly used utility classes in Tailwind CSS.
1. Layout and Display
| Class Name | CSS Output Equivalent |
flex | display: flex |
grid | display: grid |
hidden | display: none |
block | display: block |
inline-block | display: inline-block |
2. Spacing Axis Modifiers (Margin and Padding)
Spacing increments use a base-4 conversion scale (e.g., 4 is 16px / 1rem):
| Class | Equivalent Value | Class | Equivalent Value |
p-1 | padding: 4px / 0.25rem | m-1 | margin: 4px / 0.25rem |
p-2 | padding: 8px / 0.5rem | m-2 | margin: 8px / 0.5rem |
p-4 | padding: 16px / 1rem | m-4 | margin: 16px / 1rem |
px-4 | horizontal padding: 16px | mx-auto | horizontal margin: auto |
py-8 | vertical padding: 32px | my-0 | vertical margin: 0 |
3. Typography and Formatting
| Class Name | Visual Behavior |
text-xs | Font size: 12px / 0.75rem |
text-base | Font size: 16px / 1rem (default) |
text-2xl | Font size: 24px / 1.5rem |
font-normal | Font weight: 400 |
font-bold | Font weight: 700 |
text-center | Center align text |
uppercase | Convert characters to uppercase |
4. Visual Effects (Borders, Shadows, and Rounds)
| Class Name | Style Behavior |
rounded | Border radius: 4px |
rounded-lg | Border radius: 8px |
rounded-full | Circular border boundary radius |
border | Border width: 1px |
border-dashed | Dashed border styling |
shadow | Standard elevation box shadow |
shadow-xl | Heavy elevation box shadow |
5. Interaction State Prefixes
Prepend these prefixes to apply styles dynamically based on visitor interactions:
hover:(e.g.,hover:bg-blue-600)focus:(e.g.,focus:ring-2)active:(e.g.,active:scale-95)dark:(e.g.,dark:bg-slate-900)md:(e.g.,md:w-1/2- applies styles starting from tablet screens up)
Published on Last updated: