Ring and outline colors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a blue ring around the button when focused.

Tailwind

<button class="focus:[1] ring-4">Click me</button>

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

Aring-red-500

Bring-green-500

Cring-blue-500

Dring-yellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a ring color that is not blue.

Forgetting to use the focus prefix.

The class ring-blue-500 adds a blue colored ring around the button on focus.

2fill in blank

medium

Complete the code to add a red outline to the input field when it is focused.

Tailwind

<input type="text" class="focus:[1] outline-2">

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

Aoutline-green-500

Boutline-red-500

Coutline-yellow-500

Doutline-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using ring classes instead of outline classes.

Choosing the wrong color.

The class outline-red-500 adds a red outline on focus to the input field.

3fill in blank

hard

Fix the error in the code to correctly add a green ring on focus.

Tailwind

<div class="focus:ring-[1] ring-2">Content</div>

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

Agreen-500

Bred-500

Cblue-500

Dyellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the intended green ring.

Leaving the color blank or incomplete.

The correct ring color for green is green-500. This adds a green ring on focus.

4fill in blank

hard

Fill both blanks to add a yellow outline and a 4-pixel ring on focus.

Tailwind

<button class="focus:outline-[1] focus:ring-[2] ring-blue-300">Press</button>

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

Ayellow-400

B2

C4

Dred-400

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up ring size numbers.

Using wrong color names for outline.

The class focus:outline-yellow-400 adds a yellow outline on focus, and focus:ring-4 adds a 4-pixel ring.

5fill in blank

hard

Fill all three blanks to create a green ring, red outline, and ring thickness of 8 on focus.

Tailwind

<input class="focus:ring-[1] focus:outline-[2] focus:ring-[3]">

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

Agreen-600

Bred-500

C8

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing ring thickness with color values.

Using incorrect color shades.

focus:ring-green-600 adds a green ring, focus:outline-red-500 adds a red outline, and focus:ring-8 sets the ring thickness to 8 pixels.

Practice

1. What does the Tailwind CSS class ring-red-500 do to an element?

easy

A. Removes any outline or border from the element

B. Changes the background color of the element to red

C. Adds a solid red border around the element

D. Adds a red colored glow around the element without changing its size

Solution

1. Step 1: Understand the purpose of ring classes

   Ring classes in Tailwind add a colored glow effect around an element, which does not affect the element's size or layout.

2. Step 2: Identify the effect of ring-red-500

   The class ring-red-500 applies a red glow color with intensity 500 around the element.

3. Final Answer:

   Adds a red colored glow around the element without changing its size -> Option D

4. Quick Check:

   Ring color = colored glow, not border or background [OK]

Hint: Ring classes add glow, not borders or backgrounds [OK]

Common Mistakes:

• Confusing ring color with border color
• Thinking ring changes element size
• Mixing ring with background color

2. Which Tailwind CSS class correctly adds a blue outline with thickness 4 around an element?

easy

A. outline-4 outline-blue-600

B. ring-4 ring-blue-600

C. border-4 border-blue-600

D. outline-blue-600

Solution

1. Step 1: Identify outline syntax in Tailwind

   Tailwind uses outline-{width} for thickness and outline-{color} for color. The order of classes does not affect the result.

2. Step 2: Check each option

   outline-4 outline-blue-600 uses outline-4 and outline-blue-600, which is correct syntax for outline thickness and color. ring-4 ring-blue-600 uses ring classes which add glow, not outline. border-4 border-blue-600 uses border classes, which add border, not outline. outline-blue-600 misses outline-4 for the required thickness 4.

3. Final Answer:

   outline-4 outline-blue-600 -> Option A

4. Quick Check:

   Outline thickness + color = outline-4 outline-blue-600 [OK]

Hint: Use outline-{thickness} and outline-{color} for outlines [OK]

Common Mistakes:

• Using ring classes instead of outline for borders
• Confusing border and outline classes
• Incorrect order or missing thickness class

