Tailwind CSS States and Variants

hover:bg-blue-500 # change bg on hover
hover:text-white # change text on hover
hover:scale-110 # scale on hover

focus:outline-none # remove outline
focus:ring-2 # add focus ring
focus:ring-blue-500 # focus ring color
focus:border-blue-500 # border on focus

active:bg-blue-700 # style when active
active:scale-95 # scale down when clicked

disabled:opacity-50 # style when disabled
disabled:cursor-not-allowed # cursor when disabled

group # parent element
group-hover:text-blue-500 # style when parent hovered

dark:bg-gray-800 # dark mode background
dark:text-white # dark mode text