Tailwind CSS integration in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the visual output of this Next.js component using Tailwind CSS?

Consider this Next.js functional component styled with Tailwind CSS classes. What will the user see when this component renders?

NextJS

export default function Button() {
  return (
    <button className="bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  )
}

A A plain button with default browser styling

B A blue button with white bold text that darkens on hover and has rounded corners

C A red button with white text and square corners

D A button with blue text on white background and no hover effect

💡 Hint

Look at the Tailwind classes: bg-blue-600, hover:bg-blue-800, text-white, and rounded.

The button uses Tailwind classes to set a blue background that becomes darker on hover, white bold text, padding, and rounded corners.

📝 Syntax

intermediate

Which Tailwind CSS setup file is required for Next.js to enable custom styles?

In a Next.js project, which file must you create or modify to include Tailwind CSS directives for your styles?

A next.config.js with Tailwind CSS plugin configuration

B pages/_app.js with Tailwind CSS import statements

C tailwind.config.js with CSS rules inside

D styles/globals.css with Tailwind directives like @tailwind base; @tailwind components; @tailwind utilities;

💡 Hint

Think about where CSS directives are placed to load Tailwind styles globally.

The globals.css file is where Tailwind's base, components, and utilities directives are added to apply styles globally.

🔧 Debug

advanced

Why does this Next.js component not apply Tailwind styles correctly?

Given this component, why might the Tailwind CSS classes not style the button as expected?

NextJS

export default function MyButton() {
  return (
    <button className="bg-green-500 text-white p-3 rounded">
      Press me
    </button>
  )
}

A The attribute should be className, not class, in JSX

B The p-3 class is invalid and causes styles to break

C The button element must be wrapped in a div for Tailwind to work

D Tailwind CSS does not support bg-green-500 class

💡 Hint

Remember how JSX handles HTML attributes differently.

In JSX (used by Next.js), the HTML attribute class must be written as className to apply CSS classes.

❓ state_output

advanced

What is the button text after clicking in this Next.js component styled with Tailwind?

Review this component that toggles button text and styles on click. What text will the button show after the first click?

NextJS

import { useState } from 'react';

export default function ToggleButton() {
  const [active, setActive] = useState(false);

  return (
    <button
      className={active ? 'bg-red-500 text-white' : 'bg-gray-300 text-black'}
      onClick={() => setActive(!active)}
    >
      {active ? 'Active' : 'Inactive'}
    </button>
  );
}

A "Active" with gray background and black text

B "Inactive" with gray background and black text

C "Active" with red background and white text

D "Inactive" with red background and white text

💡 Hint

Check how the active state toggles and affects text and classes.

Initially active is false, so button shows "Inactive" with gray styling. After first click, active becomes true, changing text to "Active" and styles to red background with white text.

🧠 Conceptual

expert

Which Tailwind CSS feature enables conditional styling in Next.js components without inline styles?

In Next.js with Tailwind CSS, how can you apply styles conditionally based on component state or props without using inline styles or manual string concatenation?

A Using the <code>clsx</code> or <code>classnames</code> utility libraries to conditionally join class names

B Writing multiple CSS files and importing them conditionally

C Using inline <code>style</code> attributes with JavaScript objects

D Modifying the tailwind.config.js file dynamically at runtime

💡 Hint

Think about how to manage class names cleanly in React components.

Libraries like clsx or classnames help conditionally combine Tailwind CSS classes based on state or props, avoiding messy string concatenation or inline styles.