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

Coming soon. Follow us on Twitter for updates

🖘

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.

Not all config properties are supported yet. For example,Prefix and Separator
"Important" modifier and the same config property is not supported
Plugins are not supported yet
Data type hints in arbitrary values (eg: text-[length:var(--length)]) doesn't work properly.
Fixed height for body with scrollable container inside messes with positioning of the editing panel
As the name indicates, responsive preview mode is just for previewing. Scripts doesn't work there.
The config editor is pretty basic for now.
There may also be other small bugs, but you can test it as much as you want in this page itself before you buy
If you have an old and beat-up laptop like mine, you may hit some performance issues on heavy websites.

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