peer-checked:after:translate-x-6 works in Tailwind Play but not locally

[Alix35301]

Bug Description

The utility class peer-checked:after:translate-x-6 works perfectly in Tailwind Play but fails to generate CSS locally with Tailwind 4.

Expected Behavior

Should generate CSS for transforming ::after pseudo-element when peer is checked (like it does in Tailwind Play)

Actual Behavior

Tailwind Play ✅

• peer-checked:after:translate-x-6 works correctly

Local Environment ❌

• peer-checked:translate-x-6 works ✅
• after:translate-x-6 works ✅
• peer-checked:after:translate-x-6 doesn't work ❌

Environment

Tailwind CSS: 4.x
Browser: Chrome
OS: Arch Linux
Tailwind Play: Works ✅ https://play.tailwindcss.com/
Local setup: Doesn't work ❌
Network cache disabled

Code

<div class="">
    <label class="relative m-auto">
        <input class="peer sr-only" type="checkbox" />
        <div class="toggle relative w-12 h-6 mt-2 after:content-[''] after:size-4 after:bg-white after:absolute after:top-1 after:start-[4px] after:transition-all transition-all after:rounded-full peer-checked:bg-green-500 rounded-full p-2 peer-checked:after:translate-x-6 bg-gray-300"></div>
    </label>
</div>

[wongjn]

Could you provide a git repo that reproduces your issue please?

[Alix35301]

Closing this issue – turns out the translate-* utility did work when I forced it with !important (using !translate-*). Something else was overriding the styles in my setup. This isn’t an issue with Tailwind itself. Thanks!