React with Tailwind CSS
This content is for Beta. Switch to the latest version for up-to-date documentation.
The four button examples build the same React button component with cva and Tailwind CSS. Each gallery reads the component schema with getSchema, so new variant values appear without updating a second list. The wrapper supplies defaults for the rendered button and forwards semantic disabled attributes. The compound example below is a separate component set.
Basic component
Section titled “Basic component”The default cva preset joins classes with cx. It keeps every matching utility in the output, so conflicting Tailwind classes remain for the stylesheet to resolve.
Handling class conflicts
Section titled “Handling class conflicts”The optional strategies below use the same variants, defaults, and gallery as the basic example. See Handling class conflicts for setup details.
cn joins conditional classes and resolves Tailwind CSS conflicts at runtime. The configured cx preserves conditional inputs while the merge removes conflicting utilities.
cva/tailwindcss
Section titled “cva/tailwindcss”cva/tailwindcss marks component defaults with base:. Ordinary utilities override those defaults through the CSS cascade, while hover and disabled state styles stay ordinary utilities.
tailwind-merge
Section titled “tailwind-merge”Combine the cx included in cva with tailwind-merge to preserve cva’s full ClassValue grammar while resolving Tailwind CSS conflicts at runtime.
Compound components
Section titled “Compound components”The compound example uses CSS relationships to coordinate a set of components. It stays separate from the four equivalent button examples above.