Tailwind CSS Cheatsheet Online — Complete Searchable Utility Class Reference

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. Instead of writing custom CSS, you compose designs by applying small, single-purpose classes like flex, pt-4, text-gray-700, and rounded-lg. The result is highly consistent, maintainable designs without leaving HTML.

Tailwind's utility-first approach requires familiarity with its class naming conventions. A cheatsheet helps developers look up class names during development without interrupting workflow.

Essential Tailwind Class Categories

Layout

/* Display */
block inline inline-block flex inline-flex grid hidden

/* Position */
static relative absolute fixed sticky

/* Overflow */
overflow-hidden overflow-auto overflow-scroll overflow-visible

/* Z-index */
z-0 z-10 z-20 z-30 z-40 z-50 z-auto

Flexbox

flex flex-row flex-col flex-wrap flex-nowrap
justify-start justify-center justify-end justify-between justify-around
items-start items-center items-end items-stretch
gap-1 gap-2 gap-4 gap-6 gap-8
flex-1 flex-auto flex-none grow shrink

Grid

grid grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-6 grid-cols-12
col-span-1 col-span-2 col-span-full
grid-rows-1 grid-rows-2 grid-rows-3
row-span-1 row-span-2

Spacing (Padding and Margin)

/* Padding */
p-0 p-1 p-2 p-3 p-4 p-5 p-6 p-8 p-10 p-12 p-16 p-20
px-4 py-2 pt-4 pr-4 pb-4 pl-4

/* Margin */
m-0 m-auto mx-auto my-4 mt-4 mr-4 mb-4 ml-4
-mt-4 (negative margin)

Sizing

/* Width */
w-full w-screen w-auto w-1/2 w-1/3 w-1/4 w-2/3
w-4 w-8 w-16 w-32 w-64 w-96
min-w-0 min-w-full max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-7xl

/* Height */
h-full h-screen h-auto h-4 h-8 h-16 h-32 h-64
min-h-screen max-h-96

Typography

/* Font size */
text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl

/* Font weight */
font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold

/* Text color */
text-white text-black text-gray-500 text-gray-900
text-red-500 text-green-500 text-blue-500

/* Text alignment */
text-left text-center text-right text-justify

/* Line height */
leading-none leading-tight leading-normal leading-relaxed leading-loose

Background Colors

bg-white bg-black bg-transparent
bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-500 bg-gray-900
bg-red-500 bg-yellow-400 bg-green-500 bg-blue-500 bg-purple-500
bg-gradient-to-r from-purple-500 to-pink-500

Borders

/* Border width */
border border-0 border-2 border-4 border-8

/* Border radius */
rounded rounded-sm rounded-md rounded-lg rounded-xl rounded-2xl rounded-full

/* Border color */
border-gray-200 border-gray-300 border-blue-500

Effects and Shadows

shadow shadow-sm shadow-md shadow-lg shadow-xl shadow-2xl shadow-none
opacity-0 opacity-25 opacity-50 opacity-75 opacity-100
ring-1 ring-2 ring-4 ring-blue-500

Responsive Prefixes

/* Mobile first breakpoints */
sm:  /* 640px+ */
md:  /* 768px+ */
lg:  /* 1024px+ */
xl:  /* 1280px+ */
2xl: /* 1536px+ */

/* Example */
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3

State Variants

hover:bg-blue-600
focus:ring-2 focus:ring-blue-500
active:scale-95
disabled:opacity-50
dark:bg-gray-800 dark:text-white

Frequently Asked Questions

What version of Tailwind does this cheatsheet cover?

The cheatsheet covers Tailwind CSS v3 and v4 classes. Tailwind v4 introduced significant changes including a CSS-first configuration approach and new utility classes. The tool notes when a class is v4-specific.

How do I use arbitrary values in Tailwind?

Use square bracket notation: w-[350px], text-[#FF5733], mt-[2.5rem]. This lets you use any value outside Tailwind's design scale when needed, without writing custom CSS.

What is the @apply directive?

@apply lets you use Tailwind utilities within CSS files: .btn { @apply px-4 py-2 rounded-md bg-blue-500 text-white; }. This is useful for extracting repeated component patterns while keeping Tailwind as the source of truth.

How do I customize Tailwind's default values?

In Tailwind v3: extend the tailwind.config.js theme object. In Tailwind v4: add CSS variables in your CSS file. Custom values integrate seamlessly with all Tailwind utilities and responsive/state variants.

Is the cheatsheet free?

Yes, completely free with no signup required.