Tailwind Spacing Rechner
Findet die passende Tailwind-Spacing-Klasse zu einem px-Wert (1 = 0,25rem = 4px).
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Tailwind Spacing Rechner?
Der Tailwind Spacing Rechner findet die passende Tailwind-Spacing-Klasse zu einem px-Wert. Tailwind nutzt eine Spacing-Skala, bei der 1 Einheit 0,25 rem entspricht, also 4 px bei Standardbasis. Wenn du aus einem Design einen Pixelwert hast, willst du schnell die richtige Klasse wie p-4 oder mt-6 wissen.
Gib einen Wert in px ein und das Tool nennt dir die nächste passende Tailwind-Klasse und ob der Wert exakt aufgeht. Die Berechnung läuft direkt im Browser. So setzt du Abstände, Paddings und Margins schnell in Tailwind um, ohne die Skala auswendig zu lernen.
Beispiele
- 16 px entsprechen exakt der Klasse 4 (z. B. p-4, m-4).
- 24 px ergeben die Klasse 6, also etwa gap-6 oder px-6.
- 10 px liegen zwischen 2 (8 px) und 2.5 (10 px) - exakt die Klasse 2.5.
Häufige Fragen zum Tailwind Spacing Rechner
Wie ist die Tailwind-Spacing-Skala aufgebaut?
Jede Einheit entspricht 0,25 rem, also 4 px. Die Klasse 1 sind 4 px, 2 sind 8 px, 4 sind 16 px und so weiter. Es gibt auch Zwischenschritte wie 0.5 und 2.5.
Was, wenn mein px-Wert nicht aufgeht?
Dann zeigt das Tool die nächstgelegene Klasse. Für exakte Sonderwerte kannst du in Tailwind die Arbitrary-Value-Syntax wie p-[13px] nutzen.
Gilt das auch bei geänderter Basisschrift?
Da Tailwind rem nutzt, skaliert die Spacing-Skala mit der html-Schriftgröße. Bei der Standardbasis von 16 px gelten die genannten px-Werte.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
