First Tailwind component (Hello World) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple heading with Tailwind styling.

Tailwind

<h1 class="text-[1] font-bold">Hello World</h1>

Drag options to blanks, or click blank then click option'

Alg

Bmd

Cxl

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-sm or text-md which are smaller sizes.

Forgetting to add the font-bold class for bold text.

The class text-xl sets the font size to extra large, making the heading stand out nicely.

2fill in blank

medium

Complete the code to add padding around the heading using Tailwind.

Tailwind

<h1 class="text-xl font-bold [1]">Hello World</h1>

Drag options to blanks, or click blank then click option'

Ap-4

Bpt-4

Cm-4

Dpl-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin (m-4) instead of padding (p-4).

Using only one side padding like pt-4 or pl-4 instead of all sides.

The class p-4 adds padding on all sides of the element, creating space inside the border.

3fill in blank

hard

Fix the error in the Tailwind class to center the text horizontally.

Tailwind

<h1 class="text-xl font-bold [1] p-4">Hello World</h1>

Drag options to blanks, or click blank then click option'

Atext-center

Btext-left

Ctext-right

Dtext-justify

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-left or text-right which align text to sides.

Using text-justify which spreads text unevenly.

The class text-center centers the text horizontally inside the element.

4fill in blank

hard

Fill both blanks to create a blue background and white text color.

Tailwind

<h1 class="text-xl font-bold [1] [2] p-4 text-center">Hello World</h1>

Drag options to blanks, or click blank then click option'

Abg-blue-500

Bbg-red-500

Ctext-white

Dtext-black

Attempts:

3 left

💡 Hint

Common Mistakes

Using red background instead of blue.

Using black text on blue background which is hard to read.

bg-blue-500 sets a medium blue background color, and text-white makes the text white for good contrast.

5fill in blank

hard

Fill all three blanks to create a responsive container with padding and centered text.

Tailwind

<div class="[1] mx-auto [2] [3]">Hello World</div>

Drag options to blanks, or click blank then click option'

Amax-w-md

Bp-6

Ctext-center

Dbg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color instead of width or padding classes.

Forgetting to center the text inside the container.

max-w-md limits the container width for better readability, p-6 adds padding inside, and text-center centers the text horizontally.

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