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 padding
    • m stands for margin
    • -m represents negative margin

    Additionally, you can combine these classes with directional and sizing modifiers:

    • t for top
    • r for right
    • b for bottom
    • l for left
    • x 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 to 32. Additionally, px corresponds to 1px and auto represents auto value.

    For example:

    • pt-2 represents padding-top: 0.5rem
    • m-auto represents margin: 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 for display: flex
  • inline-flex for display: inline-flex

Items

Direction

  • flex-row for flex-direction: row
  • flex-row-reverse for flex-direction: row-reverse
  • flex-col for flex-direction: column
  • flex-col-reverse for flex-direction: column-reverse

Wrapping

  • flex-no-wrap for flex-wrap: nowrap
  • flex-wrap for flex-wrap: wrap
  • flex-wrap-reverse for flex-wrap: wrap-reverse

Align Items

  • items-stretch for align-items: stretch
  • items-start for align-items: flex-start
  • items-center for align-items: center
  • items-end for align-items: flex-end
  • items-baseline for align-items: baseline

Align Content

  • content-start for align-content: flex-start
  • content-center for align-content: center
  • content-end for align-content: flex-end
  • content-between for align-content: space-between
  • content-around for align-content: space-around

Align Self

  • self-auto for align-self: auto
  • self-start for align-self: flex-start
  • self-center for align-self: center
  • self-end for align-self: flex-end
  • self-stretch for align-self: stretch

Justify Content

  • justify-start for justify-content: flex-start
  • justify-center for justify-content: center
  • justify-end for justify-content: flex-end
  • justify-between for justify-content: space-between
  • justify-around for justify-content: space-around

Flex, Grow, Shrink

  • flex-initial for flex: initial
  • flex-1 for flex: 1
  • flex-auto for flex: auto
  • flex-none for flex: none
  • flex-grow for flex-grow: 1
  • flex-shrink for flex-shrink: 1
  • flex-no-grow for flex-grow: 0
  • flex-no-shrink for flex-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.