tailwind

Cards that refuse to line up with the navbar logo come down to gutters: every container moved from px-4 sm:px-6 lg:px-8 to px-3 sm:px-4.

TL;DR: A misaligned card row turned out to be a Tailwind gutter mismatch: the main section used px-4 sm:px-6 lg:px-8 while the navbar used px-3 sm:px-4, leaving a 16-pixel difference at large screens. The fix normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4, giving one source of truth. Lesson: straight-line misalignment usually means two padding systems assumed identical.

Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.

TL;DR: The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.

A theme override using the background shorthand silently reset background-clip:text from the base rule, so gradient text rendered as a solid color box.

TL;DR: A CSS background shorthand silently reset background-clip:text, turning gradient text into a solid color box. Swapping to the background-image longhand fixed it, since the base rule's clipping stayed intact. Lesson: the background shorthand resets what you don't set, so per-theme visual checks are now mandatory before pushing.

Hardcoded white GitHub and Next.js icons disappeared the moment the light-mode footer card turned solid white. The fix: var(--foreground).

TL;DR: Fixing the footer card to solid white made hardcoded white icons vanish on white. Swapping every #ffffff in Footer.tsx for var(--foreground) lets icons adapt automatically across themes. Same for the neon gradient: added a denser light-mode variant so it stays visible on white.

Cards styled bg-card/20 through /90 nearly vanished in light mode because Tailwind v4's opacity modifier compiles to color-mix with a token variable.

TL;DR: Tailwind's opacity modifier compiles bg-card/50 into a color-mix() blend against the --card CSS variable, so the same class renders differently per theme. Dark mode contrast hid the issue; light mode made white blends at 20–90% opacity melt into the background. The fix: a light-mode CSS override forcing solid card colors, with shadows for depth instead of alpha.

The source list and the chat fought over one overlay. Two panels with different z-index plus render-time visibility ended the fight.

Tag-matched related articles kept missing the point. Swap in cosine similarity, add a TLDR box, and make search live, all fail-safe against an old API.

Tired of the stiff left border on my blog TOC, I swapped it for a Tailwind gradient spine that fades downward. Pure CSS utility, plus a note on the bg-gradient-to-* rename in v4.

Orange looked great in dark mode but washed out in light. A split accent, emerald-600 in light and mint in dark, clears the WCAG contrast bar in both.