Utility-first approach vs traditional CSS in Tailwind - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background using Tailwind CSS utility classes.

Tailwind

<div class="[1]">Hello World</div>

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

Acolor-red

Bbackground-red

Cred-bg

Dbg-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using traditional CSS class names instead of Tailwind utility classes.

Confusing text color classes with background color classes.

The Tailwind CSS class bg-red-500 applies a red background color. Other options are not valid Tailwind classes.

2fill in blank

medium

Complete the code to add padding of 4 units using Tailwind CSS.

Tailwind

<button class="[1]">Click me</button>

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

Apadd-4

Bp-4

Cpad-4

Dpadding-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using full words like 'padding' instead of shorthand 'p'.

Misspelling the class name.

In Tailwind CSS, p-4 adds padding of 1rem (4 units) on all sides. Other options are not valid Tailwind classes.

3fill in blank

hard

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

Tailwind

<p class="text-[1]">Centered text</p>

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

Acenter

Bmiddle

Calign-center

Dtext-centered

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties as class names.

Adding extra suffixes like '-ed' or 'align-'.

The correct Tailwind class to center text is text-center. Other options are invalid.

4fill in blank

hard

Fill both blanks to create a blue button with white text using Tailwind CSS.

Tailwind

<button class="[1] [2]">Submit</button>

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

Abg-blue-600

Btext-white

Cblue-bg

Dwhite-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-Tailwind class names like 'blue-bg' or 'white-text'.

Mixing up background and text color classes.

bg-blue-600 sets a blue background and text-white sets white text color in Tailwind CSS.

5fill in blank

hard

Fill all three blanks to create a responsive card with padding, shadow, and rounded corners using Tailwind CSS.

Tailwind

<div class="[1] [2] [3]">Card content</div>

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

Ap-6

Bshadow-lg

Crounded-md

Dcard-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using custom class names like 'card-style' which are not Tailwind utilities.

Confusing shadow and border radius classes.

p-6 adds padding, shadow-lg adds a large shadow, and rounded-md adds medium rounded corners in Tailwind CSS.

Practice

1. What is the main idea behind the utility-first CSS approach?

easy

A. Avoid using any classes and rely only on browser default styles

B. Write all styles in a separate CSS file and link it to HTML

C. Use inline styles inside HTML tags for all styling

D. Use small, single-purpose classes directly in HTML to style elements quickly

Solution

1. Step 1: Understand utility-first CSS concept

   Utility-first CSS means applying many small classes directly in HTML to style elements quickly without writing separate CSS rules.

2. Step 2: Compare with other options

   Options B and C describe traditional CSS and inline styles, which are different from utility-first. Avoid using any classes and rely only on browser default styles is incorrect as it ignores styling.

3. Final Answer:

   Use small, single-purpose classes directly in HTML to style elements quickly -> Option D

4. Quick Check:

   Utility-first = small classes in HTML [OK]

Hint: Utility-first means styling with many small classes in HTML [OK]

Common Mistakes:

• Confusing utility-first with inline styles
• Thinking utility-first requires separate CSS files
• Believing utility-first avoids using classes

2. Which of the following is the correct way to add a Tailwind utility class for padding of 4 units?

easy

A. <div class='padding-4'></div>

B. <div class='p-4'></div>

C. <div class='pad-4'></div>

D. <div class='padding4'></div>

Solution

1. Step 1: Recall Tailwind padding syntax

   Tailwind uses short utility classes like p-4 for padding of 4 units.

2. Step 2: Check each option

   Options A, B, and D use incorrect class names not recognized by Tailwind.

3. Final Answer:

   <div class='p-4'></div> -> Option B

4. Quick Check:

   Padding 4 in Tailwind = p-4 [OK]

Hint: Tailwind uses short class names like p-4 for padding [OK]

Common Mistakes:

• Using full words like 'padding' instead of shorthand
• Adding numbers without dash (e.g., padding4)
• Confusing Tailwind with traditional CSS class names

3. Given this HTML snippet using Tailwind:

<button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'>Click Me</button>

What happens when you hover the button with the mouse?

medium

A. The button background color changes to a darker blue

B. The button text color changes to black

C. The button becomes larger in size

D. Nothing changes on hover

Solution

1. Step 1: Understand the hover class

   The class hover:bg-blue-700 changes the background color to blue-700 when hovered.

2. Step 2: Check other styles

   Text color stays white, no size change classes are present, so only background changes on hover.

3. Final Answer:

   The button background color changes to a darker blue -> Option A

4. Quick Check:

   hover:bg-blue-700 changes background on hover [OK]

Hint: hover: prefix changes style on mouse hover [OK]

Common Mistakes:

• Thinking text color changes on hover
• Expecting size changes without size classes
• Ignoring the hover: prefix effect

4. You wrote this HTML with Tailwind:

<div class='text-center bg-red-500 p-4'>Hello</div>

But the text is not centered in the browser. What is the likely problem?

medium

A. Tailwind CSS file is not linked or loaded properly

B. The class text-center is misspelled

C. The bg-red-500 class removes text centering

D. Padding p-4 prevents text centering

Solution

1. Step 1: Verify class correctness

   The class text-center is spelled correctly and should center text.

2. Step 2: Consider CSS loading

   If styles don't apply, the Tailwind CSS file might not be linked or loaded, causing no styling effect.

3. Final Answer:

   Tailwind CSS file is not linked or loaded properly -> Option A

4. Quick Check:

   Missing CSS file = no styles applied [OK]

Hint: Check if Tailwind CSS file is loaded when styles don't apply [OK]

Common Mistakes:

• Blaming utility classes for layout issues
• Ignoring missing or wrong CSS file links
• Assuming padding affects text alignment

5. You want to create a responsive card with a shadow and rounded corners using Tailwind. Which combination of classes correctly applies these styles and also adds a hover effect to increase shadow intensity?

hard

A. <div class='shadow rounded-none hover:shadow-lg p-6'>Card</div>

B. <div class='box-shadow rounded hover:shadow-xl p-6'>Card</div>

C. <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div>

D. <div class='shadow-md rounded-full hover:shadow-2xl p-6'>Card</div>

Solution

1. Step 1: Identify correct shadow and rounded classes

   Tailwind uses shadow-sm, shadow, shadow-md, etc. for shadows. rounded adds normal rounded corners.

2. Step 2: Check hover shadow intensity

   Hover classes like hover:shadow-lg increase shadow on hover. <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div> uses shadow-sm with hover:shadow-lg, a common pattern for subtle to stronger shadow on hover.

3. Step 3: Evaluate other options

   <div class='shadow rounded hover:shadow-lg p-6'>Card</div> uses shadow but no size specified; <div class='box-shadow rounded hover:shadow-xl p-6'>Card</div> uses invalid box-shadow class; <div class='shadow-md rounded-full hover:shadow-2xl p-6'>Card</div> uses rounded-full which makes circle corners, not typical card style.

4. Final Answer:

   <div class='shadow-sm rounded hover:shadow-lg p-6'>Card</div> -> Option C

5. Quick Check:

   shadow-sm + hover:shadow-lg = subtle to strong shadow on hover [OK]

Hint: Use shadow-sm with hover:shadow-lg for subtle to stronger shadow [OK]

Common Mistakes:

• Using invalid class names like box-shadow
• Choosing rounded-full for normal cards
• Not adding hover: prefix for hover effects