Safari 16.4 Compatibility Issue with Tailwind CSS select-none and selection: Pseudo-class

[tech-zjf]

Safari：

Expect:

Code:

Environment:

Tailwind CSS version: v3.4.1
NodeJs: v18.18.2
NextJs: v19

[rozsazoltan]

Could you share the code as text? It's quite hard to type it out from a photo when you already have it. Alternatively, could you maybe put together a playground (without React) on play.tailwindcss.com?

[rozsazoltan]

Regardless of that, the issue lies with select-none. By default, the utility looks like this in both v3 and v4:

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

This works as expected on the latest WebKit.

[rozsazoltan]

::selection CSS pseudo-element not supported by Safari on iOS: https://caniuse.com/css-selection