Chrome Extension

The TailTrace Chrome Extension lets you inspect any element on any website and see its computed styles translated to Tailwind tokens.

Features

• Real-time Translation - Hover over any element to see styles
• Confidence Indicators - Know if matches are exact, fuzzy, or none
• One-Click Bug Reports - Send drift issues to Linear or Jira
• Screenshot Capture - Include visual context automatically
• Custom Config - Use your design system tokens

Installation

Chrome Web Store

Coming soon! The extension will be available on the Chrome Web Store.

Manual Install

1. Clone the repository

   git clone https://github.com/tailtrace/tailtrace
   cd tailtrace

2. Install dependencies and build

   bun install
   cd extension && bun run build

3. Load in Chrome

   • Open chrome://extensions
   • Enable “Developer mode”
   • Click “Load unpacked”
   • Select the extension/dist folder

Usage

Basic Inspection

1. Click the TailTrace icon in your toolbar
2. Toggle “Enable Inspector”
3. Hover over any element on the page
4. See the overlay with translated styles

Reading the Overlay

The overlay shows:

Column	Description
Property	CSS property name
Value	Computed CSS value
Token	Matching Tailwind class
Confidence	Match quality indicator

Confidence Levels

• ✓ Exact - Perfect token match (green)
• ~ Fuzzy - Close match within threshold (yellow)
• ✗ None - No matching token (red)

Caution

Fuzzy matches indicate design drift. These are values that are close but not exactly on-token - the most important to catch!

Bug Reporting

Linear Integration

1. Open the popup and go to Settings
2. Enter your Linear API key
3. Select your default team and project
4. When inspecting, click “Report Bug”
5. Add a title and description
6. The issue is created with screenshot and metadata

Jira Integration

1. Open the popup and go to Settings
2. Enter your Jira domain and API token
3. Select your default project
4. When inspecting, click “Report Bug”
5. The issue is created with full context

Configuration

Via Popup

Click the gear icon in the popup to configure:

• Delta-E threshold for color matching
• Spacing threshold
• Linear/Jira credentials

Via Config File

The extension will read tailtrace.json from the current page’s origin if available at /tailtrace.json.

Keyboard Shortcuts

Shortcut	Action
Alt+T	Toggle inspector
Escape	Close overlay

Permissions

The extension requires:

• activeTab - To read styles from the current tab
• storage - To save your settings
• tabs - For screenshot capture (bug reports)

Troubleshooting

Overlay Not Showing

1. Make sure the inspector is enabled (toggle in popup)
2. Check if the page has a Content Security Policy blocking inline styles
3. Try refreshing the page

Styles Not Translating

1. Verify your config is loaded (check popup)
2. The element may have no applicable CSS properties
3. Try hovering over a different element

Screenshots Failing

1. Ensure you’ve granted the tabs permission
2. Check if the page blocks screenshots via CSP