TOOLVAULT
Portfolio
Back to All ToolsOther Tools

Tailwind Cheat Sheet

An instantly searchable, click-to-copy reference guide for essential Tailwind CSS classes.

Filter Category

Responsive Breakpoints

  • sm: @media (min-width: 640px)
  • md: @media (min-width: 768px)
  • lg: @media (min-width: 1024px)
  • xl: @media (min-width: 1280px)
  • 2xl: @media (min-width: 1536px)

Layout

block
Copy
display: block;
inline-block
Copy
display: inline-block;
hidden
Copy
display: none;
absolute
Copy
position: absolute;
relative
Copy
position: relative;
fixed
Copy
position: fixed;
sticky
Copy
position: sticky;
inset-0
Copy
top: 0; right: 0; bottom: 0; left: 0;
z-10
Copy
z-index: 10;
z-50
Copy
z-index: 50;

Flex & Grid

flex
Copy
display: flex;
flex-col
Copy
flex-direction: column;
flex-wrap
Copy
flex-wrap: wrap;
items-center
Copy
align-items: center;
justify-center
Copy
justify-content: center;
justify-between
Copy
justify-content: space-between;
gap-4
Copy
gap: 1rem; /* 16px */
grid
Copy
display: grid;
grid-cols-3
Copy
grid-template-columns: repeat(3, minmax(0, 1fr));
col-span-2
Copy
grid-column: span 2 / span 2;

Spacing & Sizing

w-full
Copy
width: 100%;
h-screen
Copy
height: 100vh;
max-w-7xl
Copy
max-width: 80rem; /* 1280px */
p-4
Copy
padding: 1rem; /* 16px */
px-6
Copy
padding-left: 1.5rem; padding-right: 1.5rem;
py-2
Copy
padding-top: 0.5rem; padding-bottom: 0.5rem;
m-auto
Copy
margin: auto;
mx-auto
Copy
margin-left: auto; margin-right: auto;
mt-8
Copy
margin-top: 2rem; /* 32px */
mb-4
Copy
margin-bottom: 1rem; /* 16px */

Typography

text-sm
Copy
font-size: 0.875rem; line-height: 1.25rem;
text-base
Copy
font-size: 1rem; line-height: 1.5rem;
text-2xl
Copy
font-size: 1.5rem; line-height: 2rem;
font-bold
Copy
font-weight: 700;
font-mono
Copy
font-family: ui-monospace, SFMono-Regular, ...;
tracking-wider
Copy
letter-spacing: 0.05em;
leading-relaxed
Copy
line-height: 1.625;
text-center
Copy
text-align: center;
uppercase
Copy
text-transform: uppercase;
truncate
Copy
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Backgrounds & Borders

bg-slate-900
Copy
background-color: #0f172a;
bg-transparent
Copy
background-color: transparent;
bg-cover
Copy
background-size: cover;
border
Copy
border-width: 1px;
border-b-2
Copy
border-bottom-width: 2px;
border-slate-200
Copy
border-color: #e2e8f0;
rounded-md
Copy
border-radius: 0.375rem; /* 6px */
rounded-full
Copy
border-radius: 9999px;
divide-y
Copy
border-top-width: 1px; (on children)
ring-2
Copy
box-shadow: 0 0 0 2px var(--tw-ring-color);

Effects & Filters

shadow-sm
Copy
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow-xl
Copy
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
opacity-50
Copy
opacity: 0.5;
blur-sm
Copy
filter: blur(4px);
backdrop-blur-md
Copy
backdrop-filter: blur(12px);
transition-all
Copy
transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
duration-300
Copy
transition-duration: 300ms;
ease-in-out
Copy
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
scale-105
Copy
transform: scale(1.05);
animate-spin
Copy
animation: spin 1s linear infinite;