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

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Utility-First CSS

Which statement best describes the utility-first CSS approach compared to traditional CSS?

A Utility-first CSS uses many small classes for styling directly in HTML, while traditional CSS uses separate style rules in CSS files.

B Utility-first CSS requires writing long CSS selectors, while traditional CSS uses short class names.

C Utility-first CSS avoids using classes and styles elements only with inline styles, unlike traditional CSS.

D Utility-first CSS only works with JavaScript frameworks, while traditional CSS works with plain HTML.

💡 Hint

Think about where the styles are applied in utility-first vs traditional CSS.

Utility-first CSS applies many small, reusable classes directly in HTML elements to style them. Traditional CSS writes style rules separately in CSS files targeting selectors.

📝 Syntax

intermediate

Tailwind Utility Class Syntax

Which Tailwind CSS class correctly applies a margin of 1rem on all sides?

A margin-1rem

B m-1rem

C m-4

D margin-4

💡 Hint

Tailwind uses numeric scale for spacing classes, not direct CSS values.

In Tailwind, m-4 applies margin using the spacing scale, where 4 equals 1rem by default.

❓ rendering

advanced

Visual Result of Utility Classes

What will be the visual effect of this HTML snippet using Tailwind CSS?

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

A A white button with blue text that becomes bold on hover and has square corners.

B A blue button with white bold text that darkens blue on hover and has rounded corners.

C A blue button with black text that changes to white background on hover and has sharp edges.

D A transparent button with blue border and no hover effect.

💡 Hint

Look at the background, text color, hover, font weight, padding, and border radius classes.

The classes set a blue background, white bold text, padding, rounded corners, and a darker blue background on hover.

❓ selector

advanced

CSS Selector Specificity Comparison

Given traditional CSS selectors, which has the highest specificity?

Tailwind

/* CSS selectors */
.a {}
#id {}
div.a {}
.a.b {}

A #id

B .a.b

C div.a

D .a

💡 Hint

ID selectors have higher specificity than class or element selectors.

ID selectors (#id) have higher specificity than class selectors (.a, .b) or element selectors (div).

❓ accessibility

expert

Accessibility in Utility-First CSS

Which Tailwind utility class combination best improves accessibility for a button that visually looks disabled but remains keyboard focusable?

A opacity-50 cursor-not-allowed focus:outline-none

B opacity-100 cursor-pointer focus:ring-0

C opacity-25 cursor-default focus:ring-0

D opacity-50 cursor-not-allowed focus:ring-2 focus:ring-blue-500

💡 Hint

Consider visual disabled look plus visible focus for keyboard users.

Using opacity-50 and cursor-not-allowed visually indicates disabled. Adding focus:ring-2 focus:ring-blue-500 ensures keyboard users see focus outline, improving accessibility.

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