I created this cheat sheet to serve as a quick reference for common CSS properties in Tailwind along with their corresponding classes. As a beginner, I often find myself needing to look up these classes in the Tailwind documentation. With this cheat sheet, you’ll have a handy resource at your fingertips to help you build muscle memory and speed up your development process.
Here are the CSS properties and classes that I use most frequently:
Margin and Padding
-
Margin and padding classes follow a specific naming convention:
p
stands for paddingm
stands for margin-m
represents negative margin
Additionally, you can combine these classes with directional and sizing modifiers:
t
for topr
for rightb
for bottoml
for leftx
for horizontal (left and right)y
for vertical (top and bottom)
The numerical values indicate the size of the margin or padding, ranging from
0
to32
. Additionally,px
corresponds to1px
andauto
representsauto
value.For example:
pt-2
representspadding-top: 0.5rem
m-auto
representsmargin: 0 auto
Width
The width classes determine the width of an element. They range from w-1
to w-screen
, indicating different sizes and percentages.
Max Width
Max width classes are used to set the maximum width of an element. They range from max-w-xs
to max-w-full
.
Min Width
Min width classes define the minimum width of an element. The available classes are min-w-0
and min-w-full
.
Font Family
Font family classes are available to set the font-family property. The classes include font-sans
, font-serif
, and font-mono
.
Font Size
To adjust the font size, use the font size classes such as text-xs
, text-sm
, text-base
, and more.
Font Weight
Control the font weight with classes like font-hairline
, font-bold
, and font-black
.
Colors
Tailwind provides a wide range of color classes for convenience. Available colors include transparent
, black
, gray
, white
, red
, orange
, yellow
, green
, teal
, blue
, indigo
, purple
, and pink
. Each color also has different intensity levels ranging from -100
to -900
.
Text Color
To change the text color, prepend text-
to the desired color class.
Background Color
Prepend bg-
to the color class to set the background color.
Center Text
Use the text-center
class to center align text.
Line Height
Line height can be adjusted with classes like .leading-none
, .leading-tight
, .leading-normal
, and .leading-loose
.
Flexbox
Flexbox plays a vital role in modern web design. Here are the relevant classes for implementing flexbox layout:
Container
flex
fordisplay: flex
inline-flex
fordisplay: inline-flex
Items
Direction
flex-row
forflex-direction: row
flex-row-reverse
forflex-direction: row-reverse
flex-col
forflex-direction: column
flex-col-reverse
forflex-direction: column-reverse
Wrapping
flex-no-wrap
forflex-wrap: nowrap
flex-wrap
forflex-wrap: wrap
flex-wrap-reverse
forflex-wrap: wrap-reverse
Align Items
items-stretch
foralign-items: stretch
items-start
foralign-items: flex-start
items-center
foralign-items: center
items-end
foralign-items: flex-end
items-baseline
foralign-items: baseline
Align Content
content-start
foralign-content: flex-start
content-center
foralign-content: center
content-end
foralign-content: flex-end
content-between
foralign-content: space-between
content-around
foralign-content: space-around
Align Self
self-auto
foralign-self: auto
self-start
foralign-self: flex-start
self-center
foralign-self: center
self-end
foralign-self: flex-end
self-stretch
foralign-self: stretch
Justify Content
justify-start
forjustify-content: flex-start
justify-center
forjustify-content: center
justify-end
forjustify-content: flex-end
justify-between
forjustify-content: space-between
justify-around
forjustify-content: space-around
Flex, Grow, Shrink
flex-initial
forflex: initial
flex-1
forflex: 1
flex-auto
forflex: auto
flex-none
forflex: none
flex-grow
forflex-grow: 1
flex-shrink
forflex-shrink: 1
flex-no-grow
forflex-grow: 0
flex-no-shrink
forflex-shrink: 0
Modifiers
Hover
To apply a specific style on hover, prefix the class with hover:
.
That concludes our Tailwind Cheat Sheet! Keep this handy resource within reach to streamline your development process.