Blur and brightness filters in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual effect of this Tailwind class?

Look at this HTML snippet using Tailwind CSS:

<div class="blur-sm">Hello</div>

What will you see in the browser?

Tailwind

<div class="blur-sm">Hello</div>

A The text 'Hello' appears sharp and clear with no blur.

B The text 'Hello' is hidden and not visible.

C The text 'Hello' appears very bright and glowing.

D The text 'Hello' appears slightly blurred, making edges soft.

💡 Hint

The class 'blur-sm' applies a small blur filter to the element.

The 'blur-sm' class in Tailwind applies a small blur effect, softening the edges of the text or element. It does not affect brightness or visibility.

📝 Syntax

intermediate

Which Tailwind class correctly applies a brightness filter of 150%?

You want to make an image brighter by 1.5 times using Tailwind CSS. Which class should you use?

A brightness-150

B brightness-[150%]

C brightness-1.5

D brightness-15

💡 Hint

Tailwind has predefined brightness classes including brightness-150 for 150%.

Tailwind provides the 'brightness-[150%]' class which applies brightness(1.5), equivalent to 150%. The class 'brightness-150' is not a default Tailwind class.

❓ selector

advanced

Which Tailwind class combination applies both blur and brightness filters correctly?

You want to blur an element slightly and increase its brightness to 120%. Which class combination is correct?

A blur-sm brightness-[120%]

B blur-sm brightness-120

C blur brightness-120%

D blur-sm brightness-1.2

💡 Hint

Remember that brightness values above 100% require arbitrary values in Tailwind.

The correct way is to use 'blur-sm' for small blur and 'brightness-[120%]' for 120% brightness. Other options either use invalid class names or syntax.

🧠 Conceptual

advanced

What happens if you apply 'brightness-0' in Tailwind CSS?

Consider an image with class 'brightness-0'. What will be the visual result in the browser?

Tailwind

<img src="example.jpg" class="brightness-0" alt="Example image">

A The image appears completely black (no brightness).

B The image appears normal with no brightness change.

C The image appears fully white (maximum brightness).

D The image is hidden and not displayed.

💡 Hint

Brightness 0 means no light is visible.

A brightness filter of 0 means the element is fully dark, so the image appears completely black.

❓ accessibility

expert

How can blur and brightness filters affect accessibility, and what is a good practice?

Using blur and brightness filters can impact how users perceive content. Which practice improves accessibility when using these filters?

A Apply filters only on decorative images without alt text.

B Avoid using any filters because they always reduce accessibility.

C Ensure sufficient color contrast and provide clear text alternatives when filters reduce clarity.

D Use strong blur and brightness filters without fallback text or contrast adjustments.

💡 Hint

Think about users with vision difficulties and how filters might affect readability.

Filters like blur and brightness can reduce clarity. To keep content accessible, maintain good contrast and provide text alternatives so all users can understand the content.

Practice

1. What does the Tailwind class blur-sm do to an element?

easy

A. It makes the element slightly blurry.

B. It increases the brightness of the element.

C. It adds a shadow around the element.

D. It changes the element's color to gray.

Solution

1. Step 1: Understand the blur-sm class

   The blur-sm class applies a small blur filter, making the element look fuzzy.

2. Step 2: Compare with other effects

   Brightness changes lightness, shadow adds shadow, and gray changes color, so these are different effects.

3. Final Answer:

   It makes the element slightly blurry. -> Option A

4. Quick Check:

   Blur = fuzzy effect [OK]

Hint: Blur classes add fuzziness, brightness changes lightness [OK]

Common Mistakes:

• Confusing blur with brightness
• Thinking blur adds shadow
• Assuming blur changes color

2. Which Tailwind class correctly applies 125% brightness to an element?

easy

A. bright-125

B. brightness-1.25

C. brightness125

D. brightness-125

Solution

1. Step 1: Recall Tailwind brightness syntax

   Tailwind uses brightness- followed by a number like 125 for 125% brightness.

2. Step 2: Check each option

   Only brightness-125 matches Tailwind's correct syntax; others are invalid.

3. Final Answer:

   brightness-125 -> Option D

4. Quick Check:

   Correct class = brightness-125 [OK]

Hint: Brightness classes use dash and number, like brightness-125 [OK]

Common Mistakes:

• Using dot instead of dash
• Omitting dash between brightness and number
• Using wrong prefix like bright

3. What visual effect will this code produce?

<div class="blur-md brightness-75">Hello</div>

medium

A. The text will be blurry and brighter than normal.

B. The text will be sharp and brighter than normal.

C. The text will be blurry and darker than normal.

D. The text will be sharp and darker than normal.

Solution

1. Step 1: Analyze the blur-md class

   blur-md applies a medium blur, making the text fuzzy.

2. Step 2: Analyze the brightness-75 class

   brightness-75 reduces brightness to 75%, making the text darker.

3. Final Answer:

   The text will be blurry and darker than normal. -> Option C

4. Quick Check:

   Blur = fuzzy, brightness 75% = darker [OK]

Hint: Lower brightness means darker; blur means fuzzy [OK]

Common Mistakes:

• Mixing up brightness values (higher means brighter)
• Assuming blur sharpens text
• Ignoring combined effects

4. Identify the error in this Tailwind usage:

<img class="blur-4xl brightness-150" src="photo.jpg" alt="Photo" />

medium

A. The class blur-4xl does not exist in Tailwind.

B. The brightness value 150 is invalid; max is 100.

C. The alt attribute is missing for accessibility.

D. The src attribute should be inside quotes.

Solution

1. Step 1: Check blur class validity

   Tailwind supports blur sizes like sm, md, lg, xl, 2xl, 3xl but not 4xl.

2. Step 2: Verify brightness and attributes

   Brightness-150 is valid (150%), alt attribute is present, src is correctly quoted.

3. Final Answer:

   The class blur-4xl does not exist in Tailwind. -> Option A

4. Quick Check:

   Invalid blur class = blur-4xl [OK]

Hint: Check Tailwind docs for valid blur sizes [OK]

Common Mistakes:

• Assuming any 'xl' size exists
• Thinking brightness max is 100%
• Ignoring alt attribute importance

5. You want a button that becomes brighter and less blurry when hovered. Which Tailwind classes achieve this?

<button class="?">Click Me</button>

hard

A. blur-none brightness-125 hover:blur-lg hover:brightness-75 transition

B. blur-lg brightness-75 hover:blur-none hover:brightness-125 transition

C. blur-md brightness-100 hover:blur-md hover:brightness-100

D. blur-sm brightness-50 hover:blur-sm hover:brightness-50

Solution

1. Step 1: Understand the base state

   The button starts blurry and darker with blur-lg brightness-75.

2. Step 2: Understand the hover state

   On hover, blur is removed (blur-none) and brightness increases to 125% (brightness-125), making it clearer and brighter.

3. Step 3: Confirm transition for smooth effect

   transition enables smooth change on hover.

4. Final Answer:

   blur-lg brightness-75 hover:blur-none hover:brightness-125 transition -> Option B

5. Quick Check:

   Hover removes blur and brightens = blur-lg brightness-75 hover:blur-none hover:brightness-125 transition [OK]

Hint: Use hover:blur-none and hover:brightness-125 for clearer, brighter hover [OK]

Common Mistakes:

• Reversing hover effects
• Forgetting transition class
• Using same blur and brightness on hover