Als Tailwind kopieren überbrückt die Lücke zwischen visuellem Design und Tailwind-CSS-Code. Klicken Sie auf ein beliebiges Element einer Webseite und erhalten Sie sofort die entsprechenden Tailwind-Utility-Klassen, die aus den berechneten CSS-Stilen generiert wurden — bereit zum Einfügen in Ihre JSX-, Vue-Vorlage oder HTML-Datei.
Mit Tailwind CSS zu bauen bedeutet, in Utility-Klassen zu denken, anstatt benutzerdefiniertes CSS zu schreiben. Aber wenn Sie ein bestehendes Design referenzieren — egal ob es die Landing Page eines Konkurrenten, ein in Vanilla CSS gebautes Design-System oder die aktuelle Website eines Kunden ist — ist die manuelle Übersetzung visueller Styles in Tailwind-Klassen mühsam und fehleranfällig. Als Tailwind kopieren automatisiert dies vollständig. Es liest die berechneten Browser-Styles für jedes Element und ordnet jede Eigenschaft der nächstgelegenen Tailwind-Utility-Klasse anhand der Standard-Skala zu. Farben werden dem nächsten Tailwind-Palettenfarbe angepasst, Abstände werden auf die nächste rem-basierte Utility gerundet, und Typografie wird auf text-* und font-*-Klassen abgebildet. Die Ausgabe ist eine saubere, einzeilige Klassenzeichenkette, die Sie direkt in Ihre Komponente einfügen können.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Klicken Sie auf ein beliebiges Element und sein vollständiges berechnetes CSS wird in Echtzeit analysiert. Jede anwendbare Eigenschaft wird der entsprechenden Tailwind-Utility-Klasse zugeordnet — von bg-purple-600 über rounded-lg bis font-semibold. Die Konvertierung erfolgt sofort ohne Lade- oder Verarbeitungsverzögerung.
Das Tool macht nicht einfach eine String-Ersetzung — es versteht das Design-System von Tailwind. Ein Padding von 12px wird auf p-3 abgebildet (nicht auf einen benutzerdefinierten Wert), Farben werden dem nächsten Farbton in der Tailwind-Palette angepasst (z.B. wird #7c3aed zu purple-600), und Schriftgrößen werden auf text-sm, text-base, text-lg usw. abgebildet.
Die generierte Klassenzeichenkette wird in einem übersichtlichen Ausgabe-Panel angezeigt. Klicken Sie einmal auf die Kopieren-Schaltfläche und die gesamte Zeichenkette befindet sich in Ihrer Zwischenablage — bereit zum Einfügen in className in React, class in HTML oder :class in Vue.
Für einen noch schnelleren Workflow klicken Sie mit der rechten Maustaste auf ein beliebiges Element der Seite, um direkt über das Browser-Kontextmenü auf Als Tailwind kopieren zuzugreifen. Sie müssen die DevSuite-Dock nicht öffnen — einfach rechtsklicken und die Klassen sind in Ihrer Zwischenablage.
Geht über einfache Zuordnungen hinaus. Verarbeitet Box-Shadows (shadow-md, shadow-lg), Verläufe, Randstile, Flex/Grid-Layout-Klassen, Opazitätswerte und sogar responsive-bewusste Eigenschaften wie max-width und Seitenverhältnisse.
Enthält nur Klassen, die sich von Browser-Standards unterscheiden — keine redundanten Utilities. Die Ausgabe ist prägnant und produktionsbereit, nicht überladen mit Klassen für vererbte oder Standard-Werte.
Als Tailwind kopieren covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorBauen Sie eine Website von Vanilla CSS oder Bootstrap zu Tailwind um? Klicken Sie auf jede Hauptkomponente der bestehenden Website, kopieren Sie die Tailwind-Klassen und verwenden Sie sie als Ausgangspunkt für Ihre neuen Tailwind-Komponenten. Spart Stunden manueller Eigenschafts-zu-Klassen-Übersetzung.
Eine wunderschön gestaltete Karte, ein Hero-Bereich oder eine Navigation auf einer anderen Website gefunden? Klicken Sie darauf, holen Sie sich die Tailwind-Klassen und nutzen Sie sie als Referenz für Ihre eigene Version. Kein manuelles Inspizieren von Dutzenden CSS-Eigenschaften notwendig.
Wenn Sie neue Tailwind-Komponenten aus einem Figma- oder PSD-Mockup bauen, implementieren Sie das Design zuerst im Browser mit DevTools, dann klicken Sie auf das Element mit Als Tailwind kopieren, um die genauen Utility-Klassen zu erhalten, anstatt sie von Hand zu schreiben.
Stellen Sie sicher, dass Ihre handgeschriebenen CSS-Werte tatsächlich auf gültige Tailwind-Skalenwerte abgebildet werden. Wenn Sie padding: 14px geschrieben haben, zeigt das Tool, ob es auf p-3 (12px) oder p-3.5 (14px) gerundet wird — und erkennt Inkonsistenzen, bevor sie ausgeliefert werden.
Neu bei Tailwind? Klicken Sie auf Elemente einer beliebigen Webseite, um zu sehen, wie traditionelle CSS-Eigenschaften in Utility-Klassen übersetzt werden. Es ist eine interaktive Methode, das Tailwind-Klassen-Benennungssystem durch reale Beispiele zu lernen.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol Als Tailwind kopieren. Das Tool aktiviert sich und der Cursor wechselt zu einem Fadenkreuz-Selektor, der anzeigt, dass Sie nun auf Elemente klicken können.
Klicken Sie auf ein beliebiges Element der Seite — einen Button, eine Karte, eine Überschrift, eine Navigationsleiste. Das Element wird hervorgehoben und sein berechnetes CSS wird analysiert. Ein schwebendes Panel erscheint mit der generierten Tailwind-Klassenzeichenkette.
Das Panel zeigt die vollständige Tailwind-Klassenzeichenkette, aufgeteilt in logische Gruppen. Sie können genau sehen, welche CSS-Eigenschaft welcher Tailwind-Klasse zugeordnet wurde. Fahren Sie mit der Maus über eine Klasse, um den zugrundeliegenden CSS-Wert zu sehen.
Klicken Sie auf die Kopieren-Schaltfläche, um die vollständige Klassenzeichenkette zu kopieren. Fügen Sie sie direkt in das className, class-Attribut oder die Vorlage Ihrer Komponente ein. Die Klassen funktionieren sofort mit einem Standard-Tailwind-Setup.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.