Navigate
HomeStart here
MusingsResearch & long-form
BuildingProjects & learnings
WorkProfessional practice
RunningTraining & races
AboutValues & identity
Life & PlacesCulture, food, travel, cities
Notes & ArchiveJournals, essays, portfolio
← Back to Building
CASE STUDYFeb 2026

The CSS Bug in 51 Files

A single CSS shorthand rule in globals.css silently broke spacing across 51 files. Tailwind’s `pt-12` was being overridden by `padding: 0 1.5rem` — and it took a full site audit to find it.

csstailwinddebuggingcascadespacing

Content was cramming up against toolbars, heroes, and dividers across the entire FTI training portal. Every page looked slightly wrong but in different ways — some had 8px of breathing room where there should have been 48px, others had content touching horizontal rules. It was the kind of bug that doesn’t scream at you. It whispers. You squint at it and think “maybe that’s just how the page looks.”

I kept fixing individual pages. “Add pt-12 here. Oh, that one needs pt-16.” Whack-a-mole. It kept coming back because I was treating symptoms, not the root cause. I’d fix five pages, and the next session I’d find three more with the same problem. The padding just kept disappearing.

The root cause was in globals.css: `.container-editorial { padding: 0 1.5rem; }`. CSS shorthand `padding: 0 1.5rem` expands to `padding-top: 0; padding-right: 1.5rem; padding-bottom: 0; padding-left: 1.5rem`. Those `padding-top: 0` and `padding-bottom: 0` declarations are unlayered CSS — they beat Tailwind’s `@layer utilities` in the cascade. Every `pt-12` and `pb-8` was being silently zeroed out. One line of CSS was overriding hundreds of Tailwind classes across the entire site, and there was no error, no warning, nothing.

The fix was surgical: changed `padding: 0 1.5rem` to `padding-inline: 1.5rem` — which only sets left and right padding, leaving top and bottom for Tailwind to control. Then I audited all 136+ pages and fixed 51. Three pages had negative margins (`-mt-6`) compensating for the broken padding. Twenty-four had insufficient padding. Twelve had borderline padding that looked “okay” but wasn’t right. The fix also eliminated around 80 instances of sticky toolbars that existed solely to compensate for the broken spacing.

The lesson I keep coming back to: CSS shorthand is a cascade bomb. One line can override hundreds of Tailwind classes without any visible error. When you see spacing bugs scattered across many pages, stop fixing individual files. Look for a global rule first. The bug is almost never in the 51 files — it’s in the one file they all share.

/* The bug — globals.css */
.container-editorial {
  padding: 0 1.5rem;
  /* Expands to:
     padding-top: 0;      ← kills Tailwind pt-*
     padding-right: 1.5rem;
     padding-bottom: 0;   ← kills Tailwind pb-*
     padding-left: 1.5rem;
  */
}

/* The fix */
.container-editorial {
  padding-inline: 1.5rem;  /* Only left/right, Tailwind owns top/bottom */
}

/* Scope: 51 files, 136+ pages audited */
/* 3 pages: negative margins → pt-12 */
/* 24 pages: insufficient padding → pt-12 pb-8 */
/* 12 pages: borderline padding → py-12 */