React with Tailwind CSS
This content is for Beta. Switch to the latest version for up-to-date documentation.
These examples build a button component with cva and Tailwind CSS in a React project, including a compound-components variant and a tailwind-merge setup for resolving conflicting classes.
Basic component
Section titled “Basic component”Compound components
Section titled “Compound components”Merging Tailwind classes
Section titled “Merging Tailwind classes”This example follows shadcn/ui’s popular cn helper: clsx resolves cva’s authoring grammar and tailwind-merge dedupes conflicting Tailwind utilities. It’s wired in as cva’s concatenator via cva/core and re-exported as cn for parity. See Handling style conflicts for the details.