Challenge your skills in advanced responsive design using Tailwind CSS. Explore complex breakpoint strategies, fluid layouts, state-dependent utilities, and custom responsive solutions for modern web development.
Which Tailwind CSS directive allows you to target a custom breakpoint named 'tablet' defined in your configuration for the 'text-lg' utility?
Explanation: The correct answer is 'tablet:text-lg' because custom breakpoints in Tailwind are referenced by the name you define in your configuration. The other options, like 'tb:text-lg', 'device-tablet:text-lg', and 'break-tablet:text-lg', are not recognized prefixes and would not work. Only the exact custom key name, such as 'tablet', should be used as a responsive prefix.
What is the correct way to apply a blue background only on large screens when a button is hovered, using Tailwind CSS?
Explanation: The answer is 'lg:hover:bg-blue-500' because Tailwind applies modifiers in the order of responsive breakpoint (like 'lg') first, then interactive state (like 'hover'), followed by the utility. 'Hover:lg:bg-blue-500' and 'bg-blue-500:lg:hover' use incorrect modifier syntax and ordering, while 'lg-bg-blue-500:hover' is not a valid Tailwind format. Modifier order is essential for correct responsive behavior.
Which class combination would make a div have full width on mobile but restrict its maximum width to 'xl' screens on large devices in Tailwind CSS?
Explanation: 'W-full lg:max-w-xl' sets the div to take the full width by default, only limiting the max width to 'xl' size at large breakpoints. Options like 'max-w-full xl:w-lg', 'w-xl:max-lg', and 'full-w xl:max-lg' use invalid class names or ordering and would not work as intended. Correct usage requires pairing baseline utility with responsive override.
How should you hide an element only on medium and larger screens, while keeping it visible on smaller screens using Tailwind CSS classes?
Explanation: 'Md:hidden' correctly hides the element at the 'md' breakpoint and up, while it's visible by default on smaller screens. 'Hidden:md' is not a valid class, 'sm:hidden' would hide it on small screens instead, and 'hide-md' is not a recognized Tailwind class. Using responsive prefixes determines the visibility across breakpoints.
What is the correct way to create a responsive grid with 1 column on small devices and 3 columns on extra-large screens in Tailwind CSS?
Explanation: 'Grid-cols-1 xl:grid-cols-3' sets the grid to a single column by default and increases to three columns at 'xl' size and above. The distractors, such as 'xl:grid-3-cols grid-cols-1', 'grid-1-cols xl:cols-3', and 'grid-cols-3 xl:grid-cols-1', use invalid class names or incorrect order. Always use responsive prefixes directly before the desired utility.