First Tailwind component (Hello World) - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this Tailwind component display?

Look at this simple Tailwind CSS component. What text will appear on the screen when you open it in a browser?

Tailwind

<div class="text-center text-blue-600 font-bold text-lg">Hello World</div>

A A right-aligned blue bold text saying 'Hello World'

B A left-aligned red italic text saying 'Hello World'

C A centered green normal text saying 'Hello World'

D A centered blue bold text saying 'Hello World'

💡 Hint

Check the Tailwind classes for text alignment, color, and font style.

The classes 'text-center' centers the text, 'text-blue-600' colors it blue, 'font-bold' makes it bold, and 'text-lg' sets a large font size.

❓ selector

intermediate

Which Tailwind class centers content horizontally?

You want to center a block element horizontally inside its container using Tailwind CSS. Which class should you use?

A text-center

B items-center

C mx-auto

D justify-center

💡 Hint

Think about margin and block elements.

'mx-auto' sets left and right margins to auto, centering block elements horizontally. 'text-center' centers inline text, 'items-center' and 'justify-center' are for flexbox alignment.

❓ layout

advanced

How does this Tailwind flex container arrange items?

Given this code, how will the three boxes be arranged on a wide screen?

Tailwind

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-red-400 p-4">Box 1</div>
  <div class="bg-green-400 p-4">Box 2</div>
  <div class="bg-blue-400 p-4">Box 3</div>
</div>

A Always stacked vertically regardless of screen size

B Stacked vertically on small screens, side by side horizontally on medium and larger screens

C Always side by side horizontally regardless of screen size

D Stacked horizontally on small screens, vertically on medium and larger screens

💡 Hint

Look at the responsive prefixes like 'md:' and the flex direction classes.

'flex-col' stacks items vertically by default. 'md:flex-row' changes direction to horizontal on medium screens and up. 'gap-4' adds space between boxes.

❓ accessibility

advanced

Which Tailwind class improves keyboard focus visibility?

You want to make sure a button is clearly visible when focused using keyboard navigation. Which Tailwind class helps with this?

Tailwind

<button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>

A focus:ring-4 focus:ring-blue-300

B hover:bg-blue-700

C active:bg-blue-900

D focus:outline-none

💡 Hint

Focus styles should make the element stand out when tabbed to.

'focus:ring-4 focus:ring-blue-300' adds a visible ring around the button on keyboard focus, improving accessibility. 'focus:outline-none' removes focus outline, which is bad for accessibility.

🧠 Conceptual

expert

What is the main benefit of using Tailwind's utility-first approach?

Why do many developers prefer Tailwind CSS's utility-first classes over writing custom CSS styles?

A It allows building designs quickly by composing small reusable classes without writing custom CSS

B It automatically generates CSS animations without any code

C It requires no knowledge of HTML to style components

D It replaces JavaScript functionality with CSS-only solutions

💡 Hint

Think about how Tailwind classes are used to style elements.

Tailwind's utility-first approach provides many small classes that can be combined to build designs fast, reducing the need to write custom CSS. It does not generate animations automatically or replace JavaScript, and HTML knowledge is still needed.

Practice

1. What does the Tailwind class text-center do to an element?

easy

A. Centers the text horizontally inside the element

B. Makes the text bold

C. Changes the text color to blue

D. Adds padding around the text

Solution

1. Step 1: Understand the class name meaning

   The class text-center in Tailwind means text alignment is centered horizontally.

2. Step 2: Compare with other options

   Other options describe different styles like bold or color, which are not related to text-center.

3. Final Answer:

   Centers the text horizontally inside the element -> Option A

4. Quick Check:

   text-center aligns text center [OK]

Hint: Remember: text-center means horizontal text alignment [OK]

Common Mistakes:

• Confusing text-center with text color classes
• Thinking it makes text bold
• Assuming it adds spacing

2. Which of the following is the correct way to add Tailwind classes to an HTML <h1> element to make the text blue and centered?

