Back to Tools

Tailwind CSS Cheat Sheet

78 utilities

Layout

container
width: 100%;

A responsive container

block
display: block;
inline-block
display: inline-block;
inline
display: inline;
flex
display: flex;
inline-flex
display: inline-flex;
grid
display: grid;
hidden
display: none;

Flexbox

flex-row
flex-direction: row;
flex-col
flex-direction: column;
flex-wrap
flex-wrap: wrap;
flex-nowrap
flex-wrap: nowrap;
justify-start
justify-content: flex-start;
justify-end
justify-content: flex-end;
justify-center
justify-content: center;
justify-between
justify-content: space-between;
justify-around
justify-content: space-around;
items-start
align-items: flex-start;
items-end
align-items: flex-end;
items-center
align-items: center;
items-baseline
align-items: baseline;
items-stretch
align-items: stretch;

Grid

grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
gap-1
gap: 0.25rem;
gap-2
gap: 0.5rem;
gap-4
gap: 1rem;
gap-8
gap: 2rem;

Spacing

p-0
padding: 0;
p-1
padding: 0.25rem;
p-2
padding: 0.5rem;
p-4
padding: 1rem;
p-8
padding: 2rem;
m-0
margin: 0;
m-1
margin: 0.25rem;
m-2
margin: 0.5rem;
m-4
margin: 1rem;
m-8
margin: 2rem;

Typography

text-xs
font-size: 0.75rem;
text-sm
font-size: 0.875rem;
text-base
font-size: 1rem;
text-lg
font-size: 1.125rem;
text-xl
font-size: 1.25rem;
text-2xl
font-size: 1.5rem;
font-thin
font-weight: 100;
font-normal
font-weight: 400;
font-medium
font-weight: 500;
font-bold
font-weight: 700;

Colors

text-{color}-{shade}
color: {value};

Text color (e.g., text-blue-500)

bg-{color}-{shade}
background-color: {value};

Background color (e.g., bg-red-500)

border-{color}-{shade}
border-color: {value};

Border color (e.g., border-green-500)

Borders

border
border-width: 1px;
border-2
border-width: 2px;
border-4
border-width: 4px;
rounded
border-radius: 0.25rem;
rounded-lg
border-radius: 0.5rem;
rounded-full
border-radius: 9999px;

Effects

shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
opacity-0
opacity: 0;
opacity-50
opacity: 0.5;
opacity-100
opacity: 1;

Transitions

transition
transition-property: all;
transition-colors
transition-property: color, background-color, border-color;
duration-100
transition-duration: 100ms;
duration-200
transition-duration: 200ms;
duration-300
transition-duration: 300ms;
ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

Responsive Design

sm:{utility}
@media (min-width: 640px)

Small screens and up

md:{utility}
@media (min-width: 768px)

Medium screens and up

lg:{utility}
@media (min-width: 1024px)

Large screens and up

xl:{utility}
@media (min-width: 1280px)

Extra large screens and up

2xl:{utility}
@media (min-width: 1536px)

2XL screens and up

Quick Tips

Responsive Design

Use breakpoint prefixes like sm:, md:, lg: to apply styles at specific screen sizes.

Hover & Focus States

Add hover: or focus: prefixes to apply styles on different states.

Dark Mode

Use the dark: prefix to apply styles in dark mode when configured.

Important Modifier

Add ! before the class name to make it !important.