Skip to content
TailTrace

Introduction

TailTrace is a suite of developer tools that help you maintain design system compliance in Tailwind CSS projects. It translates arbitrary CSS values to your design tokens and catches design drift before it ships.

The Problem

Section titled “The Problem”

In real-world projects, design drift happens constantly:

  • A designer hand-picks #3b83f6 instead of using blue-500 (#3b82f6)
  • Someone uses 15px padding instead of p-4 (16px)
  • A font gets set to 14.5px instead of the text-sm token

These tiny deviations accumulate into inconsistent UIs, accessibility issues, and maintenance nightmares.

The Solution

Section titled “The Solution”

TailTrace provides a translation engine that maps CSS values to your Tailwind tokens using perceptual matching:

InputTranslationConfidence
#3b83f6blue-500Fuzzy (ΔE 0.73)
16pxp-4Exact
14.5pxtext-smFuzzy (0.5px off)

How It Works

Section titled “How It Works”
Your CSS Values → Translation Engine → Tailwind Tokens
                        ↓
                 Confidence Levels:
                 • Exact (perfect match)
                 • Fuzzy (within threshold)
                 • None (no match found)

The same @tailtrace/core engine powers all our tools:

  1. Chrome Extension - Inspect any element in DevTools
  2. VS Code Extension - IntelliSense completions as you type
  3. Storybook Addon - Automatic audits in your component library

Open Core Model

Section titled “Open Core Model”

TailTrace is open source for individual use:

  • Core translation engine (@tailtrace/core)
  • Chrome Extension
  • VS Code Extension
  • Storybook Addon

Pro features for teams include cloud-synced configs, drift analytics dashboard, and team workspaces.

Next Steps

Section titled “Next Steps”