---
title: "React with Tailwind CSS"
description: "A cva button component built with React and Tailwind CSS, including compound components and class conflict resolution."
url: "https://cva.style/beta/examples/react/tailwindcss/"
---

The four button examples build the same React `button` component with `cva` and Tailwind CSS. Each gallery reads the component schema with [`getSchema`](https://cva.style/beta/getting-started/tools#generate-a-react-variant-gallery), 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

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.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-tailwindcss/src/components/button/button.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-tailwindcss?file=src/components/button/button.tsx) or reopen this page in a Chromium-based browser.

## Handling class conflicts

The optional strategies below use the same variants, defaults, and gallery as the basic example. See [Handling class conflicts](https://cva.style/beta/getting-started/installation#handling-class-conflicts) for setup details.

### cn

[`cn`](https://www.npmjs.com/package/cn) joins conditional classes and resolves Tailwind CSS conflicts at runtime. The configured `cx` preserves conditional inputs while the merge removes conflicting utilities.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-cn/src/components/button/button.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-cn?file=src/components/button/button.tsx) or reopen this page in a Chromium-based browser.

### cva/tailwindcss

[`cva/tailwindcss`](https://cva.style/beta/getting-started/installation#cvatailwindcss) marks component defaults with `base:`. Ordinary utilities override those defaults through the CSS cascade, while hover and disabled state styles stay ordinary utilities.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-cva-tailwindcss/src/components/button/button.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-cva-tailwindcss?file=src/components/button/button.tsx) or reopen this page in a Chromium-based browser.

### tailwind-merge

Combine the `cx` included in `cva` with [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) to preserve `cva`’s full `ClassValue` grammar while resolving Tailwind CSS conflicts at runtime.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-tailwind-merge/src/components/button/button.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-tailwind-merge?file=src/components/button/button.tsx) or reopen this page in a Chromium-based browser.

## Compound components

The compound example uses CSS relationships to coordinate a set of components. It stays separate from the four equivalent button examples above.

[View source on GitHub ↗](https://github.com/joe-bell/cva/tree/main/examples/beta/react-with-tailwindcss-compound/src/components/nav/nav.tsx)

Sorry, your browser [doesn't support](https://developer.stackblitz.com/platform/webcontainers/browser-support) this type of embed.

Try [visiting the example directly](https://stackblitz.com/github/joe-bell/cva/tree/main/examples/beta/react-with-tailwindcss-compound?file=src/components/nav/nav.tsx) or reopen this page in a Chromium-based browser.