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.