Utility Tools /04

Tailwind Cheat Sheet

Referensi cepat kelas-kelas Tailwind CSS yang paling sering digunakan. Klik nama kelas untuk menyalin secara instan.

Tailwind Cheat Sheet
Layout & Display
block
display: block;
inline-block
display: inline-block;
flex
display: flex;
inline-flex
display: inline-flex;
grid
display: grid;
hidden
display: none;
Flex & Grid Align
flex-row
flex-direction: row;
flex-col
flex-direction: col;
items-center
align-items: center;
justify-between
justify-content: space-between;
justify-center
justify-content: center;
gap-4
gap: 1rem; (16px)
Spacing (Padding/Margin)
p-4
padding: 1rem;
px-4
padding-left/right: 1rem;
py-2
padding-top/bottom: 0.5rem;
m-4
margin: 1rem;
mx-auto
margin-left/right: auto;
my-4
margin-top/bottom: 1rem;
Typography
text-xs
font-size: 0.75rem;
text-sm
font-size: 0.875rem;
text-lg
font-size: 1.125rem;
text-xl
font-size: 1.25rem;
font-bold
font-weight: 700;
text-center
text-align: center;
Colors & Background
bg-white
background-color: #fff;
bg-gray-100
background-color: #f3f4f6;
text-white
color: #fff;
text-gray-800
color: #1f2937;
border-gray-200
border-color: #e5e7eb;
Borders & Shadows
border
border-width: 1px;
rounded
border-radius: 0.25rem;
rounded-lg
border-radius: 0.5rem;
shadow
box-shadow: 0 1px 3px...;
shadow-md
box-shadow: 0 4px 6px...;
Kelas disalin ke clipboard!