Show HN: Supertweak – a visual devtools extension for Tailwind CSS

[althaffe]

Hi folks, I've been working on a visual devtool chrome extension for Tailwind CSS for quite some time now and just launched in recently.

It let's you tweak your website from the browser itself and copy the classes or html afterwards to paste in your IDE. It's especially well suited to try out changes quickly, but I've built most of the landing page with the help of the extension itself.

You can try it out in the landing page itself (no need to install anything).

Features: - Click on any class (eg: px-4) and try out other values easily.

- Preview the website in responsive mode and quickly toggle between breakpoints. auto detects breakpoints set in the config.

- Quickly try out new variants. Supports arbitrary variants too.

- Lets you try out arbitrary and negative property values.

- Add, remove or re-order elements.

- Edit element attributes and text nodes

etc.

I'm excited to share it here and would love to hear your feedback and suggestions.

[xmonkee]

This is really fucking cool. I would love to use this to tweak my website to perfection. Is it possible to make a bunch of changes and then see all the changes I made so I can put them back into my code?

[althaffe]

I haven't implemented that yet, but had it in mind. Thanks for the suggestion, I'll add it to my list :)

BTW thanks for the kind words. It'd be great if you can spread the word.

[braunshizzle]

Pretty neat, though it does mention a promo code, but when you go to Stripe's checkout there's no option to enter a promo code.

[althaffe]

Ohh thanks for the catch. It was a 25% off code. I reduced the price itself by 25% and removed the coupon but forgot to remove the text.

Updated now.