ProvenPin Install

clsx, tailwind-merge and CVA button variants: working versions (tested 2026-10-15)

Compose class names with clsx, resolve Tailwind conflicts via tailwind-merge, and define button variants with class-variance-authority.

passed3 passed · 0 failed2026-10-15 20:56 UTC
Status
passed
Last passed
2026-10-15 20:56 UTC
Tests
3 / 3
Language
TypeScript
Runtime
node v22.23.3
pinned versions5
clsx@2.1.1tailwind-merge@3.7.0class-variance-authority@0.7.1@types/node@26.6.5tsx@4.23.15
run it
npm install --no-audit --no-fund --ignore-scripts=false
npm test
test environment
node v22.23.3
linux 6.17.0-1022-azure
x64
runner: github-actions 38805962781

The code

Exactly the files that passed. Your agent can pull them with get_recipe("clsx-tailwind-merge-cva") (install), or see them on GitHub.

package.json
{
  "name": "clsx-tailwind-merge-cva",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "clsx": "2.1.1",
    "tailwind-merge": "3.7.0",
    "class-variance-authority": "0.7.1"
  },
  "devDependencies": {
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}
src/button.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import { cva, type VariantProps } from "class-variance-authority";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export const buttonVariants = cva("inline-flex items-center rounded-md font-medium", {
  variants: {
    intent: {
      primary: "bg-blue-600 text-white",
      secondary: "bg-gray-100 text-gray-900",
    },
    size: {
      sm: "h-8 px-3 text-sm",
      lg: "h-11 px-6 text-base",
    },
  },
  defaultVariants: { intent: "primary", size: "sm" },
});

export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

export function buttonClass(props: ButtonVariantProps & { className?: string }) {
  return cn(buttonVariants(props), props.className);
}
test/button.test.ts
import { test } from "node:test";
import assert from "node:assert/strict";
import { buttonClass, cn } from "../src/button.ts";

test("twMerge drops conflicting padding", () => {
  assert.equal(cn("px-2", "px-4"), "px-4");
});

test("cva applies intent and size", () => {
  const cls = buttonClass({ intent: "secondary", size: "lg" });
  assert.match(cls, /bg-gray-100/);
  assert.match(cls, /h-11/);
  assert.match(cls, /inline-flex/);
});

test("className merges on top of variants", () => {
  const cls = buttonClass({ intent: "primary", className: "w-full" });
  assert.match(cls, /bg-blue-600/);
  assert.match(cls, /w-full/);
});

Connect to ProvenPin

Add the free MCP server so your agent can pull this recipe and others like it. Same setup as the docs.

terminal
claude mcp add --transport http provenpin https://mcp.provenpin.com/mcp

Any other MCP client: Streamable HTTP at https://mcp.provenpin.com/mcp. No API key, no signup.