[v4] peer and peer-checked not working

[ev3rlost]

It worked flawlesly in v3, but after upgrading to v4 the code is broken.

Example:
https://play.tailwindcss.com/SD9XVEa1ZJ

Try switching between versions and you'll see.

Is it that peer has not been implemented in v4 yet? Just asking, so I don't waste my time debugging any further.

[adamwathan]

Hey! This is because of a breaking change around variant order, need to change this:

- [&>span]:peer-checked:translate-x-full
+ peer-checked:[&>span]:translate-x-full

Here's an updated Play: https://play.tailwindcss.com/SD9XVEa1ZJ

Curious what you think of the change too, we made it so things read left to right like a CSS selector instead of inside-out like they have historically.

[ev3rlost]

Thank you so much Adam! It works like a charm, and I do think the new syntax is much more readable and makes more sense!

I know it will be a lot easier once the new docs are written for v4 - as for now, we're just testing and experimenting and asking questions :)

[bitofbreeze]

I think there is an issue doing @apply peer in the css file. I get

[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: peer

Same goes for group

[wongjn]

peer and group aren't utility classes by themselves, hence the error. Rather, they're "markers" for the peer-* and group-* variants to work from.

[bitofbreeze]

Thanks @wongjn so is there any way to specify peer or group markers in a CSS file?

[wongjn]

You could use arbitrary variants:

Peer

<input type="checkbox" class="foo">
<div class="hidden [.foo:checked+&]:block">…</div>

Equivalent to:

<input type="checkbox" class="peer">
<div class="hidden peer-checked:block">…</div>

Group

<div class="bar">
  <div class="[.bar:hover_&]:bg-red-200">…</div>
</div>

Equivalent to:

<div class="group">
  <div class="group-hover:bg-red-200">…</div>
</div>

---

See these in this Tailwind Play.