3. What visual effect will the following Tailwind CSS code produce?

<button class="ring-2 ring-green-400 outline-4 outline-red-600">Click Me</button>

medium

A. A button with only a green border, no outline or ring

B. A button with a green glow ring and a thick red outline border

C. A button with a thick green border and a red glow ring

D. A button with no visible ring or outline

Solution

1. Step 1: Understand ring and outline classes combined

   The class ring-2 ring-green-400 adds a green glow ring with thickness 2. The class outline-4 outline-red-600 adds a thick red outline border with thickness 4.

2. Step 2: Visualize the combined effect

   The button will have a green glowing ring around it and a thick red outline border outside the ring, making both visible.

3. Final Answer:

   A button with a green glow ring and a thick red outline border -> Option B

4. Quick Check:

   Ring = glow, Outline = thick border [OK]

Hint: Ring adds glow, outline adds border thickness and color [OK]

Common Mistakes:

• Mixing up ring and outline effects
• Assuming ring adds border instead of glow
• Ignoring outline thickness class

4. Identify the error in this Tailwind CSS usage for adding a red outline:

<div class="outline outline-red-500">Content</div>

medium

A. Outline class cannot be combined with color classes

B. Incorrect color class, should be ring-red-500

C. Missing outline thickness class like outline-2

D. Outline class should be replaced with border class

Solution

1. Step 1: Check outline class requirements

   Tailwind requires an outline thickness class such as outline-2 or outline-4 to show the outline. The class outline alone does not set thickness.

2. Step 2: Analyze the given classes

   The code uses outline and outline-red-500 but misses the thickness class, so no visible outline appears.

3. Final Answer:

   Missing outline thickness class like outline-2 -> Option C

4. Quick Check:

   Outline needs thickness + color classes [OK]

Hint: Always add outline-{thickness} with outline-{color} [OK]

Common Mistakes:

• Using only outline without thickness
• Confusing ring color with outline color
• Replacing outline with border incorrectly

5. You want to create a focus style on an input that shows a thick purple outline and a subtle yellow ring glow. Which Tailwind CSS classes should you use?

hard

A. focus:outline-4 focus:outline-purple-700 focus:ring-2 focus:ring-yellow-300

B. focus:ring-4 focus:ring-purple-700 focus:outline-2 focus:outline-yellow-300

C. focus:border-4 focus:border-purple-700 focus:ring-2 focus:ring-yellow-300

D. focus:outline-2 focus:outline-yellow-300 focus:ring-4 focus:ring-purple-700

Solution

1. Step 1: Identify outline and ring classes for focus

   To add a thick purple outline on focus, use focus:outline-4 and focus:outline-purple-700. For a subtle yellow ring glow, use focus:ring-2 and focus:ring-yellow-300.

2. Step 2: Verify each option

   focus:outline-4 focus:outline-purple-700 focus:ring-2 focus:ring-yellow-300 correctly applies thick purple outline and subtle yellow ring on focus. focus:ring-4 focus:ring-purple-700 focus:outline-2 focus:outline-yellow-300 swaps thickness and colors incorrectly. focus:border-4 focus:border-purple-700 focus:ring-2 focus:ring-yellow-300 uses border instead of outline. focus:outline-2 focus:outline-yellow-300 focus:ring-4 focus:ring-purple-700 reverses colors and thickness, making ring thick purple and outline thin yellow, which is not desired.

3. Final Answer:

   focus:outline-4 focus:outline-purple-700 focus:ring-2 focus:ring-yellow-300 -> Option A

4. Quick Check:

   Outline thick purple + ring subtle yellow = focus:outline-4 focus:outline-purple-700 focus:ring-2 focus:ring-yellow-300 [OK]

Hint: Outline thick + color, ring thin + color for focus styles [OK]

Common Mistakes:

• Swapping outline and ring colors
• Using border instead of outline for focus
• Incorrect thickness values for desired effect