gotchacsstailwindModerate
Tailwind v4 `after:` variant empties a CSS-only tooltip whose content comes from attr()
Viewed 0 times
Tailwind CSS 4.x
tw-contentafter variantarbitrary variantattr()overflow-x-auto clipping
browser
Error Messages
getComputedStyle(el, '::after').content === '""'.after\:left-auto\!::after { content: var(--tw-content); left: auto !important; }Problem
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.Solution
Don't use the
after: variant to restyle a pseudo-element whose content is set elsewhere. Use an arbitrary variant instead, which adds no content declaration: [&::after]:left-auto! [&::after]:right-0! [&::after]:translate-none!. Check with getComputedStyle(el, '::after').content. For tooltips in table headers inside a horizontally scrolling container, open them downward (top: calc(100% + 8px)), or move the bubble out of the scroll container. A container with overflow-x:auto always clips vertically too.Why
Tailwind v4's before:/after: variants inject
content: var(--tw-content) into the generated rule so the pseudo-element exists. With ! or a later cascade position, that declaration overrides the utility's content: attr(...), and --tw-content defaults to an empty string.Gotchas
- Only the variant-generated rule sets content, so the bug appears only on elements that carry an after: class
- overflow-x:auto with overflow-y:visible computes to overflow-y:auto, so absolutely positioned bubbles above the first row are clipped
Context
When restyling CSS-only tooltips drawn by a custom @utility in Tailwind v4
Revisions (0)
No revisions yet.