Tailwind CSS Cheatsheet - Flex, Grid & Spacing

SymptomFlex children have no spacing at all between them, even though a margin class was written.

CauseA margin on the parent only affects its relationship with the outside, not the gaps between children; child spacing needs gap or space-*.

FixWrite gap-4 on the flex container (or space-x-4 / space-y-4) instead of adding margin to each child.

SymptomStyles with an md: or lg: prefix do not take effect in the browser even though the window is clearly wide.

CauseBreakpoints follow mobile-first min-width semantics: unprefixed styles are the default below large screens, and prefixed styles only override at that width and above; also the class names must be spelled out completely.

FixVerify the prefix is spelled correctly (md:grid-cols-3, not md:grid-cols-three), and put the base single-column form earlier in the class list and the wide-screen form later.

SymptomIn dark mode text and background are nearly the same color and the whole page is unreadable.

CauseOnly the background was changed (e.g. dark:bg-gray-800) without changing the text color, so the default dark text disappears against the dark background.

FixSet background and text colors in pairs, e.g. class="bg-white text-gray-900 dark:bg-gray-800 dark:text-white".

SymptomLong text breaks out of cards or buttons and pushes the layout into a horizontal scrollbar.

CauseMissing single-line overflow or word-break handling, and flex children default to min-width:auto so they do not shrink below their content.

FixAdd truncate or break-words to the text container; add min-w-0 to the flex child when you need tight control.

Symptomhover effects do not respond on phones and the element looks broken.

Causehover is a pointer-device-specific pseudo-class; touchscreens have no stable hover state, so the style does not change on tap.

FixAdd an active: state as a touch fallback for key interactions, paired with transition-colors for visible feedback.

SymptomThe utility classes you wrote are not generated into the stylesheet at all—nowhere in the build output.

CauseTailwind generates class names from the file contents it scans; class names written in template-string concatenation, dynamic variables, or paths missing from content are not picked up.

FixWrite class names as complete static literals, or add the relevant paths to the content config so the scan covers that file.

SymptomTwo flex-1 children have misaligned widths, or one child is squeezed to zero width.

CauseThe parent has no flex-wrap and the children differ widely in content width; combined with the default min-width, the flex ratio is not what you expect.

FixAdd flex-wrap to the parent and min-w-0 to children that need to shrink, so their minimum content width does not break the layout.

SymptomAn absolutely positioned element escapes to the edge of the page or gets clipped, and raising z-index changes nothing.

Causeabsolute resolves against the nearest positioned ancestor; when no ancestor is relative or absolute it falls back to a further container or the initial containing block, and an overflow-hidden ancestor can clip it on the way.

FixGive the parent you meant to use as the reference position: relative, then order the layers with z-10 or z-50.