Convert CSS to Tailwind classes from any website

Click an element on any page and Screen Ruler converts its styles into a Tailwind class string you can paste into your own markup.

What it does

The Tailwind view takes the styles Screen Ruler reads for the selected element and rewrites them as Tailwind utility classes, on one line, ready to drop into a class attribute. A button might come out as:

w-[320px] h-[48px] px-[20px] py-[12px] flex items-center justify-between rounded-[9999px] text-[16px] leading-tight

Layout keywords map to the named utilities you would write by hand, such as flex, grid, items-center, justify-between, grid-cols-3, mx-auto and text-center. Measurements and colors keep their exact values using Tailwind's arbitrary value syntax, so w-[320px] reproduces the element precisely instead of rounding to the nearest step in the default scale.

How to convert an element to Tailwind

1. Open the page with the element you want.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click the element on the page.
4. In the side panel's Element tab, go to the Code section and change the dropdown to Tailwind.
5. Click the copy button to copy the class string.

The dropdown remembers your choice, so every element you click after that opens in the Tailwind view. Switch back to Computed any time to compare the classes with the plain CSS.

Which styles are converted

The classes are generated from the same set of properties as the Computed CSS view: size, margin and padding, borders and radius, display and flex or grid alignment, gap, position and offsets, background, shadow, and type settings such as font family, size, weight, line height, letter spacing, color and alignment. Default values are dropped first, so you do not get classes for things the browser does anyway.

The output targets Tailwind v4. Class names that were renamed in v4 are updated, so the v3 shadow-sm comes out as shadow-xs and outline-none as outline-hidden.

The conversion runs locally in your browser on styles Screen Ruler has already read, so it works the same on local builds, staging sites and pages behind a login.

What to expect

• It reproduces the result, not the source. The input is computed styles, so values come through in pixels and resolved colors. A site's own rem scale, theme colors and custom properties are not recovered.
• Arbitrary values are common. Because values are kept exact, expect brackets such as p-[16px]. If your project uses the default scale, swapping these for p-4 and similar is a quick tidy.
• One state, one size. Classes describe the element as it is right now. Hover styles and responsive variants such as md: are not generated, and ::before and ::after are not included.
• Some values need a hand edit. Complex values such as gradients do not always map to a standard utility. Treat the output as a solid starting point and check it in your project.

When it is useful

• Rebuilding a component you like. Grab the spacing, radius and type of a card or button from any site and start from real numbers.
• Migrating to Tailwind. Load an existing page of your own and convert its hand-written CSS element by element.
• Matching a live site. When a design only exists in production, copy its styles straight into a Tailwind codebase.

If the page already uses Tailwind and you want to change its classes on the page, see the Tailwind class editor. To see where the original styles came from, use the CSS rules view in the same section.

Generate Tailwind Classes is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

Does it work on sites that do not use Tailwind?

Yes. Screen Ruler reads the element's computed styles, not its class names, so it converts any element on any site, whatever framework or CSS approach the site uses.

Which Tailwind version does it generate?

Tailwind v4. Utilities that were renamed between v3 and v4, such as shadow-sm to shadow-xs and flex-shrink-0 to shrink-0, are output with their v4 names.

Why does it output values like w-[320px] instead of w-80?

The converter keeps the exact measured value so the result matches the original element. Tailwind's arbitrary value syntax in square brackets is valid in any Tailwind project. If you prefer the default scale, replace the bracketed values with the nearest scale step.

Can it convert hover states or responsive classes?

No. The classes describe the element in its current state at the current viewport width. Add hover: or breakpoint prefixes yourself where needed.