Class Peek

Cmd+Click (macOS) or Ctrl+Click (Windows / Linux) any class name and actually land on its CSS. Even when the class is buried inside clsx(...) or cva(...). Even when it's a Tailwind v4 utility like bg-primary that resolves to a --color-primary token in an @theme block.

What it does

Three jumps that VS Code's built-in Go to Definition doesn't handle on its own:

1. Through class helpers

import { clsx } from "clsx";

<div className={clsx("btn", "btn-primary", { active })} />
//                    ^      ^
//             Cmd/Ctrl+Click either token → jumps to .btn / .btn-primary in your CSS

Out of the box it understands clsx, cn, classnames, classNames, cva, and tv. You can add your own helpers in settings (see below).

2. Tailwind v4 @theme reverse lookup

@theme {
  --color-primary: #3b82f6;
  --text-lg: 1.125rem;
  --radius-md: 0.375rem;
}

<h1 className="text-primary text-lg rounded-md bg-primary-500" />
//             ^            ^       ^         ^
//             color        text    radius    color (multi-token)

Cmd/Ctrl+Click text-primary lands on --color-primary. Click text-lg and it lands on --text-lg. Ambiguous? You get a peek list with both candidates.

Spacing utilities (p-4, m-2, gap-3, mt-8, …) fall back to the bare --spacing calc base when no specific --spacing-N is defined — which matches how Tailwind v4 actually computes them.

3. @apply chain

.composed {
  @apply btn btn-primary;
}

Cmd/Ctrl+Click btn anywhere in your code and you'll see two definitions: the .btn rule itself, and .composed (because it composes .btn via @apply). One click later, you know everywhere a class is used as a building block.

What it doesn't do (yet)

Honesty up front — these are deliberately out of scope for v0.1, in rough priority order:

• Hover preview (you only get jumps, not inline previews)
• Find references / rename
• SCSS &-nesting expansion
• styled-components / template literals
• Monorepo path resolution / cross-package imports
• CVA variant tracing into resolved class strings
• Hyphenated sub-prefixes (gap-x-4, space-y-2)
• Negative spacing (-mt-4)

If one of these blocks you, open an issue — it helps me prioritize.

Install

From the Marketplace: search for Class Peek in the Extensions panel.

From a .vsix file:

code --install-extension class-peek-0.1.3.vsix

Settings

These live in your VS Code settings. Three ways to edit them:

1. GUI (easiest): open Settings (Cmd+, on macOS, Ctrl+, on Windows / Linux), search for Class Peek, and edit the fields directly.
2. JSON, all projects: Cmd+Shift+P / Ctrl+Shift+P → Preferences: Open User Settings (JSON).
3. JSON, just this project (writes to .vscode/settings.json in the project root): same palette → Preferences: Open Workspace Settings (JSON).

{
  // Function names treated as class-name helpers. String literals inside
  // their CallExpressions are walked.
  "classPeek.helpers": [
    "clsx", "cn", "classnames", "classNames", "cva", "tv"
  ],

  // Globs scanned for class definitions and @theme / @apply rules.
  "classPeek.cssGlobs": ["**/*.css", "**/*.scss"]
}

Add your project's helpers (e.g. tw, mergeClasses) to classPeek.helpers and they'll be walked too.

How it works

Three resolvers, run in order against a CSS index that's built on activation and kept fresh by a FileSystemWatcher:

1. Plain CSS — direct selector lookup (.btn { ... })
2. Tailwind @theme — utility prefix → namespace (e.g. bg- → --color-*), with calc-base fallback for spacing
3. @apply chain — finds rules whose @apply list mentions the clicked class

The AST locator uses the TypeScript Compiler API to find class tokens in JSX className, helper CallExpressions, object keys/values, conditionals, and template literals. CSS parsing uses PostCSS (with postcss-scss for .scss files).

Develop

pnpm install
pnpm build       # one-shot bundle (esbuild)
pnpm watch       # rebuild on change
pnpm test        # vitest
pnpm typecheck   # tsc --noEmit

Press F5 in VS Code to launch an Extension Development Host with the extension loaded. There's a second F5 config that opens directly into a real Tailwind v4 + clsx project for smoke testing — adjust the path in .vscode/launch.json to point at one of yours.

A minimal smoke-test fixture lives in test-workspace/ — open that folder in the EDH for a quick end-to-end check.

License

MIT