Live Drift Report

This interactive demo shows how TailTrace translates CSS values to Tailwind tokens using the same @tailtrace/core engine that powers all our tools.

Live Translation

Test Color (try: #3b82f6 for exact match)

Delta-E Threshold: 2.3

Total

Exact

Fuzzy

None

Property	Original	Token	Confidence
`color`	`#0f172a`	`text-slate-900`	~ Fuzzy
`background-color`	`#3b83f6`	`bg-blue-500`	~ Fuzzy
`border-color`	`#e11d48`	—	✗ None
`padding`	`15px`	`p-3.5`	~ Fuzzy
`margin-bottom`	`24px`	`mb-6`	✓ Exact
`gap`	`12px`	`gap-3`	✓ Exact
`border-radius`	`8px`	`rounded-lg`	✓ Exact
`font-size`	`14.5px`	`text-sm`	~ Fuzzy

Processed in 0.34ms

Understanding the Results

Confidence Levels

Level	Meaning	When it happens
Exact	Perfect token match	Value matches a token exactly
Fuzzy	Close match within threshold	Color ΔE < threshold, spacing within 2px
None	No matching token	Value too far from any token

Delta-E Explained

Delta-E (ΔE) is a metric for perceptual color difference. TailTrace uses CIEDE2000, the most accurate algorithm:

ΔE Value	Perception
0	Identical
1.0	Not noticeable
2.3	Just noticeable difference (JND)
5.0	Clearly different
10+	Very different

The default threshold of 2.3 catches colors that humans can barely perceive as different - perfect for design system compliance.

Try These Colors

Color	Hex	Expected Match
Exact blue-500	`#3b82f6`	Exact match
Off by 1	`#3b83f6`	Fuzzy (ΔE ~0.7)
Different blue	`#2563eb`	Exact match to blue-600
Custom color	`#ff6b6b`	Fuzzy match to red-400

Source Code

This demo uses @tailtrace/core directly:

import { TranslationEngine } from '@tailtrace/core';

const engine = new TranslationEngine({
  deltaEThreshold: 2.3,
});

const results = engine.translate({
  'background-color': '#3b83f6',
  'padding': '15px',
});

console.log(results.styles);
// [
//   { property: 'background-color', confidence: 'fuzzy', tailwindClass: 'bg-blue-500', deviation: 0.73 },
//   { property: 'padding', confidence: 'fuzzy', tailwindClass: 'p-4', deviation: 1 },
// ]

Use in Your Project

Install the core package:

bun add @tailtrace/core

Then import and use:

import { TranslationEngine, ColorMatcher, parseColor, deltaE2000 } from '@tailtrace/core';