Challenge - 5 Problems
Tailwind with Next.js Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ layout
intermediate2:00remaining
Understanding Tailwind Flexbox in Next.js
You have a Next.js component using Tailwind CSS. What will be the visual layout of the boxes inside the container?
Code:
Code:
export default function FlexExample() {
return (
<div className="flex flex-col md:flex-row gap-4 p-4">
<div className="bg-blue-500 text-white p-4">Box 1</div>
<div className="bg-green-500 text-white p-4">Box 2</div>
<div className="bg-red-500 text-white p-4">Box 3</div>
</div>
)
}Tailwind
export default function FlexExample() {
return (
<div className="flex flex-col md:flex-row gap-4 p-4">
<div className="bg-blue-500 text-white p-4">Box 1</div>
<div className="bg-green-500 text-white p-4">Box 2</div>
<div className="bg-red-500 text-white p-4">Box 3</div>
</div>
)
}Attempts:
2 left
💡 Hint
Look at the responsive prefix 'md:' in the class names and what flex-col and flex-row do.
✗ Incorrect
The container uses 'flex flex-col' by default, stacking children vertically. The 'md:flex-row' applies from medium screen sizes upwards, changing the layout to horizontal. The gap-4 adds spacing between boxes.
❓ accessibility
intermediate2:00remaining
Improving Accessibility with Tailwind and Next.js
You want to make a button in a Next.js app styled with Tailwind accessible for screen readers. Which option correctly adds an accessible label to a button that only shows an icon visually?
Code snippet:
Code snippet:
<button className="p-2 bg-gray-800 text-white rounded"> <svg aria-hidden="true" className="w-6 h-6">...</svg> </button>
Tailwind
<button className="p-2 bg-gray-800 text-white rounded"> <svg aria-hidden="true" className="w-6 h-6">...</svg> </button>
Attempts:
2 left
💡 Hint
Screen readers read aria-label on interactive elements like buttons.
✗ Incorrect
Adding aria-label to the button provides a clear accessible name for screen readers. The SVG is decorative with aria-hidden="true" so it is ignored by screen readers. The span with sr-only is also valid but not shown in options as a direct child of button.
📝 Syntax
advanced2:00remaining
Tailwind Class Conditional Rendering in Next.js
You want to conditionally apply Tailwind classes in a Next.js component based on a boolean state. Which code snippet correctly applies 'bg-green-500' when isActive is true, and 'bg-red-500' when false?
Assume isActive is a boolean state variable.
Assume isActive is a boolean state variable.
Tailwind
export default function StatusButton({ isActive }) {
return (
<button className={/* fill here */ + " text-white p-2 rounded"}>
Status
</button>
)
}Attempts:
2 left
💡 Hint
Use template literals and the ternary operator inside className.
✗ Incorrect
Option A correctly uses a template literal with a ternary operator to choose the background color class and then appends the other classes. Option A has operator precedence issues and will not work as expected. Option A repeats the other classes in both branches, which works but is less concise. Option A tries to index an array with a boolean, which results in undefined.
❓ selector
advanced2:00remaining
Tailwind Customizing Focus Styles in Next.js
You want to customize the focus ring color on a button using Tailwind in Next.js. Which class combination correctly changes the focus ring to yellow with a 4px width?
Button base classes:
Button base classes:
p-3 rounded bg-blue-600 text-whiteTailwind
<button className="p-3 rounded bg-blue-600 text-white /* add focus classes here */">
Click me
</button>Attempts:
2 left
💡 Hint
Tailwind requires 'focus:ring' to enable the ring, then you can set size and color.
✗ Incorrect
Option C correctly includes 'focus:ring' to enable the ring, then sets the color and width. Option C disables outline but does not enable ring properly. Option C disables outline but order matters; 'focus:ring' is missing. Option C uses 'focus:outline' which is invalid.
🧠 Conceptual
expert3:00remaining
Next.js and Tailwind CSS: Optimizing for Production
In a Next.js project using Tailwind CSS, which configuration ensures the smallest CSS bundle size in production by removing unused styles?
Choose the correct Tailwind config snippet.
Choose the correct Tailwind config snippet.
Tailwind
module.exports = {
content: [/* fill here */],
theme: {
extend: {},
},
plugins: [],
}Attempts:
2 left
💡 Hint
Tailwind scans files where you write JSX or HTML to find used classes.
✗ Incorrect
Option B correctly points Tailwind to scan all JavaScript and TypeScript files in the pages and components folders, which is where Next.js components live. This allows Tailwind to remove unused styles. Other options point to folders that do not contain JSX or relevant markup, so unused styles won't be removed properly.