Web Toolkit

Tailwind CSS Logic Cheat Sheet

Core Logic

Spacing, Sizing, and Layout

Rule: The number is a multiplier of 0.25rem (which is 4px in most browsers).

Formula: utility-{number} = property: (number * 0.25)rem;

Applies to: padding, margin, width, height, gap, top/left/right/bottom

Examples:
  • p-4 = padding: 1rem; (4 * 0.25)
  • m-8 = margin: 2rem; (8 * 0.25)
  • w-16 = width: 4rem; (16 * 0.25)

Colors & Opacity

Rule: Colors use a 50-900 shade scale, from lightest to darkest. Opacity uses a 0-100 scale.

Applies to: background-color, color (text), border-color, opacity

Examples:
  • bg-blue-100 (very light blue)
  • bg-blue-500 (standard blue)
  • bg-blue-900 (very dark blue)
  • opacity-50 = opacity: 0.5;

Font Weight

Rule: Maps directly to the standard CSS font-weight property values.

Applies to: font-weight

Examples:
  • font-thin = 100
  • font-normal = 400
  • font-medium = 500
  • font-bold = 700
  • font-black = 900

Categories

Layout

  • block: display: block;
  • flex: display: flex;
  • grid: display: grid;
  • hidden: display: none;

    Hides an element.

  • relative: position: relative;
  • absolute: position: absolute;
  • fixed: position: fixed;
  • top-0: top: 0px;

    Uses the Spacing Rule. e.g., top-4 = 1rem

  • left-0: left: 0px;

    Uses the Spacing Rule. e.g., left-4 = 1rem

  • overflow-hidden: overflow: hidden;
  • overflow-auto: overflow: auto;
  • z-10: z-index: 10;

    Scale: z-0, z-10, z-20, z-30, z-40, z-50

Flexbox & Grid

  • flex-row: flex-direction: row;
  • flex-col: flex-direction: column;
  • justify-center: justify-content: center;
  • justify-between: justify-content: space-between;
  • items-center: align-items: center;
  • items-start: align-items: flex-start;
  • gap-4: gap: 1rem;

    Uses the Spacing Rule.

  • flex-grow: flex-grow: 1;
  • flex-shrink: flex-shrink: 1;
  • flex-wrap: flex-wrap: wrap;
  • grid-cols-3: grid-template-columns: repeat(3, 1fr);

    e.g., grid-cols-1, grid-cols-2...

Sizing & Spacing

  • p-4: padding: 1rem;

    Uses Spacing Rule. Prefixes: p, px, py, pt, pr, pb, pl

  • m-4: margin: 1rem;

    Uses Spacing Rule. Prefixes: m, mx, my, mt, mr, mb, ml

  • space-x-4: margin-left: 1rem;

    Adds margin to all children except the first.

  • w-16: width: 4rem;

    Uses the Spacing Rule.

  • h-16: height: 4rem;

    Uses the Spacing Rule.

  • w-1/2: width: 50%;

    Fractional. Also w-1/3, w-2/3, w-1/4, etc.

  • w-full: width: 100%;
  • w-screen: width: 100vw;
  • h-full: height: 100%;
  • h-screen: height: 100vh;
  • max-w-md: max-width: 28rem;

    Uses keywords (sm, md, lg, xl...) for container sizes.

Typography

  • text-sm: font-size: 0.875rem;

    Scale: text-xs, text-sm, text-base (1rem), text-lg, text-xl...

  • text-gray-700: color: #374151;

    Uses the Color Rule.

  • font-bold: font-weight: 700;

    Uses the Font Weight Rule.

  • font-medium: font-weight: 500;
  • text-center: text-align: center;
  • text-left: text-align: left;
  • italic: font-style: italic;
  • underline: text-decoration: underline;
  • no-underline: text-decoration: none;

Borders & Effects

  • rounded: border-radius: 0.25rem;

    Scale: rounded-sm, rounded-md, rounded-lg, rounded-full

  • border: border-width: 1px;
  • border-2: border-width: 2px;

    Pixel scale: border-0, border-2, border-4, border-8

  • border-blue-500: border-color: #3b82f6;

    Uses the Color Rule.

  • shadow: box-shadow: ...;

    Scale: shadow-sm, shadow-md, shadow-lg, shadow-xl

  • opacity-50: opacity: 0.5;

    Scale: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100

Arbitrary Values

Arbitrary Values (The Escape Hatch)

If you need a specific value that isn't in the theme, use square brackets [].

Examples:
  • w-[300px] = width: 300px;
  • h-[55vh] = height: 55vh;
  • top-[117px] = top: 117px;
  • bg-[#FF0000] = background-color: #FF0000;