Click the link to copy
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet" />
Tailwind cheatsheet
black
white
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
w-number (number * 4), w-1, w-2, w-3, w-4, w-5, w-6, w-8, w-10, w-12,
w-16, w-20, w-24, w-32, w-40, w-48, w-56, w-64
w-1/4
w-1/3
w-1/2
w-full
.font-sans - Helvetica or similar
.font-serif - Times New Roman or similar
.font-mono - Monospace or similar
make italic text with .italic and not italic inner text with .not-italic
Font size
.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl
.text-5xl
.text-6xl
Cursor
.cursor-default
.cursor-pointer
.cursor-wait
.cursor-text
.cursor-move
.cursor-not-allowed
Padding, Margin
pl, pr, pt, pb, p, px, py
ml, mr, mt, mb, p, mx, my, mx-auto
Font weight
.font-hairline
.font-thin
.font-light
.font-normal
.font-medium
.font-semibold
.font-bold
.font-extrabold
.font-black
Letter spacing
.tracking-tighter
.tracking-tight
.tracking-normal
.tracking-wide
.tracking-wider
.tracking-widest
Opacity
.opacity-100
.opacity-75
.opacity-50
.opacity-25
Position
.ficed
.absolute
.relative
Line height
.leading-none
.leading-tight
.leading-snug
.leading-normal
.leading-relaxed
.leading-loose
Text decoration
.underline
.no-underline
.line-through
Text transform
.uppercase
.lowercase
.capitalize
.normal-case
Focus
.focus:bg-*
.focus:text-{color}
.focus:border-{color}
.focus:font-{weight}
display
.block
.inline
.inline-block
.flex
.hidden
Justify content
.justify-between
.justify-around
.justify-center
.justify-end
.justify-start
Breakpoints
.sm:class (640px)
.md:class (768px)
.lg:class (1024px)
.xl:class (1280px)
.2xl:class (1536px)
Select
.select-none
.select-text
.select-all
.select-auto
Align items
.items-stretch
.items-start
.items-center
.items-end
.items-baseline
Flex direction
.flex-row
.flex-row-reverse
.flex-col
.flex-col-reverse
Flex wrap
.flex-no-wrap
.flex-wrap
.flex-wrap-reverse
Hover
.hover:bg-*
.hover:text-{color}
.hover:border-{color}
.hover:font-{weight}
Other
.box-content
.sr-only
.not-sr-only
border-0
border
border-2
border-4
border-8
border-t-0
border-t
border-t-2
border-t-4
border-t-8
border-b-0
border-b
border-b-2
border-b-4
border-b-8
border-l-0
border-l
border-l-2
border-l-4
border-l-8
border-r-0
border-r
border-r-2
border-r-4
border-r-8
.border-solid
.border-dashed
.border-dotted
.border-double
.border-none
.rounded-sm
.rounded
.rounded-lg
.rounded-full
.rounded-none
.rounded-t-sm
.rounded-t
.rounded-t-lg
.rounded-t-full
.rounded-t-none
.rounded-r-sm
.rounded-r
.rounded-r-lg
.rounded-r-full
.rounded-r-none
.rounded-b-sm
.rounded-b
.rounded-b-lg
.rounded-b-full
.rounded-b-none
.rounded-l-sm
.rounded-l
.rounded-l-lg
.rounded-l-full
.rounded-l-none
.rounded-tl-sm
.rounded-tl
.rounded-tl-lg
.rounded-tl-full
.rounded-tl-none
.rounded-tr-sm
.rounded-tr
.rounded-tr-lg
.rounded-tr-full
.rounded-tr-none
.rounded-br-sm
.rounded-br
.rounded-br-lg
.rounded-br-full
.rounded-br-none
.rounded-bl-sm
.rounded-bl
.rounded-bl-lg
.rounded-bl-full
.rounded-bl-none
.shadow
.shadow-md
.shadow-lg
.shadow-xl
.shadow-2xl
.shadow .shadow-inner
.shadow-md .shadow-inner
.shadow-lg .shadow-inner
.shadow-xl .shadow-inner
.shadow-2xl .shadow-inner