Tailwind-Helfer inspiziert jedes Element einer Webseite und generiert eine umfassende, kategorisierte Aufschlüsselung passender Tailwind-CSS-Utility-Klassen. Im Gegensatz zu einer einfachen Klassenzeichenkette organisiert es die Ergebnisse nach Kategorie — Layout, Abstände, Typografie, Farben, Ränder und Effekte — damit Sie genau verstehen, was jede Klasse steuert.
Während Als Tailwind kopieren Ihnen eine schnelle Klassenzeichenkette zum Einfügen gibt, ist Tailwind-Helfer der Begleiter für die Tiefenanalyse. Er ist für Entwickler gebaut, die die vollständige Style-Komposition eines Elements in Tailwind-Begriffen verstehen möchten. Jede berechnete CSS-Eigenschaft wird ihrem Tailwind-Äquivalent zugeordnet und in logische Kategorien gruppiert. Sie können auf einen Blick sehen, dass ein Element Flex-Layout mit items-center-Ausrichtung verwendet, p-5-Padding mit gap-3 zwischen Kindern hat, text-lg font-bold für Typografie verwendet und ein bg-slate-900 rounded-lg border border-slate-700-Erscheinungsbild hat. Klicken Sie auf ein einzelnes Klassen-Tag, um nur dieses zu kopieren, oder verwenden Sie Alle kopieren, um die vollständige Zeichenkette zu holen. Die kategorisierte Ansicht macht es einfach, genau die Klassen auszuwählen, die Sie benötigen, anstatt alles zu kopieren.
Tailwind-Klassen sind in klare Kategorien organisiert: Layout (flex, grid, position), Abstände (padding, margin, gap), Typografie (Schriftgröße, Gewicht, Farbe), Farben (Hintergrund, Text, Rand), Ränder (Radius, Breite, Stil) und Effekte (Schatten, Opazität, Transform). Jede Kategorie ist ein-/ausklappbar und klar beschriftet.
Klicken Sie auf ein beliebiges Element — Buttons, Karten, Überschriften, Eingaben, Container — und das Panel füllt sich sofort mit der vollständigen Tailwind-Klassen-Aufschlüsselung. Das Element wird mit einem lila Rahmen hervorgehoben, damit Sie genau wissen, was gerade inspiziert wird.
Jede Tailwind-Klasse wird als anklickbares Tag angezeigt. Klicken Sie auf ein einzelnes Tag (wie p-5 oder font-bold), um genau diese Klasse in Ihre Zwischenablage zu kopieren. Eine dezente kopiert-Animation bestätigt die Aktion. Perfekt für den Fall, dass Sie nur eine oder zwei spezifische Klassen benötigen.
Die Schaltfläche Alle Klassen kopieren am unteren Rand generiert eine saubere, durch Leerzeichen getrennte Zeichenkette aller Tailwind-Klassen und kopiert sie in Ihre Zwischenablage. Bereit zum direkten Einfügen in className oder class.
Jeder Wert wird auf Tailwinds Standard-Abstands- und Größenskala abgebildet. Eine 16px-Schrift wird auf text-base abgebildet, 24px-Padding auf p-6 und #7c3aed auf purple-600. Wenn keine genaue Übereinstimmung existiert, wird der nächste Skalenwert gewählt und vermerkt.
Fahren Sie mit der Maus über ein Tailwind-Klassen-Tag im Panel, um den ursprünglichen berechneten CSS-Wert zu sehen, aus dem es generiert wurde. Zum Beispiel zeigt das Hovern über p-5 padding: 20px. Diese bidirektionale Ansicht hilft Ihnen, die Tailwind-Skala zu lernen, indem Klassen mit echten CSS-Werten verbunden werden.
Tailwind-Helfer covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*Im Gegensatz zu einer flachen Klassenzeichenkette lässt die kategorisierte Ansicht Sie die vollständige Komposition eines Elements verstehen. Sehen Sie, dass eine Karte Flex-Layout, spezifisches Padding, fette Typografie, einen Slate-Hintergrund, abgerundete Ränder und einen dezenten Schatten verwendet — jeder Aspekt in seinem eigenen Abschnitt.
Inspizieren Sie ein gut gestaltetes Element auf einer beliebigen Website, dann erstellen Sie es in Ihrem Tailwind-Projekt neu, indem Sie die relevanten Kategorie-Klassen kopieren. Nehmen Sie das Layout von einem Element, Typografie von einem anderen und Farben aus Ihrer Markenpalette — frei kombinierbar.
Fahren Sie mit der Maus über Klassen-Tags, um die CSS-Quellwerte zu sehen. Diese interaktive Zuordnung ist der schnellste Weg zu lernen, dass p-4 16px bedeutet, text-lg 18px bedeutet oder dass purple-600 #7c3aed ist. Verwandeln Sie jede Website in eine Tailwind-Lernübung.
Inspizieren Sie Elemente auf Ihrer eigenen Tailwind-gebaut Site, um sicherzustellen, dass sie konsistente Abstände, Farben und Typografie aus dem Design-System verwenden. Erkennen Sie versehentliche Einzelwerte (wie p-[13px]), die Standard-Skalenwerte sein sollten (p-3 oder p-3.5).
Verwenden Sie Als Tailwind kopieren, wenn Sie eine schnelle Klassenzeichenkette zum Einfügen benötigen. Verwenden Sie Tailwind-Helfer, wenn Sie die Aufschlüsselung studieren, einzelne Klassen selektiv kopieren oder verstehen möchten, warum spezifische Tailwind-Klassen für jede CSS-Eigenschaft gewählt wurden.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Tailwind-Helfers. Das Tool aktiviert sich und ein Panel erscheint auf der rechten Seite, bereit zur Anzeige von Klassen-Aufschlüsselungen.
Klicken Sie auf ein beliebiges Element der Seite. Es wird mit einem lila Rahmen hervorgehoben und das Panel füllt sich mit kategorisierten Tailwind-Klassen. Jede Kategorie (Layout, Abstände, Typografie, Farben, Ränder, Effekte) wird als Abschnitt mit Klassen-Tags angezeigt.
Durchsuchen Sie die Kategorien, um die vollständige Style-Komposition des Elements zu verstehen. Jede Klasse ist ein anklickbares Tag — Hovern zeigt den CSS-Quellwert, Klicken kopiert diese einzelne Klasse.
Klicken Sie auf einzelne Tags, um spezifische Klassen zu kopieren, oder verwenden Sie die Schaltfläche Alle Klassen kopieren am unteren Rand, um alles als einzelne Zeichenkette zu holen. Direkt in Ihre Tailwind-Komponente einfügen.
Klicken Sie auf ein anderes Element der Seite, um das Panel sofort mit neuen Klassen zu aktualisieren. Kein De- und Reaktivieren nötig — klicken Sie einfach weiter, um mehrere Elemente nacheinander zu inspizieren.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.