Recent Entries 3
- gotcha moderate 39m agoTailwind v4: arbitrary px breakpoint (min-[1120px]:) loses to md: when theme breakpoints are in remIn 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`).
- pattern moderate 3h agoTailwind v4 after: variant wipes custom ::after tooltip text (content: var(--tw-content))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.
- pattern tip 17h agoRestyle a whole Tailwind 4 app to a new visual reference without mixing two styles per screenWhen 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.