easy

A. Hello World

B. Hello World

C. Hello World

D. Hello World

Solution

1. Step 1: Check Tailwind class syntax

   Tailwind uses classes like text-center and text-blue-600 exactly as written in <h1 class="text-center text-blue-600">Hello World</h1>.

2. Step 2: Identify incorrect class names

   Options B, C, and D use invalid or non-existent Tailwind class names.

3. Final Answer:

   <h1 class="text-center text-blue-600">Hello World</h1> -> Option B

4. Quick Check:

   Correct Tailwind class names = <h1 class="text-center text-blue-600">Hello World</h1> [OK]

Hint: Use official Tailwind class names exactly as documented [OK]

Common Mistakes:

• Mixing up class name order or spelling
• Using non-Tailwind class names
• Adding extra hyphens or missing parts

3. What will be the visual result of this HTML code using Tailwind CDN?

<h1 class="text-center text-red-500 font-bold">Hello World</h1>

medium

A. A left-aligned, normal weight, blue heading saying 'Hello World'

B. A centered, italic, green heading saying 'Hello World'

C. A centered, bold, red heading saying 'Hello World'

D. A right-aligned, bold, black heading saying 'Hello World'

Solution

1. Step 1: Decode Tailwind classes

   text-center centers text, text-red-500 colors text red, font-bold makes text bold.

2. Step 2: Match visual description

   A centered, bold, red heading saying 'Hello World' matches all these styles exactly.

3. Final Answer:

   A centered, bold, red heading saying 'Hello World' -> Option C

4. Quick Check:

   Classes = center + red + bold = A centered, bold, red heading saying 'Hello World' [OK]

Hint: Match each class to its style meaning [OK]

Common Mistakes:

• Confusing color codes with other colors
• Ignoring font weight class
• Assuming default alignment

4. Identify the error in this Tailwind HTML snippet:

<h1 class="text-center text-blue600 font-bold">Hello World</h1>

medium

A. Missing dash in color class; should be text-blue-600

B. text-center is not a valid Tailwind class

C. font-bold should be font-heavy

D. Class names must be in uppercase

Solution

1. Step 1: Check Tailwind color class format

   Tailwind color classes require a dash between color and number, e.g., text-blue-600.

2. Step 2: Verify other classes

   text-center and font-bold are valid classes; uppercase is not required.

3. Final Answer:

   Missing dash in color class; should be text-blue-600 -> Option A

4. Quick Check:

   Color class format error = Missing dash in color class; should be text-blue-600 [OK]

Hint: Check for dashes in color classes [OK]

Common Mistakes:

• Omitting dash in color classes
• Thinking class names need uppercase
• Replacing font-bold with wrong class

5. You want to create a responsive heading that is centered and blue on small screens, but turns red and left-aligned on medium screens and larger using Tailwind. Which class set achieves this?

hard

A. text-center text-red-600 md:text-left md:text-blue-600

B. text-left text-red-600 md:text-center md:text-blue-600

C. text-center md:text-center text-blue-600 md:text-red-600

D. text-center text-blue-600 md:text-left md:text-red-600

Solution

1. Step 1: Understand Tailwind responsive prefixes

   md: prefix applies styles at medium screen size and above.

2. Step 2: Match desired styles

   Small screens: text-center text-blue-600. Medium+: md:text-left md:text-red-600.

3. Step 3: Verify text-center text-blue-600 md:text-left md:text-red-600 matches this exactly

   text-center text-blue-600 md:text-left md:text-red-600 uses correct order and classes for the requirement.

4. Final Answer:

   text-center text-blue-600 md:text-left md:text-red-600 -> Option D

5. Quick Check:

   Responsive classes with md: prefix = text-center text-blue-600 md:text-left md:text-red-600 [OK]

Hint: Use md: prefix for medium screen styles [OK]

Common Mistakes:

• Reversing small and medium screen classes
• Missing md: prefix for medium styles
• Using wrong color or alignment classes