Styles Panel

Sizzy has a dedicated Styles panel that allows you to inspect, debug and experiment with the styles on your page.

To get started, switch to the Styles tab in the debugging panel. Now click the Inspect icon and select an element from your webpage.

Picking an element to inspect the styles
Picking an element to inspect the styles

Once you select the element, you will see all the classes and styles applied to that element. The list of classes is especially handy when working with a CSS library like Tailwind.

You can quickly toggle the classes, edit, add or remove them. Sizzy will magically detect all the available classes in your CSS and will show you autocomplete suggestions as you type. All the changes will be reflected live on the device.

Document image

When you are done playing around, you can copy the final selected classes by clicking the Copy icon and paste it in your code.

Sizzy also shows a list of all the computed styles for the selected element. These are the actual styles that were applied to the element, so you don't have to second guess if your !important hack worked.

Document image

In the future releases, this styles panel will become smarter and will prioritize all the non-default styles in the list. We'll also add a search box to filter the styles.

Updated 01 Feb 2022
Did this page help?