Skip to content

css-variants is no longer maintained. Use @lynstack/class-recipe: faster, stricter types, and React Native support. Migrate →

No longer maintained. Migrate to class-recipe →

css-variants logo css-variants logo css-variants

Benchmarks

Performance matters. css-variants is engineered for speed, delivering exceptional runtime performance without sacrificing features.

Quick Summary

Section titled “Quick Summary”
ComparisonSimple OpsCompound VariantsComplex ComponentsSlots
vs cva~1.1-1.3x3-4x faster2-7x faster—
vs tailwind-variants3-5x faster5-7x faster10-11x faster3-7x faster

css-variants vs class-variance-authority

Section titled “css-variants vs class-variance-authority”

Direct comparison against the popular class-variance-authority (cva) library.

Basic Operations

Section titled “Basic Operations”
Test Casecss-variantscvaDifference
Base class only23.2M ops/s21.2M ops/s1.09x faster
Single variant9.4M ops/s9.4M ops/sEqual
Multiple variants5.1M ops/s4.7M ops/s1.07x faster
Boolean variants5.9M ops/s5.0M ops/s1.18x faster
className override20.7M ops/s15.7M ops/s1.31x faster

Default Variants

Section titled “Default Variants”
Test Casecss-variantscvaDifference
Defaults (no props)9.3M ops/s8.0M ops/s1.16x faster
Override one default8.2M ops/s6.3M ops/s1.31x faster
With className8.4M ops/s6.6M ops/s1.27x faster

Compound Variants

Section titled “Compound Variants”

This is where css-variants really shines:

Test Casecss-variantscvaDifference
No match4.2M ops/s1.1M ops/s3.70x faster
Single match4.1M ops/s1.0M ops/s3.92x faster
Multiple matches3.8M ops/s0.9M ops/s4.24x faster

Complex Real-World Components

Section titled “Complex Real-World Components”

Testing a production-ready button component with 6 variant options and compound rules:

Test Casecss-variantscvaDifference
With defaults8.1M ops/s3.4M ops/s2.40x faster
With overrides5.1M ops/s0.7M ops/s6.93x faster

css-variants vs tailwind-variants

Section titled “css-variants vs tailwind-variants”

Comparison against tailwind-variants, using its lightweight /lite build.

Basic Operations

Section titled “Basic Operations”
Test Casecss-variantstailwind-variantsDifference
Base class only23.1M ops/s6.4M ops/s3.59x faster
Single variant9.9M ops/s2.2M ops/s4.52x faster
Multiple variants4.8M ops/s1.1M ops/s4.58x faster
Boolean variants5.8M ops/s1.6M ops/s3.57x faster
className override21.4M ops/s3.9M ops/s5.47x faster

Default Variants

Section titled “Default Variants”
Test Casecss-variantstailwind-variantsDifference
Defaults (no props)8.6M ops/s1.4M ops/s6.04x faster
Override one default8.6M ops/s1.4M ops/s6.35x faster
With className8.4M ops/s2.1M ops/s4.07x faster

Compound Variants

Section titled “Compound Variants”
Test Casecss-variantstailwind-variantsDifference
No match4.2M ops/s0.6M ops/s6.60x faster
Single match4.0M ops/s0.7M ops/s5.43x faster
Multiple matches3.8M ops/s0.7M ops/s5.57x faster

Complex Real-World Components

Section titled “Complex Real-World Components”
Test Casecss-variantstailwind-variantsDifference
With defaults8.1M ops/s0.8M ops/s10.39x faster
With overrides5.2M ops/s0.5M ops/s11.05x faster

Slot-Based Components: scv vs tailwind-variants

Section titled “Slot-Based Components: scv vs tailwind-variants”

Comparing css-variants’ scv (slot class variants) against tailwind-variants’ slots feature.

Basic Slots

Section titled “Basic Slots”
Test Casecss-variants (scv)tailwind-variantsDifference
Base slots (2 slots)11.4M ops/s2.1M ops/s5.33x faster
Single variant (2 slots)3.9M ops/s1.2M ops/s3.25x faster
Multiple slots (4 slots)2.2M ops/s0.6M ops/s3.79x faster
Multiple variants (4 slots)1.8M ops/s0.4M ops/s4.67x faster
No variants (optimized)9.3M ops/s2.0M ops/s4.59x faster

Default Variants with Slots

Section titled “Default Variants with Slots”
Test Casecss-variants (scv)tailwind-variantsDifference
Defaults (no props)2.8M ops/s0.7M ops/s3.95x faster
Override one default2.7M ops/s0.8M ops/s3.52x faster
With classNames2.8M ops/s1.0M ops/s2.75x faster

Compound Variants with Slots

Section titled “Compound Variants with Slots”
Test Casecss-variants (scv)tailwind-variantsDifference
No match1.8M ops/s0.3M ops/s6.04x faster
Single match1.7M ops/s0.2M ops/s7.45x faster
Multiple matches1.6M ops/s0.2M ops/s7.47x faster

Complex Slot Components

Section titled “Complex Slot Components”
Test Casecss-variants (scv)tailwind-variantsDifference
Card (7 slots, defaults)1.6M ops/s0.3M ops/s6.26x faster
Card (7 slots, overrides)0.8M ops/s0.1M ops/s7.32x faster
Stress test (8 slots)1.2M ops/s0.3M ops/s3.44x faster

Why css-variants is Faster

Section titled “Why css-variants is Faster”

1. Optimized Data Structures

Section titled “1. Optimized Data Structures”

css-variants uses simple JavaScript objects and arrays with minimal indirection. No complex class instances or prototype chains.

2. Early Exit Strategies

Section titled “2. Early Exit Strategies”

When checking compound variants, css-variants exits as soon as a mismatch is found, avoiding unnecessary comparisons.

3. Pre-computation

Section titled “3. Pre-computation”

Variant configurations are analyzed at creation time, not at runtime. The returned function is optimized for the specific configuration.

4. Minimal String Operations

Section titled “4. Minimal String Operations”

Class strings are concatenated efficiently using a lightweight cx utility, avoiding expensive regex operations or repeated string allocations.

5. No Runtime Dependencies

Section titled “5. No Runtime Dependencies”

Zero external dependencies means no additional function call overhead or module resolution costs.

Running Benchmarks Yourself

Section titled “Running Benchmarks Yourself”

Clone the repository and run the benchmarks on your machine:

Terminal window
git clone https://github.com/timphandev/css-variants.git
cd css-variants
yarn install
cd internal/benchmark
yarn start

Results are saved to internal/benchmark/dist/benchmark.json.

Benchmark Configuration

Section titled “Benchmark Configuration”
  • Framework: Vitest Bench (using tinybench)
  • Duration: 500ms minimum per test
  • Warmup: Automatic by tinybench
  • Environment: Node.js

Methodology

Section titled “Methodology”

All benchmarks follow these principles:

  1. Fair comparison: Identical configurations for both libraries
  2. Isolated setup: Variant configs created outside bench blocks (not measured)
  3. Real-world scenarios: Test cases mirror actual production usage patterns
  4. Statistical rigor: Multiple iterations with standard deviation and percentile metrics

Last updated: December 2025