feat: add self-hover variant for direct pointer hover only

[seb-jean]

Summary

When a <label for="id"> is hovered, browsers (Chromium, WebKit) propagate the :hover pseudo-class to the associated form control. This means hover: utilities on inputs, checkboxes, selects, etc. trigger even when the pointer is over the label text, not the control itself.

The new self-hover variant solves this by generating a selector that requires the element's direct parent to also be :hover:

@media (hover: hover) {
  :where(:hover) > .self-hover\:border-zinc-950\/20:hover {
    border-color: ...;
  }
}

When the pointer is directly over the input, both the input and its parent wrapper receive :hover. When :hover is propagated from a <label for>, only the input receives it — the parent wrapper does not, because the pointer is physically elsewhere. The :where() wrapper keeps the parent selector at zero specificity.

The form control must have a parent wrapper element. If the input and label are direct siblings with no wrapper, the parent is shared and self-hover behaves like hover.

Test Plan

• All tests pass
• Manually tested in a local project with form fields (text input + checkboxes with <label for>)

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f56dde6a-b3f3-4d34-98ba-d6567846a881

📥 Commits

Reviewing files that changed from the base of the PR and between 90f8ff4 and 8c09e6d.

⛔ Files ignored due to path filters (1)

• packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/tailwindcss/src/variants.test.ts
• packages/tailwindcss/src/variants.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

Adds a self-hover variant for direct pointer hover. The variant emits styles within (hover: hover) and uses a parent :where(*:hover) selector with a direct :hover target. Tests cover generated CSS and reject modifiers. The changelog documents the new variant.

Merge Risk: ⚪ Minimal · up to 8c09e

This PR adds a localized self-hover variant for direct pointer hover behavior; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a self-hover variant for direct pointer hover.
Description check	✅ Passed	The description accurately explains the self-hover behavior, generated selector, hover propagation issue, limitations, and test plan.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with its documented shared-parent limitation matching the generated selector’s behavior.

The new variant compiles to the intended parent-and-element hover selector, is exposed through IntelliSense, and has focused output coverage; no concrete unacknowledged failure remains.

_{Reviews (1): Last reviewed commit: "feat: add self-hover variant for direct ..." | Re-trigger Greptile}

[AnmiTaliDev]

lgtm

[RobinMalfait]

Hey! I appreciate the PR, but this only solves the problem if you are using a specific HTML structure.

If you are using the nested approach, then it works as expected:

<label class="flex max-w-sm flex-col p-8">
  Label
  <input type="text" class="border p-2 self-hover:text-red-500" />
</label>

because of the child/parent relationship requirement.

But many people using a non-nested relationship and use a for/id attribute setup instead:

<div class="flex max-w-sm flex-col p-8">
  <label for="foo">Label</label>
  <input id="foo" type="text" class="border p-2 self-hover:text-red-500" />
</div>

For this markup, the solution doesn't work. I don't think we should add generic solutions for specific problems. So I would suggest to add this solution to your own project instead where you can guarantee that you are using the first flavor of HTML markup:

@custom-variant self-hover {
  @media (hover: hover) {
    :where(*:hover) > &:hover {
      @slot;
    }
  }
}

Tailwind Play: https://play.tailwindcss.com/aSx5mf663g

[seb-jean]

Ah, that's a shame; I'm using plain HTML and wanted to replicate the same behavior as the Catalyst example (https://catalyst.tailwindui.com/docs/input) without necessarily having to create a custom variant.