Design system · Component review 21

Benchmark metrics

The benchmark Guide has a useful full-data table. The newer summary list should provide a quick read of selected metrics without replacing that table or changing the recorded numbers.

Adopted shared style: BenchmarkMetrics now uses the refined measurement rows. The published Guide keeps its original tables.

Metric treatments

The same illustrative values appear in all three treatments. Look at label-to-value alignment and where the detail sits as the width changes.

01

Original Guide

Native summary table

MetricValueDetail
FixturedashboardMatched visual intent across variants
Median build148 ms10 measured command rounds
CSS rules1,284After static extraction and pruning
Long tasks0Chromium trace sample

The original benchmark summary keeps headings and values in a familiar table, which remains useful for complete fixture reports.

02

Previous shared

Responsive definition list

Fixture
dashboard
Matched visual intent across variants
Median build
148 ms
10 measured command rounds
CSS rules
1,284
After static extraction and pruning
Long tasks
0
Chromium trace sample

The previous shared list emphasized a short set of headline metrics with labels, values and contextual details.

03

Adopted

Refined measurement rows

Fixture
dashboard
Matched visual intent across variants
Median build
148 ms
10 measured command rounds
CSS rules
1,284
After static extraction and pruning
Long tasks
0
Chromium trace sample

The adopted shared style gives the row a calmer baseline, a more legible numeric value, and a clear detail line at narrow widths. It keeps native definition-list semantics.

Actual Guide use

The live static-comparison summary is still rendered from committed benchmark results.

Open /guide/benchmarks
MetricValueDetail
Fixtures4
CSS output4/4fixtures where Master CSS is smaller than Tailwind CSS by brotli bytes in the CLI setup
Build command4/4fixtures where Tailwind CSS has the lower cold production command median in the CLI setup
Build samples3measured command rounds per variant
CSS structureASTrules, selectors, declarations, layers, at-rules, and selector scores are parsed from generated CSS

The candidate affects only the optional compact summary list. Guide tables and their surrounding caveats remain intact.