Inspect Panel

View CSS and Tailwind classes for selected design elements

What is the Inspect Panel?

The Inspect Panel is a tab in the Make Mode code panel that shows CSS snippets and Tailwind CSS class suggestions for any element selected on the canvas. It bridges the gap between visual design and code implementation, letting you extract exact style values from your designs.

Accessing the Inspect Panel

1. Enter Make Mode by clicking "Make" in the left sidebar
2. Select an element on the canvas
3. Click the "Inspect" tab in the code panel (between Code and History tabs)

CSS Snippets

The Inspect Panel auto-generates CSS properties for the selected element:

• Dimensions — width, height
• Colors — background-color, color (hex values)
• Typography — font-family, font-size, font-weight, line-height
• Border — border-radius, border-width, border-color
• Effects — box-shadow, opacity, backdrop-filter
• Layout — display, padding, margin

Click the copy button to copy the CSS snippet to your clipboard.

Tailwind CSS Classes

The panel also generates Tailwind CSS utility class suggestions that match the element's style:

• Sizing classes (w-64, h-32)
• Color classes (bg-blue-500, text-white)
• Spacing classes (p-4, m-2)
• Border classes (rounded-lg, border)
• Effect classes (shadow-md, opacity-75)

Copy individual classes or the full class string for use in your Tailwind projects.

Element Metadata

The panel displays additional metadata about the selected element:

• Dimensions — Width and height in pixels
• Position — X, Y coordinates on the canvas
• Rotation — Rotation angle in degrees
• Opacity — Element transparency percentage

Empty State

When no element is selected, the Inspect Panel shows a prompt asking you to select an element on the canvas. Click any element to see its CSS and Tailwind output.

Related Articles

• Generating Code
• Supported Frameworks
• Best Practices