Tailwind CSS Syntax: Variants

Variants are the conditional prefixes that turn a flat utility (bg-blue-500) into a state-aware rule (hover:bg-blue-500, md:dark:hover:bg-blue-500). Tailwind defines around 100 built-in variants spread across ten families plus arbitrary [&...] escape hatches. Master this and you master 90% of real-world Tailwind markup.

Quick Reference

Variant families at a glance