Enhance your understanding of Tailwind CSS by answering questions focused on styling buttons, designing card layouts, and building responsive forms using utility-first classes. This quiz is designed to help you identify best practices and proper class usage for interactive web components with Tailwind CSS.
Which Tailwind CSS class combination would give a button a blue background with white text and rounded corners for a modern 'Primary' button style?
Explanation: The correct answer 'bg-blue-500 text-white rounded' applies a medium blue background, white text color, and basic rounding of corners, which is standard for primary buttons. Option 'bg-white text-blue-500 rounded-full' creates a white button with blue text and fully rounded edges, not the typical primary look. 'Border-blue-500 bg-gray-100 rounded-md' uses a subtle background and border, which does not match the strong primary style. 'Bg-blue-300 text-black rounded-none' results in a lighter blue with no corner rounding and black text.
When creating a card component with an image at the top, title, description, and a footer using Tailwind CSS, which utility is best for adding inner spacing to each section within the card?
Explanation: The 'p-4' utility adds padding inside an element, ensuring content within each card section has breathing room. 'M-2' sets the margin outside of elements, so it wouldn't add spacing inside sections. 'H-32' controls height, not spacing. 'Text-lg' only affects text size, not internal section spacing.
In Tailwind CSS, which class should you use to visually indicate when an input field is focused, for example by adding a colored outline?
Explanation: The 'focus:ring-2' utility adds a two-pixel ring around the input field when it receives focus, providing clear visual feedback. 'Input:focussed' is not a valid Tailwind class. 'Onfocus:border-blue-500' is not how focus states are targeted in utility syntax. 'Outline-rounded' does not apply any effect on focus and isn't a Tailwind class.
Which Tailwind CSS class will darken a button's background on hover, using a button with a 'bg-green-500' base color?
Explanation: The 'hover:bg-green-600' class darkens the button background to a deeper shade of green on hover, creating a clear interaction cue. 'Hover:bg-green-200' lightens the background instead of darkening it. 'Hover:focus-green-700' is not a valid class and incorrectly combines different state names. 'Button-hover-green-600' does not match Tailwind's naming conventions.
To give a card component subtle elevation and depth in Tailwind CSS, which class should be applied?
Explanation: 'Shadow-md' adds a medium-level shadow to the card, creating a sense of elevation and separation from the background. 'Border-solid' only changes the border style and does not add depth. 'Bg-opacity-50' adjusts the background transparency, not shadow or elevation. 'Flex-row' manages layout direction but does not provide any visual depth or shadow.