HTML & CSS · Middle · Question 45 of 75
A React component merges external classes: className={"p-2 " + props.className}, and receives p-4. What padding results?
- 1Always
p-4: the class listed later in theclassattribute wins - ✓Correct answer: It depends on rule order in the CSS, not in
class- that's whytailwind-mergeexists - 3Always
p-2: the class listed first in theclassattribute wins
Explanation
Class order in the class attribute doesn't affect the cascade: with equal specificity, the rule that comes later in the CSS file wins. So the outcome of p-2 p-4 is unpredictable from the component's point of view. tailwind-merge (often via a cn() helper) removes conflicting classes and keeps the last one.