CSS Abstände zu Tailwind – Padding, Margin und Skala

padding: 1.5rem wird zu p-6. Shorthands werden zu Seiten-Utilities. Off-scale: p-[13px].

Abstände sind meist der erste Teil eines Stylesheets, der nach Tailwind wandert. Der Leitfaden zeigt, wie padding: 1.5rem zu p-6 wird und wie Kurzschreibweisen in einzelne Utilities pro Seite zerfallen. Längen außerhalb der Standardskala landen als p-[13px] im Markup, und genau solche Stellen sollten Sie bewusst prüfen statt blind zu runden.

Skala vs. lose rem

1.5rem ist oft p-6. 13px außerhalb der Skala braucht p-[13px] oder Redesign auf Token. Nicht blind runden.

Shorthand, das sich öffnet

margin: 1rem 2rem kann zu my-4 mx-8 werden. Jede Seite vor dem PR prüfen.

Layout-Spacing

gap-* in Flex/Grid vermeidet verwaiste Margins zwischen Kindern.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.