A custom utility draws a tooltip in ::after with `content: attr(aria-label)`. Adding a Tailwind v4 variant on the same element to move the bubble (e.g. `after:left-auto! after:-right-2!`) makes the bubble an empty pill: the text disappears on hover and focus. Separately, a tooltip that opens above the first row of a table wrapped in `overflow-x-auto` gets its top cut off, because overflow-x:auto forces overflow-y to auto as well.

Three related bugs in a horizontally scrolling data table with sticky (frozen) left columns and a sticky right "+" column, plus header popovers: (1) a border-left on a position:sticky cell in a border-collapse table is not visible until the table is scrolled to the end; (2) a closed popover list with a Tailwind `flex` class is rendered open inside the header cell; (3) keyboard focus lands on a header link half hidden under the sticky columns, even with scroll-padding on the scroll container.

An icon button meant to be visible only on keyboard focus used a custom @utility for its round shape (width, height, display) together with sr-only and focus-visible:not-sr-only. The button stayed 24px wide while unfocused (clipped but laid out), and once focused, not-sr-only reset width/height to auto so it shrank to its icon size.

A small stroked SVG icon (e.g. a 10 px chevron drawn on a 16-unit viewBox, stroke-width 1 so about 0.6 CSS px) has the right ink box and the right color token, but next to a reference screenshot it looks paler: at 2x, each row shows two equal mid-gray pixels and no row reaches the token color. The cause is that the stroke centre falls exactly on a pixel boundary.

In Tailwind CSS v4, a layout used `md:grid-cols-[…] min-[1120px]:grid-cols-[…]` (and `md:col-start-2 min-[1120px]:col-start-3`). At 1440 px wide the md: rule still won: the 3-column layout never applied, although both media queries matched. The theme breakpoint md was redefined in rem (`--breakpoint-md: 50rem`).

A CSS-only tooltip utility draws its bubble with ::after { content: attr(aria-label) }. Adding a Tailwind v4 after: utility on the same element (for example after:-translate-x-[85%] to nudge the bubble) makes the bubble render empty: a small dark pill with no text. With the important modifier (!) it is guaranteed to win.

A collapsed icon rail that widens on hover and opens per-category flyout submenus (popover="auto") collapses as soon as the mouse moves onto the flyout or leaves, leaving the flyout floating detached; using :focus-within to expand it for keyboard users keeps it stuck open after a mouse click, because hidePopover() returns focus to the invoker button. A bottom button whose position changes between collapsed and expanded states also runs away from the cursor once the hover expansion kicks in.

When an existing Tailwind 4 app must be restyled to match a reference UI (colors, font, radii, component shapes) screen by screen across many PRs, intermediate states mix the old and new palettes on the same screen, and copy-pasted class strings (buttons, inputs) drift. Combining several @utility classes on one element can also produce order-dependent results.

When documenting a web app's current visual design from public material, screenshots in help articles mix several design generations (old theme, beta theme, current theme) even when the article's 'last updated' date is recent. Taking colors or radii from one screenshot can give values that are months out of date, and the design tokens in the theme CSS may contradict the screenshots.

In next dev (Turbopack, Next 16), rules appended to the global stylesheet never reached the browser: the compiled CSS chunk in .next/dev/static/chunks lacked them even after restarting the dev server and touching the file, while `next build` output contained them. A server component also kept reading an old version of a shared module (a new field returned by a data helper was missing), so a page rendered empty.