VS Code Extension

The TailTrace VS Code Extension provides intelligent code completions and hover information for CSS values, translating them to Tailwind tokens as you type.

Features

• IntelliSense Completions - Get token suggestions when typing CSS values
• Hover Provider - See Tailwind equivalents on hover
• Config Watching - Automatically reloads when config changes
• Multi-root Support - Works in monorepo workspaces

Installation

From VS Code Marketplace

Search for “TailTrace” in the Extensions panel, or:

code --install-extension tailtrace.tailtrace-vscode

From Source

git clone https://github.com/tailtrace/tailtrace
cd tailtrace/packages/vscode
bun install && bun run build
# Then "Install from VSIX" in VS Code

Usage

Completions

When typing a CSS color or spacing value, TailTrace suggests matching tokens:

.button {
  background-color: #3b82f6
  /*                 ↑ Suggests: bg-blue-500 */
}

Completions show:

• Token name and Tailwind class
• Confidence level (exact/fuzzy)
• For colors: a color swatch preview

Hover Information

Hover over any CSS value to see its Tailwind translation:

#3b82f6 → bg-blue-500 (Exact)
15px → p-4 (Fuzzy, 1px off)

For colors, hover shows:

• Delta-E difference
• Suggested token
• Color swatch comparison

Configuration

Settings

Configure via VS Code settings (Cmd+,):

{
  "tailtrace.configPath": "./tailtrace.json",
  "tailtrace.deltaEThreshold": 2.3,
  "tailtrace.spacingThreshold": 2,
  "tailtrace.enableCompletions": true,
  "tailtrace.enableHover": true
}

Config Discovery

TailTrace looks for configuration in order:

1. .vscode/tailtrace.json
2. ./tailtrace.json (project root)
3. ./tailwind.config.js (extracts theme)
4. Tailwind CSS defaults

Tip

Put your tailtrace.json in the project root so all team members share the same config.

Supported Languages

The extension activates for:

• CSS / SCSS / Less
• JavaScript / TypeScript
• JSX / TSX
• Vue / Svelte
• HTML

Commands

Open the Command Palette (Cmd+Shift+P) and search for:

Command	Description
TailTrace: Reload Config	Force reload configuration
TailTrace: Show Token Palette	Browse all available tokens
TailTrace: Translate Selection	Translate selected CSS value

Troubleshooting

Completions Not Showing

1. Verify the extension is enabled for the current language
2. Check that a valid config file exists
3. Try running “TailTrace: Reload Config”

Wrong Tokens Suggested

1. Check your tailtrace.json has the correct token values
2. Verify the Delta-E threshold isn’t too high
3. The suggested token might be perceptually closest even if different

Performance Issues

For large projects:

1. Reduce the number of tokens in your config
2. Use more specific file path patterns
3. Disable hover if only using completions