Tailwind CSS Cheatsheet

30 Tailwind CSS essentials to help you focus on building your app instead of looking up class names

🎥 Watch the full guide on youtube

[Label]

[Tailwindcss class]
👇
[Example]

Color

text-slate-300, text-red-500, text-green-400, text-blue-700/10
👇

This text is colored!

This text is colored!

This text is colored!

This text is colored and opaque!

Background color

bg-amber-500
👇
This div has a background color

Text size

text-sm, text-base, text-lg, text-5xl
👇

This text has it's font size adjusted

This text has it's font size adjusted

This text has it's font size adjusted

This text has it's font size adjusted

Text alignment

text-left, text-center, text-right
👇

This text is aligned to the left

This text is aligned to the center

This text is aligned to the right

Width and height

w-52 h-52, w-full h-full, w-1/3 h-1/3
👇
This div has a width of 52px and a height of 52px
This div has a width of 100% and a height of 100%
This div has a width of 33.33% and a height of 33.33%

Padding

p-12, px-6, py-4, pl-6
👇

Text with padding

Text with padding

Text with padding

Text with padding

Margin

m-12, mx-6, my-4, ml-6
👇

Text with padding

Text with padding

Text with padding

Text with padding

Child spacing

space-y-6, space-x-12
👇

This item is spaced on it's y axis

This item is spaced on it's y axis

This item is spaced on it's y axis

This item is spaced on it's x axis

This item is spaced on it's x axis

This item is spaced on it's x axis

Visibility

visible, invisible
👇

Visible p tag

Border

border-4, border-l-2
👇
This div has a border
This div has a left border

Border radius

rounded-md, rounded-t-3xl, rounded-bl-2xl
👇
This div has a border radius on all sides
This div has a border radius on the top left and top right
This div has a border radius on the bottom left

Shadow

shadow-sm, shadow-lg, shadow-inner
👇
Shadow small
Shadow large
Shadow inner

Opacity

opacity-25, opacity-50, opacity-75, opacity-100
👇
Opacity 25%
Opacity 50%
Opacity 75%
Opacity 100%

Cursor pointer

cursor-pointer, cursor-not-allowed
👇

Transitions

transition-all duration-1000 bg-blue-200 hover:bg-blue-400/50
👇

Flex

Flex
👇

This p tag is flexed

This p tag is flexed

This p tag is flexed

Flex wrap

flex flex-wrap
👇

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

This p tag is flexed

Flex apart

flex justify-between
👇

This p tag is flexed with space between

This p tag is flexed with space between

Flex around

flex justify-around
👇

Flexed with space around

Flexed with space around

Flexed with space around

Flex gap

gap-5, gap-x-8, gap-y-8
👇

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Flexed with gaps

Columns

columns-3
👇

Grid

grid grid-cols-4 grid-rows-2
👇

Responsive

columns-1 md:columns-3
👇

Position absolute

absolute right-10 bottom-5
👇
Absolute div

Position fixed

fixed right-0 top-0
👇

Click me

z-index

z-1, z-2, z-3
👇
zindex 1
zindex 2
zindex 3

Pointer Events

pointer-events-none, pointer-events-auto
👇

Open the dev console and click each button