Skip to content
DIVE is also available forFirefoxand Safari(coming soon)
All use cases

Frontend developers

Tailwind component tuning

Tailwind makes building UI fast and tuning it slow, once you have utility classes, you're guessing at numeric increments. DIVE gives you a visual handle on every Tailwind class and emits the diff your AI agent can translate back to utilities.

The problem

Adjusting `space-y-4` to something between 16 and 20 pixels means editing classes, refreshing, and eyeballing. Multiply that across a real component and the loop kills momentum.

The workflow

  1. 1

    Open the component in the browser

    Open your storybook or your live page. Open the side panel.

  2. 2

    Tune visually

    Drag handles, change colours, adjust spacing in pixel increments.

  3. 3

    Hand the diff to your agent

    Claude Code or Cursor reads the structured diff and translates the pixel/colour values into the closest Tailwind utility classes (or your tokens) in your source.

The outcome

Visual control of a utility-class UI. Your design system constraints are respected; you just spec from the rendered surface.