Reading & Converting CSS

Three views of an element’s styles in one panel: live computed values, the source stylesheet rules that apply to it, and a Tailwind utility-class equivalent. Switch between views with a dropdown.

Click an element with the ruler active to populate the side panel’s CSS section. A dropdown at the top of the section toggles between three formats. Computed CSS is free; the other two are part of Pro.

Computed CSS

The computed view shows the final, resolved CSS values that the browser is using to render the element. Every property is included, even ones inherited from parents or set by browser defaults. This is the truth on screen — what you see is exactly what’s being applied right now.

It’s the right view when you want to know what styles are active without caring where they came from. Useful for quick checks, copying a known-good style as a starting point, or auditing the rendered state of a third-party widget you can’t inspect any other way.

Side panel showing computed CSS for a selected element — The Computed view lists every CSS property the browser is rendering with, in resolved values.

Click any single line to copy that one declaration to your clipboard. Use the copy button at the bottom of the block to grab the whole thing.

Source

The Source view answers a different question: where did each style come from? Screen Ruler walks every accessible CSSStyleSheet on the page and matches each rule’s selector against the selected element. Rules are grouped by source stylesheet and listed in the same order they appear in the file. Any rule declared inside an @media block is shown nested under that wrapper, including ones inactive at the current viewport, so you can see how the cascade would shift at a different breakpoint. Properties that are overridden by a higher-specificity rule are marked as such, so the cascade resolution is visible at a glance.

For each rule you see the selector, the source stylesheet, the media query if any, and the properties it sets. Cross-origin stylesheets the browser can’t read are skipped silently.

Side panel showing source stylesheet rules grouped by file — The Source view groups rules by stylesheet, listed in file order, with overridden properties visibly marked.

This is how you debug “why is my style not applying?” without staring at DevTools. The rule that’s overriding yours is the highest-specificity match, with its source file and selector visible alongside any properties it knocked out.

Tailwind

The Tailwind view takes the element’s computed styles and converts them into equivalent Tailwind CSS utility classes, outputting Tailwind v4-compatible output.

This is the fastest way to migrate hand-written CSS to Tailwind, or to grab a working set of utilities from a competitor’s site. Click to copy the converted class string, paste it into your component, and you’re done.