tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

Only apply hover on devices that support hover (#14500 )

This PR updates the `hover` variant to only apply when `@media (hover:
hover)` matches.

```diff
  .hover\:bg-black {
    &:hover {
+     @media (hover: hover) {
        background: black;
+     }
    }
  }
```

This is technically a breaking change because you may have built your
site in a way where some interactions depend on hover (like opening a
dropdown menu), and were relying on the fact that tapping on mobile
triggers hover.

To bring back the old hover behavior, users can override the `hover`
variant in their CSS file back to the simpler implementation:

```css
@import "tailwindcss";
@variant hover (&:hover);
```

I've opted to go with just `@media (hover: hover)` for this because it
seems like the best trade-off between the available options. Using
`(any-hover: hover)` would mean users would get sticky hover states when
tapping on an iPad if they have a mouse or trackpad connected, which
feels wrong to me because in those cases touch is still likely the
primary method of interaction.

Sites built with this feature in mind will be treating hover styles as
progressive enhancement, so it seems better to me that using an iPad
with a mouse would not have hover styles, vs. having sticky hover styles
in the same situation.

Of course users can always override this with whatever they want, so
making this the default isn't locking anyone in to a particular choice.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

2024-09-24 11:43:57 -04:00

.github

ci: speedup windows integrations tests (#14485 )

2024-09-20 15:59:18 -04:00

crates

Release v4.0.0-alpha.24 (#14395 )

2024-09-12 16:10:56 +02:00

integrations

Resolve @import in core (#14446 )

2024-09-23 17:05:55 +02:00

packages

Only apply hover on devices that support hover (#14500 )