Instructions and covered skills
Read each prompt carefully before selecting an answer. Focus on the exact relationship between the element being styled and the state that triggers the style. Consider how Tailwind prefixes are composed from left to right. Avoid relying on assumptions from plain CSS when a Tailwind variant has specific selector behavior. Turn off notifications and work in an environment with minimal distractions. Review your selection before moving on, especially when a prompt includes parent, sibling, or attribute state.
Key Areas
This test covers the Tailwind CSS variant system used to express contextual styling in component markup. Candidates work with interaction variants such as hover, focus, focus-visible, active, and disabled. These variants are central to buttons, links, controls, menus, and other interactive elements because they connect visual feedback to user input and keyboard navigation.
The test also examines relationship-based variants. The group pattern allows a descendant to respond to a state on an ancestor marked with group, while the peer pattern allows a following sibling to react to a marked sibling's state. Named groups and peers are included because they prevent state conflicts when nested components have separate interaction contexts. Questions also address has-[] selectors, which let an element respond to conditions within its descendants.
Attribute-driven styling is another key area. Candidates should recognize how Tailwind responds to ARIA attributes, data attributes, and boolean states such as checked, selected, invalid, open, and expanded. These patterns are frequently used with accessible disclosure controls, tabs, form validation, and components managed by JavaScript libraries.
Finally, the test covers structural and environmental variants, including first, last, odd, even, nth-[], motion-reduce, and responsive prefixes. Candidates must reason about variant order and determine which element receives the resulting utility.
Recommended Preparation
Review Tailwind documentation for hover, focus, group, peer, arbitrary variants, attribute variants, and structural pseudo-class variants. Practice by building a navigation menu, custom checkbox, accordion trigger, form field, and selectable card. Inspect the generated CSS or browser selectors when behavior is unclear. Pay particular attention to whether a variant targets the current element, a descendant, a following sibling, or an ancestor. Use semantic HTML and appropriate ARIA attributes while practicing so state styling remains aligned with accessible component behavior.