Tailscan for Tailwind CSS

Die Kernidee ist, dass Sie die Seite nie verlassen. Fahren Sie über ein Element, um seine Tailwind-Klassen zu sehen, drücken Sie die Leertaste zum Fixieren und fügen Sie dann Klassen hinzu, bearbeiten oder verbergen Sie sie, während das Design in Echtzeit aktualisiert wird. Die Änderungen bleiben pro Element erhalten, sodass Sie frei experimentieren und am Ende alle Anpassungen auf einmal kopieren können. Wer den Speichern-und-Neuladen-Zyklus scheut, für den ist das die Funktion, die das Werkzeug bezahlt macht.

Version 3 ergänzt ein KI-Panel, das eine Anfrage in normaler Sprache in Tailwind-Änderungen übersetzt. Sie tippen etwa "mach diesen Button größer mit abgerundeten Ecken" und die Klassen werden automatisch angewendet, mit der Option, sie als sichtbare Utilities zu behalten. Außerdem exportiert es Ihre Änderungen als sauberen Code oder wiederverwendbare Prompts, damit sich derselbe Stil durch ein Projekt ziehen lässt. Der Haken ist der Zähler: Der Tarif erlaubt 1000 KI-Anfragen pro Monat, danach wechselt er für den Rest des Monats auf ein günstigeres Modell.

Sie können ein Element mit einem Klick in eine Tailwind-Komponente umwandeln. Tailscan macht aus jedem Element jeder Website eine wiederverwendbare Tailwind-CSS-Komponente. Sie können also eine Karte, eine Navigationsleiste oder einen Button, der Ihnen gefällt, greifen, umwandeln und das Markup in Ihr eigenes Projekt übernehmen, statt es Klasse für Klasse neu zu schreiben. Das ist der Teil, der aus Inspektion echten Output macht, und deshalb nutzen Leute es auf Websites, die nicht ihre eigenen sind.

Sie können jede Tailwind-Klasse und Variante ergänzen, auch solche, die Ihr Build entfernt, und Klassen mit beliebigen Werten. Bringen Sie Ihre eigene Tailwind-Konfiguration mit und Ihre Theme-Erweiterungen erscheinen sofort, sodass die Vorschläge zu Ihrem Projekt passen und nicht zum Standard-Tailwind. Der letzte Punkt zählt für Teams, die auf eigenen Skalen aufbauen, denn ein Inspektor, der nur den Standard kennt, wird für sie schnell nutzlos.

Tailscan hängt sich in die Browser-Devtools. Sie können Klassen im Devtools-Panel bearbeiten und die native Elementauswahl nutzen, und jede Klasse wird während des Tippens kompiliert. Die Autovervollständigung schlägt die richtige Klasse vor und zeigt ihre Farbe an, während eine Breakpoint-Anzeige Ihnen sagt, welchen Tailwind-Breakpoint Sie gerade sehen. Das ist der Unterschied zwischen einem geratenen Klassennamen und einem, der Ihnen genannt wird.

Berechnete Bereiche und Hilfslinien zeigen den tatsächlichen Margin und Padding um ein Element, sodass Ausrichtungsprobleme aufhören, Rätselraten zu sein. Ein eingebautes Screenshot-Werkzeug erfasst einen Teil des Bildschirms für eine schnelle Übergabe, und Sie können entweder die Klassenliste oder das gesamte Element mit Ihren Änderungen kopieren. Kleine Bequemlichkeiten, die sich über einen Arbeitstag summieren.