Quick Start

Choose your preferred tool to get started:

Install from Chrome Web Store

Visit the Chrome Web Store and search for “TailTrace” (coming soon).

Or load the extension manually:
Terminal window
```
git clone https://github.com/tailtrace/tailtrace
cd tailtrace/extension
bun install && bun run build
```
Then load dist/ as an unpacked extension in chrome://extensions.
Open any webpage

Navigate to any website using Tailwind CSS.
Start inspecting

Click the TailTrace icon in your toolbar, then hover over any element. You’ll see computed styles translated to Tailwind tokens.
Configure your design system (optional)

Create a tailtrace.json file or configure via the popup to match your custom tokens.

Install from VS Code Marketplace

Open VS Code and search for “TailTrace” in the Extensions panel.

Or install via command line:
Terminal window
```
code --install-extension tailtrace.tailtrace-vscode
```
Open a project with Tailwind

VS Code will automatically detect your tailwind.config.js.
Start typing

In any CSS or JS/TS file, type a color like #3b82f6 and see completion suggestions for matching Tailwind tokens.
Hover for translations

Hover over any CSS value to see its Tailwind equivalent.

Install the addon
Terminal window
```
bun add -D @tailtrace/storybook-addon
```

Add to your Storybook config

export default {
  addons: ['@tailtrace/storybook-addon'],
};

Run Storybook
Terminal window
```
bun run storybook
```
Open the TailTrace panel

In any story, click the “TailTrace” panel to see an audit of all computed styles.

Verify It’s Working

After installation, you should see:

Confidence	Meaning
✓ Exact	Perfect token match
~ Fuzzy	Close match (within threshold)
✗ None	No matching token found