Patterns & Production — Chapter Quiz

Question 1

1

What is the recommended cure for repeating a long class list across many files?

AWrap everything in @apply immediatelyBExtract a reusable component or partialCUse shorter arbitrary valuesDDisable content detection

Component extraction gives one source of truth; @apply is reserved for markup you do not control.

Question 2

2

In React, which attribute holds Tailwind classes?

AclassBclassNameCclassListDtw

React uses className; Vue/Svelte/Astro use class.

Question 3

3

What problem does tailwind-merge solve?

AIt minifies the CSS bundleBIt resolves conflicting utilities so later ones win predictablyCIt generates dynamic class namesDIt type-checks variants

twMerge('p-2','p-4') returns p-4, letting a className prop override component defaults.

Question 4

4

Removing focus styles with outline-hidden and no replacement harms keyboard accessibility.

TTrueFFalse

Always provide a visible focus-visible ring instead of silently removing the outline.

Question 5

5

How do you tell Tailwind v4 to scan a path outside the default detection?

AThe content array in JS configBThe @source "..." directiveCA safelist.txt fileDThe --scan CLI flag

@source "..." widens detection; @source not "..." excludes a path.

Question 6

6

The official command to upgrade a v3 project is npx @tailwindcss/___.

npx @tailwindcss/upgrade migrates directives, config, and renamed utilities automatically.

Question 7

7

Why is cva useful for component libraries?

AIt minifies class namesBIt defines typed, named variant maps with defaultsCIt replaces the Tailwind engineDIt scans your templates

cva gives a base plus typed variants, producing a clean typed component API.

Question 8

8

Which changed when migrating Tailwind v3 to v4?

Select all that apply.

A@tailwind directives became @import "tailwindcss";Bshadow-sm was renamed to shadow-xsCThe default border/ring color changed to currentColorDA tailwind.config.js became mandatory

Directives, utility renames, and the default border color all changed; the JS config is now optional, not mandatory.

Test what you learned.

Tailwind in Production — Chapter Quiz