Tailwind with React components - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the rendered output of this React component using Tailwind?

Consider this React component using Tailwind CSS classes. What will you see in the browser?

Tailwind

import React from 'react';

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

A A plain button with default browser styles

B A red button with white text and square corners

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

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

💡 Hint

Look at the Tailwind classes: bg-blue-500 sets background color, hover:bg-blue-700 changes it on hover, text-white sets text color, font-bold makes text bold, py-2 and px-4 add padding, rounded adds rounded corners.

The button uses Tailwind classes to style background color, text color, font weight, padding, and rounded corners. The hover:bg-blue-700 changes the background color when hovered. So visually, it is a blue button with white bold text that darkens on hover and has rounded corners.

❓ layout

intermediate

Which Tailwind class combination creates a responsive two-column layout in React?

You want to create a layout with two columns side by side on medium screens and above, but stacked on small screens. Which Tailwind classes achieve this?

A className="block md:flex-row"

B className="grid grid-cols-1 md:grid-cols-2"

C className="flex flex-col md:flex-row"

D className="flex-row md:flex-col"

💡 Hint

Think about grid columns that change with screen size.

Using grid with grid-cols-1 makes one column on small screens. md:grid-cols-2 changes to two columns on medium screens and larger. This creates a responsive two-column layout.

❓ accessibility

advanced

Which React button component with Tailwind is most accessible?

Choose the button component that best supports accessibility for screen readers and keyboard users.

A <button className="bg-green-500 text-white p-3 rounded" aria-label="Submit form">Submit</button>

B <button className="bg-green-500 text-white p-3 rounded">Submit</button>

C <div className="bg-green-500 text-white p-3 rounded" role="button" tabIndex="0">Submit</div>

D <button className="bg-green-500 text-white p-3 rounded" disabled>Submit</button>

💡 Hint

Screen readers benefit from descriptive labels. Keyboard users need focusable elements.

Option A uses a native button element with an aria-label describing the action. This helps screen readers understand the button's purpose. Option A uses a div with role and tabindex but is less semantic. Option A disables the button, preventing interaction. Option A lacks an aria-label which might be needed if the button text is unclear.

❓ selector

advanced

Which Tailwind selector applies styles only when a child input is focused inside a div?

You want to style a div's border color only when the input inside it is focused. Which Tailwind class achieves this?

A className="active:border-blue-500 border-2 border-gray-300"

B className="focus:border-blue-500 border-2 border-gray-300"

C className="hover:border-blue-500 border-2 border-gray-300"

D className="focus-within:border-blue-500 border-2 border-gray-300"

💡 Hint

Think about styling a parent when a child element is focused.

The focus-within variant applies styles to the parent element when any child element has focus. So the div's border changes color when the input inside is focused.

🧠 Conceptual

expert

What is the main benefit of using Tailwind CSS with React components?

Choose the best explanation for why developers use Tailwind CSS inside React components.

A It provides utility classes that enable fast styling directly in JSX without writing separate CSS files.

B It allows writing custom CSS files for each component separately.

C It automatically converts React components into static HTML files.

D It replaces the need for JavaScript logic inside React components.

💡 Hint

Think about how Tailwind helps style elements inside JSX.

Tailwind offers utility classes that you add directly to JSX elements to style them quickly. This avoids writing separate CSS files and speeds up development.