Question 31
What is `clsx` + `cva` combo used for?
clsx handles conditional class joins; cva defines typed, reusable variant APIs for components.
Question 31
clsx handles conditional class joins; cva defines typed, reusable variant APIs for components.
Question 32
Too many one-off component variants create hard-to-maintain class logic. Use constrained variant sets.
Fast application of focus, contrast, and responsive utilities makes accessible defaults easier to enforce.
Huge unreadable class strings, inconsistent ordering, no component abstraction, and random arbitrary values.
Check class order, responsive/state variants, and generated CSS in devtools to see the winning declaration.
Typography plugin prose provides sensible defaults for headings, lists, code, and tables in rich text content.
Use prose-* modifiers and scoped wrappers rather than global element overrides.
It marks utilities as important, useful for edge overrides but should be used sparingly.
Question 39
Arbitrary variants target custom selectors/states directly (e.g., data attributes), useful for advanced component patterns.
It styles components based on data attributes from UI libraries (Radix/headless), avoiding brittle custom CSS.
Question 41
Use logical utilities/plugins or direction-aware patterns instead of left/right hardcoding where possible.
Group class order by layout, box model, typography, color, state; use formatter/plugin for consistency.
Plugins provide utilities for forms, typography, aspect-ratio, container queries, and custom project needs.
Use container query variants for component-level responsiveness independent from viewport breakpoints.
Variables enable token-driven theming while keeping utility ergonomics and runtime theme switches flexible.