Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Tailwind CSS · Question Set
State Variants & Pseudo-Classes interview questions for placements and exams.
Questions
15
Included in this set
Subject
Tailwind CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Tailwind CSS.
The 'hover:' prefix applies a style when the user hovers over an element. It’s commonly used for button, link, or card hover effects in Tailwind.
class='bg-blue-500 hover:bg-blue-700'
For complete preparation, combine this set with full subject-wise practice for Tailwind CSS. You can also explore other subjects and sets from the links below.
You can use 'first:' and 'last:' variants to style the first or last element in a list. It’s helpful for rounded corners or removing extra borders in grouped elements.
class='first:rounded-t last:rounded-b'
Yes. You can combine multiple state variants like 'hover:focus:' or 'sm:hover:' to control styling under complex conditions. This flexibility allows precise control over how components behave across devices and interactions.
The 'focus:' variant activates when an input or button receives keyboard or mouse focus. It’s useful for accessibility and visual feedback in forms.
class='focus:outline-none focus:ring-2 focus:ring-blue-500'
The 'active:' variant applies styles while an element is in the pressed state. It’s typically used to make buttons feel responsive to user clicks.
class='bg-blue-600 active:bg-blue-800'
The 'disabled:' prefix applies styles only when an element is disabled. For example, 'disabled:opacity-50' dims a button to show it's inactive.
class='bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed'
The 'group-hover' variant allows child elements to react to the hover state of a parent with the 'group' class. It’s powerful for creating interactive card or dropdown animations.
<div class='group hover:bg-gray-100'><p class='group-hover:text-blue-500'>Hover me</p></div>
The 'peer' class marks an element that others can reference with 'peer-*' variants. It’s useful for form interactions like showing messages when a checkbox is checked.
<input type='checkbox' class='peer'><p class='peer-checked:block hidden'>Visible on check</p>
The 'focus-visible:' variant helps improve accessibility by styling elements only when focused through keyboard navigation, not by mouse clicks.
class='focus-visible:ring-2 focus-visible:ring-indigo-500'
Tailwind’s 'placeholder:' variant lets you style placeholder text in input fields. For example, 'placeholder-gray-400' changes its color.
class='placeholder-gray-400 focus:placeholder-gray-600'
The 'odd:' and 'even:' variants apply styles to alternating elements, commonly used in tables or lists to enhance readability.
class='odd:bg-gray-100 even:bg-white'
Hover occurs when a user places their mouse over an element. Focus occurs when an element, like an input or button, is active or selected using keyboard navigation. Focus is essential for accessibility, ensuring non-mouse users get proper visual feedback.
‘group-hover’ makes child elements respond when the parent is hovered. It helps create smooth hover effects like revealing text or icons inside cards. This avoids complex JavaScript and keeps hover interactions purely in HTML and CSS.
You can use 'peer-checked' when you want one element’s state to affect another. For instance, showing or hiding a dropdown when a checkbox or toggle is active. It simplifies state-based interactivity without writing JavaScript.
State variants like focus and focus-visible help visually indicate which element is active. This supports keyboard and screen-reader users by providing visible cues. Accessible design ensures everyone can navigate your interface smoothly.