Tailwind with Next.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

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:

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>
  )
}

A Boxes are arranged horizontally side-by-side on all screen sizes.

B Boxes overlap each other because of conflicting flex classes.

C Boxes are stacked vertically on all screen sizes with no horizontal arrangement.

D Boxes are stacked vertically on small screens and arranged horizontally side-by-side on medium and larger screens.

💡 Hint

Look at the responsive prefix 'md:' in the class names and what flex-col and flex-row do.

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

intermediate

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:

<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>

A Add aria-label="Close menu" attribute to the button element.

B Add <span className="sr-only">Close menu</span> inside the button after the SVG.

C Add title="Close menu" attribute to the SVG element.

D Add role="img" to the button element.

💡 Hint

Screen readers read aria-label on interactive elements like buttons.

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

advanced

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.

Tailwind

export default function StatusButton({ isActive }) {
  return (
    <button className={/* fill here */ + " text-white p-2 rounded"}>
      Status
    </button>
  )
}

A className={`${isActive ? 'bg-green-500' : 'bg-red-500'} text-white p-2 rounded`}

B className={isActive && 'bg-green-500' || 'bg-red-500' + ' text-white p-2 rounded'}

C className={isActive ? 'bg-green-500 text-white p-2 rounded' : 'bg-red-500 text-white p-2 rounded'}

D className={['bg-green-500', 'bg-red-500'][isActive] + ' text-white p-2 rounded'}

💡 Hint

Use template literals and the ternary operator inside className.

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

advanced

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: p-3 rounded bg-blue-600 text-white

Tailwind

<button className="p-3 rounded bg-blue-600 text-white /* add focus classes here */">
  Click me
</button>

A focus:outline-none focus:ring-4 focus:ring-yellow-400

B focus:outline focus:ring-yellow-400 focus:ring-4

C focus:ring focus:ring-yellow-400 focus:ring-4

D focus:ring-4 focus:ring-yellow-400 focus:outline-none

💡 Hint

Tailwind requires 'focus:ring' to enable the ring, then you can set size and color.

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

expert

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.

Tailwind

module.exports = {
  content: [/* fill here */],
  theme: {
    extend: {},
  },
  plugins: [],
}

A content: ['./src/**/*.{html,js}']

B content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']

C content: ['./public/**/*.{js,ts,jsx,tsx}']

D content: ['./styles/**/*.{css,scss}']

💡 Hint

Tailwind scans files where you write JSX or HTML to find used classes.

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.