Challenge your Tailwind CSS expertise with these carefully crafted questions focusing on responsive utilities, advanced configuration, variant customization, and compositional techniques for frontend development interviews.
Which Tailwind CSS class applies a left margin of 8 units only on screens medium and larger?
Explanation: The correct answer is 'md:ml-8', which adds a left margin of 8 units starting at the medium breakpoint and above. 'ml-8 md:ml-8' incorrectly applies the margin on all screen sizes, not just medium and above. 'sm:ml-8' only applies the margin on small screens and above, not specifically medium. 'md:mr-8' applies right margin, not left.
How can a developer add a new color to the Tailwind CSS color palette via the configuration file?
Explanation: The correct method is extending the theme.colors object in the tailwind configuration file. Adding a hex code to a class list doesn't integrate it into the palette. Adding to the variants array is for enabling utilities, not colors. Inserting into global styles does not tie it into Tailwind's utility system.
Which class correctly applies a blue background only when an element is hovered?
Explanation: The correct utility is 'hover:bg-blue-500', which applies a blue background on hover state. 'active:bg-blue-500' targets an element when active, not hovered. 'focus:bg-blue-500' targets focus state, not hover. 'bg-hover:blue-500' is not a valid Tailwind CSS syntax.
If a parent div uses the 'group' class, which class should a child element use to become visible on parent hover?
Explanation: The correct answer is 'group-hover:block', which reveals the child when the parent is hovered. 'parent-hover:block' isn't a valid utility. 'hover-group:block' uses an incorrect order. 'block:group-hover' doesn't follow Tailwind's variant syntax.
Where do you configure custom responsive breakpoints in a Tailwind CSS project?
Explanation: Custom breakpoints are set in the theme.screens object within the configuration file. There's no 'theme.breakpoints' in tailwind.css. The 'responsive' array and a 'breakpoint section' in other files don't exist in Tailwind's architecture.
Which method enables you to compose multiple Tailwind utility classes into a reusable component?
Explanation: @apply enables combining utilities into custom CSS rules for reuse. There is no <compose> tag in HTML. Nesting with & refers to other preprocessors. '--tailwind-compose' is not an actual Tailwind feature.
If your Tailwind config sets 'darkMode' to 'class', how is dark mode enabled in your app?
Explanation: With 'darkMode' set to 'class', applying the 'dark' class enables dark styles. 'hover:dark:bg-black' uses double variants, but the 'dark' class must still be set. Automatic dark mode is only supported if configured as 'media', not 'class'. 'theme-dark' as a variable doesn't control dark mode.
Which Tailwind CSS syntax sets a padding of 13 pixels on all sides when no utility exists for 13px?
Explanation: The 'p-[13px]' syntax allows for arbitrary values when pre-defined spacing utilities don't include a desired value. 'p$13' and 'px:13' are not valid syntaxes, and 'padding-13' doesn't match Tailwind's naming conventions.
Which Tailwind CSS class aligns flex items at the end of the flex container's main axis?
Explanation: 'justify-end' aligns items at the end of the main axis for flex containers. 'items-end' aligns items along the cross axis. 'content-end' aligns content, not individual items. 'flex-align-end' is not a valid Tailwind class.
How would you make text size extra large by default but extra small on very small screens with Tailwind?
Explanation: 'text-xl sm:text-xs' sets default as extra large and extra small on small screens. 'sm:text-xs text-xl' applies xs size on small and up but sets xl as the default, which can cause confusion. 'text-xs sm:text-xl' reverses the intent, and 'xs:text-xs' is not a standard breakpoint.
Which utility displays an element as a block only when it's focused?
Explanation: 'focus:block' applies display block on focus. 'active:block' triggers for the active state. 'block:focus' isn't a Tailwind variant order, and 'focus-display:block' is not valid syntax.
If both 'p-4' and 'md:p-8' are applied to an element, what happens on small and medium screens?
Explanation: Base utility 'p-4' applies by default, and 'md:p-8' overrides it at medium screen size. 'p-4 on all screens, p-8 never applied' is incorrect because the responsive variant does override. 'p-8 on all screens' ignores the responsive prefix. The last option reverses usage.
Where should you add a new custom font to ensure it's available as a Tailwind class?
Explanation: Adding it to theme.fontFamily in the Tailwind configuration is correct, which registers it as a utility class. Using @font-face alone doesn't create a corresponding class. Adding to tailwind.css or global properties does not make it accessible via Tailwind's utility system.
How can you enable Tailwind's 'focus' variant for the 'ring' utility in the config?
Explanation: The correct way is to add 'focus' in the variants section for the 'ring' utility. Writing 'focus:ring' in CSS does not enable the variant. Including 'focus' in colors is unrelated. 'ringVariant:focus' is not a configuration property.
Which class applies a border width of 2 units only on top?
Explanation: 'border-t-2' applies a border width of 2 on the top only. 'border-2' sets all borders to 2 units. 'border-top-2' and 'b-t-2' are not valid Tailwind classes.
What class would you use to automatically truncate overflowing text with an ellipsis?
Explanation: 'truncate' is the Tailwind class that truncates overflowing text with ellipsis. 'overflow-cut', 'text-ellipsis', and 'ellipsis-text' do not represent Tailwind's utility naming or may not be valid.