Tailwind CSS v4

How to write idiomatic Tailwind v4 and spot v3-era syntax that still compiles but should not appear in new code.

Version and sources

Check the pinned version before using recent utilities: the playground packages pin tailwindcss in their package.json (4.3.3 at the time of writing, including v4.3 utilities like scrollbar-*, zoom-*, and tab-*). When unsure whether a utility, variant, or directive exists in the pinned version, verify against the docs instead of guessing:

• Utility/variant reference: https://tailwindcss.com/docs
• v3 → v4 migration: https://tailwindcss.com/docs/upgrade-guide
• What each minor added: https://tailwindcss.com/blog/tailwindcss-v4 (and /tailwindcss-v4-1, /tailwindcss-v4-3, ...)

CSS-first configuration

Tailwind v4 is configured in CSS, not JavaScript.