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.

Practice

1. What is the main way to add Tailwind styles to a React component?

easy

A. Add Tailwind classes inside a css file only

B. Write styles inside a style tag in the component

C. Use the className attribute with Tailwind utility classes

D. Use inline styles with JavaScript objects

Solution

1. Step 1: Understand React styling

   React uses the className attribute to add CSS classes to elements.

2. Step 2: Apply Tailwind classes

   Tailwind utility classes are added inside className to style components quickly.

3. Final Answer:

   Use the className attribute with Tailwind utility classes -> Option C

4. Quick Check:

   Tailwind + React = className [OK]

Hint: Remember: Tailwind classes go inside className in React [OK]

Common Mistakes:

• Using style attribute instead of className
• Trying to add Tailwind classes in CSS files only
• Using class instead of className in JSX

2. Which of the following is the correct syntax to add Tailwind classes to a React button component?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Use JSX syntax for className

   In React JSX, the attribute for CSS classes is className, not class.

2. Step 2: Provide classes as a string

   The value of className must be a string, so it should be inside quotes.

3. Final Answer:

   <button className="bg-blue-500 text-white p-2">Click me</button> -> Option D

4. Quick Check:

   className="..." is correct JSX syntax [OK]

Hint: Use className="..." with quotes for Tailwind classes [OK]

Common Mistakes:

• Using class instead of className
• Not quoting the className value
• Using curly braces without quotes for className string

3. What will be the visual result of this React component?

function Card() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded shadow-lg p-4">
      <h2 className="text-xl font-bold mb-2">Hello</h2>
      <p className="text-gray-700">Welcome to Tailwind!</p>
    </div>
  );
}

medium

A. A red box with large text and no margin

B. A centered white card with rounded corners, shadow, padding, and text styled with bold heading and gray paragraph

C. A full-width blue box with no padding and default text styles

D. An unstyled div with plain text

Solution

1. Step 1: Analyze container styles

   The div uses max-w-sm (small max width), mx-auto (center horizontally), bg-white (white background), rounded (rounded corners), shadow-lg (large shadow), and p-4 (padding).

2. Step 2: Analyze text styles

   The heading has text-xl (large text), font-bold (bold), and mb-2 (margin bottom). The paragraph uses text-gray-700 (medium gray text).

3. Final Answer:

   A centered white card with rounded corners, shadow, padding, and text styled with bold heading and gray paragraph -> Option B

4. Quick Check:

   Tailwind classes produce styled card = A [OK]

Hint: Read each Tailwind class meaning to visualize output [OK]

Common Mistakes:

• Ignoring mx-auto for centering
• Confusing bg-white with colored backgrounds
• Missing padding or shadow effects

4. Identify the error in this React component using Tailwind:

function Button() {
  return <button class="bg-green-500 text-white p-3">Submit</button>;
}

medium

A. Using class instead of className in JSX

B. Missing closing tag for button

C. Tailwind classes are invalid

D. Button text should be inside curly braces

Solution

1. Step 1: Check JSX attribute for CSS classes

   In React JSX, the attribute must be className, not class.

2. Step 2: Verify other syntax

   The button tag is properly closed and Tailwind classes are valid. Text inside button can be plain string.

3. Final Answer:

   Using class instead of className in JSX -> Option A

4. Quick Check:

   JSX requires className, not class [OK]

Hint: Always use className in React JSX for CSS classes [OK]

Common Mistakes:

• Using class instead of className
• Thinking Tailwind classes are invalid
• Adding unnecessary curly braces around text

5. You want a React component with a responsive button that is blue on small screens and green on medium and larger screens using Tailwind. Which is the correct className value?

<button className="?">Click</button>

hard

A. "bg-blue-500 md:bg-green-500 text-white p-2 rounded"

B. "bg-green-500 md:bg-blue-500 text-white p-2 rounded"

C. "bg-blue-500 bg-green-500 md:text-white p-2 rounded"

D. "text-white p-2 rounded bg-blue-500 bg-green-500"

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Tailwind uses prefixes like md: to apply styles at medium screen sizes and above.

2. Step 2: Apply blue background by default and green on medium+

   Use bg-blue-500 for small screens and md:bg-green-500 to override on medium and larger.

3. Step 3: Check other classes

   Text color, padding, and rounding are consistent and correctly placed.

4. Final Answer:

   "bg-blue-500 md:bg-green-500 text-white p-2 rounded" -> Option A

5. Quick Check:

   Responsive prefix md: changes color on medium screens [OK]

Hint: Use md: prefix to change styles on medium screens up [OK]

Common Mistakes:

• Reversing colors for small and medium screens
• Placing classes in wrong order causing override issues
• Using multiple background colors without responsive prefixes