Supertweak - dev tool Chrome extension for Tailwind developers
Muhammed Althaf
Chrome Extension Developer
JavaScript
Overview
Supertweak is chrome extension devtool for Tailwind CSS developers which helps to design and debug Tailwind websites right inside the browser. It's built with Vanilla JS and consequently weighs under just 75kb.
Supertweak landing page
Features
- Tailwind Editor - Built based on the Tailwind CDN, it allows quickly modifying Tailwind classes, add or remove classes, add or edit variants and arbitrary values, re-arrange elements and copy element classes or html.
- Guides - Hovering over any element highlights the element as well as shows guide lines and the css padding and margin boxes similar to how the browser inspector does.
- Screenshots - Aimed at letting users quickly take a screenshot for reference or to share the changes they made on the website. It allows capturing either the visible area or a selected section. The result can then be copied to clipboard or downloaded.
- Edit Mode - Allows editing any text on the website directly.
- Responsive Preview - Shows a list of responsive window sizes which upon selection open the current tab as a popup and resizes the window to match the selected size.
