Reference list of common CSS properties you'll want to use in Tailwind, and their relative classes
I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to remind a particular class (I’m starting out and I don’t have muscle memory yet for it)
Tailwind provides us those classes we can use to match the corresponding color:
transparent
black
gray
white
red
orange
yellow
green
teal
blue
indigo
purple
pink
Warning: gray was grey before TailWind 1.0. Keep this in mind if you have an older project around.
Every color has various levels. You can use -100 up to -900 to make the color go from less intense to more intense:
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
Text color
Prepend text- to any color
Background color
Prepend bg- to any color
Center text
Use text-center
Line Height
Class
CSS
.leading-none
line-height: 1
.leading-tight
line-height: 1.25
.leading-normal
line-height: 1.5
.leading-loose
line-height: 2
Flexbox
Container
Class
CSS
flex
display: flex
inline-flex
display: inline-flex
Items
Direction
Class
CSS
flex-row
flex-direction: row
flex-row-reverse
flex-direction: row-reverse
flex-col
flex-direction: column
flex-col-reverse
flex-direction: column-reverse
Wrapping
Class
CSS
flex-no-wrap
flex-wrap: nowrap
flex-wrap
flex-wrap: wrap
flex-wrap-reverse
flex-wrap: wrap-reverse
Align items
Class
CSS
items-stretch
align-items: stretch
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-baseline
align-items: baseline
Align content
Class
CSS
content-start
align-content: flex-start
content-center
align-content: center
content-end
align-content: flex-end
content-between
align-content: space-between
content-around
align-content: space-around
Align self
Class
CSS
self-auto
align-self: auto
self-start
align-self: flex-start
self-center
align-self: center
self-end
align-self: flex-end
self-stretch
align-self: stretch
Justify content
Class
CSS
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-end
justify-content: flex-end
justify-between
justify-content: space-between
justify-around
justify-content: space-around
Flex, grow, shrink
Class
CSS
flex-initial
flex: initial
flex-1
flex: 1
flex-auto
flex: auto
flex-none
flex: none
flex-grow
flex-grow: 1
flex-shrink
flex-shrink: 1
flex-no-grow
flex-grow: 0
flex-no-shrink
flex-shrink: 0
Modifiers
Hover
hover:
Are you intimidated by Git? Can’t figure out merge vs
rebase? Are you afraid of screwing up something any time
you have to do something in Git? Do you rely on ChatGPT
or random people’s answer on StackOverflow to fix your
problems? Your coworkers are tired of explaining Git to
you all the time? Git is something we all need to use,
but few of us really master it. I created this course to
improve your Git (and GitHub) knowledge at a radical
level. A course that helps you feel less frustrated with
Git. Launching Summer 2024. Join the waiting list!