Edit Tailwind classes in the browser

Change an element's class list in the side panel and watch the page update. Autocomplete suggests classes the page already uses, and every change is tracked as a diff of the class attribute.

What it does

Select an element in edit mode and the Classes section at the bottom of the CSS tab shows its class attribute as editable text. Add, remove or swap classes and the element updates a moment after you stop typing. It works with any class names, and it is shaped around utility-first CSS like Tailwind, where most styling lives in the class list rather than in a stylesheet you can edit.

• Tailwind-aware highlighting. Numbers in utilities like px-4 or w-1/2 and arbitrary values like top-[117px] are highlighted, so a long class string is easier to scan.
• Autocomplete from the page. As you type, Screen Ruler suggests matching classes already used anywhere on the page, including inside open shadow roots. Use Up and Down to move through suggestions and Enter or Tab to accept.
• Live result. Changes apply to the element as you type, and the element name at the top of the panel updates to reflect the new class list.
• Shared undo. Ctrl + Z (Cmd + Z on a Mac) undoes class edits in the same history as your CSS and HTML edits, with a burst of typing folded into one step.

How to edit Tailwind classes on a live page

1. Open a page built with Tailwind, or any page you want to change.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click Edit (the pencil) in the control bar at the bottom of the page. The control bar switches to the editing tools and the side panel switches to the editor.
4. Click the element you want to change.
5. Scroll to Classes at the bottom of the CSS tab and edit the class list.

Every edit appears in the Changes tab as the element's opening tag with the class attribute diffed: classes you removed are marked as removed and classes you added are marked as added. Reordering classes without changing them is not counted as an edit. Copy the block to paste the new class list into your component.

Why the page's own classes matter

Tailwind only ships the CSS for classes a project actually uses. That means a class like gap-6 works on the live page only if the site's build already generated it somewhere. Screen Ruler's autocomplete draws from the classes on the page for exactly this reason: anything it suggests is a class the page has CSS for, so picking from the list is the reliable way to see a real result.

If you type a utility the site's build never generated, the class is added to the element but nothing changes visually. In that case, use the live CSS editor to try the value as plain CSS, then add the matching utility in your code.

Limits

• It does not run a Tailwind compiler in the page, so classes missing from the site's CSS have no effect.
• The class list is a single line. Line breaks are not allowed.
• Class edits live in your browser tab and are not saved across reloads. Copy them from the Changes tab before you leave.

When it is useful

• Tuning a Tailwind design in the browser. Try p-4 against p-6 or a different text size on the real page, without a rebuild for every change.
• Design review. Make the change yourself and send the class diff instead of describing it.
• Learning a codebase. Toggle classes off to see what each one is doing.

Want the reverse, turning an element's computed styles into Tailwind classes? See Tailwind class generation, which works in inspect mode.

Edit Tailwind Classes is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

Why does a Tailwind class I typed do nothing?

Tailwind only generates CSS for classes the project uses. If the site's build never generated that utility, the page has no CSS for it. Pick from the autocomplete list, which only suggests classes already on the page, or try the value in the CSS editor instead.

Does it only work on Tailwind sites?

No. The class editor works with any class names on any site. The highlighting and autocomplete are tuned for utility classes, which is where they help most.

How is this different from editing the class attribute in DevTools?

DevTools lets you edit the attribute as raw text. Screen Ruler adds autocomplete from the page's own classes, Tailwind-aware highlighting, one undo history with your other edits, and a class diff in the Changes tab you can copy into your component.

Will my class changes be saved?

Class edits last until you reload the page. Copy the class list from the Changes tab to keep it.