CSS Effects in Interactive Examples Don't Seem to Work in the Tailwind CSS v4 Documentation

[theanh111]

Hi Tailwind CSS team,

I've noticed a difference between the interactive examples in the Tailwind CSS v3.4 and v4 documentation.

In the v3.4 documentation, the CSS effects in the examples work as expected, allowing users to interact with the components and see how the styles behave in practice. However, in the latest v4 documentation, these effects no longer seem to work as they did in the previous version. This doesn't appear to be limited to hover effects; other CSS interactions and state-based styles in the examples seem to be affected as well.

I'm not sure whether this is a bug or an intentional change, but it makes the documentation less useful for my learning process. When reading the docs, I often want to interact with the examples to understand how the CSS utilities work in real situations, rather than just reading the code.

Is this a known issue, or has the behavior of these interactive examples intentionally changed in v4? It would be helpful if the examples could provide the same interactive experience as they did in v3.4.

I've attached a short screen-recording comparing the two versions for reference.

Thanks for your work on Tailwind CSS!

[wongjn]

You could be experiencing a chromium bug with laptop that has a touchscreen, see #17421

[theanh111]

Oh I see, thank you for your help!