Supertweak

Quickly Inspect, Tweak & Copy Tailwind styles, right in your browser

Forget the frequent trips to the Tailwind docs. Supertweak is a chrome extension that let's you inspect and try out changes live on Tailwind websites, visually. Scroll down to see what's possible.

Do try it out on this website ➘. Can you make this page look better though? Tweet @supertweakdev

How it works

  • Hover over any element to see the classes
  • Click to select an element and tweak the styles
  • Copy the classes or html to use in your project

Quickly create new variants

You can easily create variants combinations by selecting from the options, or type in your own.

Preview changes in responsive mode

Add responsive variants and switch to the preview mode to see how it looks

Add and reorder child elements

Sometimes, classes are not enough and new elements are needed.

Supports custom config

You can use your own config in the Play CDN supported format.

Arbitrary values

You can enter arbitrary values like mt-[10px] or variants like [&>*]:hover

One click copy

Easily copy the classes or html content of the selected element

Quick editing

Click on any existing tailwind class and edit their value quickly

Tweak color opacity

Supertweak supports editing opacity of color properties

Negative values

You can use negative modifier on supported properties

Element actions

Remove or duplicate selected elements with a single click

Edit text nodes

Click on any text node in the 'node' view to edit its content.

Edit element attributes

Want to quickly try another image src? Sure you can.

Limitations

Supertweak is not perfect yet. Here are some current limitations.

Q&A

Does Supertweak work on all websites?

It should work on any website, regardless of Tailwind. Supertweak rely on Tailwind Play CDN to generate the classes.

Does it work offline?

Network is needed when you install the extension and use it for the first time. Once Play CDN version of Tailwind is loaded and cached, you can use it offline.

What browsers does it support?

It is tested only in Chrome, but it should work on any chromium based browsers. i.e Brave,Edge & Arc

Does it update the code automatically?

Nope. Supertweak only lets you tweak the design in the browser. You'll need to copy the classes or the html and paste them in your editor to make the changes permanent.

How are tailwind styles generated?

Supertweak is loading Tailwind (v3.2.1) from the official CDN to generate styles and handle the custom config.

What versions of Chrome does this support?

It is tested in Chrome 98.xx and Chrome 107.xx. But it should work from Chrome 88+ If you encounter any issues, please contact support

I have another question

Your questions are most welcome. Please send a mail at support@supertweak.dev