Tailwind CSS State Modifiers

This skill covers variants that target CSS states and pseudo-elements other than interaction states (hover, focus, active). Use it together with :

tailwind-syntax-variants : full variant grammar including hover/focus, group/peer, attribute, and arbitrary variants
tailwind-syntax-responsive : breakpoint and container-query variants
tailwind-syntax-dark-mode : the dark: variant configuration

Quick Reference : Variant Categories

Category	Examples
Structural position	`first:`, `last:`, `only:`, `odd:`, `even:`, `first-of-type:`, `last-of-type:`, `only-of-type:`, `nth-[...]:`, `empty:`
Pseudo-elements	`before:`, `after:`, `placeholder:`, `file:`, `marker:`, `selection:`, `first-letter:`, `first-line:`, `backdrop:`
Motion preference	`motion-safe:`, `motion-reduce:`
Form input state	`required:`, `optional:`, `valid:`, `invalid:`, `user-valid:`, `user-invalid:`, `disabled:`, `enabled:`, `checked:`, `indeterminate:`, `default:`, `in-range:`, `out-of-range:`, `placeholder-shown:`, `autofill:`, `read-only:`
Target / Open	`target:`, `open:`

tailwind-syntax-state-modifiers

Tailwind CSS State Modifiers

Quick Reference : Variant Categories