Reading & Converting CSS

Three views of an element’s styles in one panel: live computed values, the matched stylesheet rules sorted by specificity, 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.

Matched Rules Pro

The matched-rules view answers a different question: where did each style come from? Screen Ruler walks every accessible CSSStyleSheet on the page, evaluates active @media queries against the current viewport, and matches each rule’s selector against the selected element. Rules are scored by CSS specificity (the standard A,B,C calculation), grouped by source stylesheet, and sorted from lowest to highest specificity within each group. Properties that are overridden by a higher-specificity rule are marked as such, so the cascade resolution is visible at a glance.

For each matched 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 matched stylesheet rules grouped by source file and sorted by specificity — The Matched Rules view groups rules by source stylesheet, sorted by specificity, 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 Pro

The Tailwind view takes the element’s computed styles and converts them into equivalent Tailwind CSS utility classes. It uses the open-source transform-to-tailwindcss-core library and outputs Tailwind v4-compatible classes.

Side panel showing computed CSS converted to Tailwind utility classes — Tailwind utility classes converted from the element’s computed CSS, ready to copy.

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.