Wer mit Tailwind CSS arbeitet, schreibt ständig Klassen wie p-4, mt-6 oder gap-2. Hinter diesen kurzen Namen steckt ein durchdachtes System: die Spacing-Skala. Sie sorgt dafür, dass Abstände in einem Projekt konsistent bleiben, statt dass jeder Entwickler eigene Pixelwerte erfindet. Dieser Artikel erklärt, wie die Skala aufgebaut ist, warum sie auf einem 4px-Raster basiert und wie du beliebige Designvorgaben sauber darauf abbildest.
Das Grundprinzip: ein 4px-Raster
Die Tailwind-Spacing-Skala folgt einer einfachen Regel: Eine Einheit entspricht 0,25rem, also 4 Pixel (bei der Standard-Basisschriftgröße von 16px). Daraus ergibt sich die zentrale Faustformel:
1= 0,25rem = 4px2= 0,5rem = 8px4= 1rem = 16px6= 1,5rem = 24px8= 2rem = 32px12= 3rem = 48px
Die Zahl in der Klasse ist also kein Pixelwert, sondern ein Vielfaches von 4px. Wenn du wissen willst, wie viele Pixel py-10 ergibt, multiplizierst du einfach: 10 × 4px = 40px. Umgekehrt teilst du einen gewünschten Pixelwert durch 4, um die passende Klasse zu finden. 24px geteilt durch 4 ergibt 6, also p-6. Genau diese Umrechnung nimmt dir der Tailwind Spacing Rechner ab: Du gibst einen Pixelwert ein und bekommst sofort die nächstgelegene Tailwind-Klasse zurück.
Warum ein festes Raster sinnvoll ist
Auf den ersten Blick wirkt es einschränkend, sich auf Vielfache von 4px festzulegen. In der Praxis ist genau das die Stärke. Ein festes Spacing-Raster bringt mehrere Vorteile:
- Visuelle Ruhe: Wenn alle Abstände aus derselben Skala stammen, wirkt ein Layout automatisch aufgeräumter. Das Auge erkennt Muster, auch wenn man sie nicht bewusst wahrnimmt.
- Weniger Entscheidungen: Statt zwischen 13px, 14px und 15px zu grübeln, wählst du zwischen
3(12px) und4(16px). Das beschleunigt die Arbeit enorm. - Teamkonsistenz: Jeder im Team greift auf dieselben Werte zu. Code-Reviews werden einfacher, weil ungewoehnliche Abstände sofort auffallen.
Designsysteme von Apple, Google und Material Design basieren aus denselben Gruenden auf Rastern, meist 4px oder 8px. Tailwind macht dieses Prinzip einfach in CSS-Klassen direkt verfuegbar.
Die wichtigsten Spacing-Utilities
Die Spacing-Skala steckt nicht nur in Padding und Margin. Sie wird von einer ganzen Familie von Utilities geteilt:
p-*,px-*,py-*,pt/pr/pb/pl-*fuer Paddingm-*,mx-*,my-*,mt/mr/mb/ml-*fuer Margingap-*,gap-x-*,gap-y-*fuer Abstaende in Flexbox und Gridspace-x-*undspace-y-*fuer Abstaende zwischen Geschwister-Elementenw-*undh-*fuer Breiten und Hoehen aus derselben Skala
Weil all diese Utilities auf demselben Zahlensystem aufbauen, kannst du Werte gedanklich uebertragen. Ein gap-4 erzeugt denselben Abstand wie ein mt-4 oder ein px-4 auf jeder Seite, naemlich 16px.
Negative Werte und Bruchteile
Tailwind kennt auch Zwischenwerte fuer feinere Abstufungen: 0.5 (2px), 1.5 (6px), 2.5 (10px) und 3.5 (14px). Damit deckst du auch ungerade Designvorgaben ab, ohne das Raster komplett zu verlassen. Fuer negative Margins setzt du ein Minus voran, etwa -mt-4, um ein Element um 16px nach oben zu ziehen.
Wenn ein Designwert wirklich nicht in die Skala passt, erlaubt Tailwind seit Version 3 sogenannte arbitrary values in eckigen Klammern, zum Beispiel p-[13px]. Das sollte aber die Ausnahme bleiben, denn jeder Sonderwert untergraebt die Konsistenz, die das Raster gerade gewaehrleisten soll.
Vom Design zum Code: der Workflow
In der Praxis bekommst du Designs oft als Figma-Datei mit konkreten Pixelabstaenden geliefert. Der typische Ablauf sieht so aus: Du liest einen Abstand ab, etwa 20px, und suchst die passende Klasse. 20 geteilt durch 4 ergibt 5, also p-5. Bei krummen Werten rundest du auf den naechsten Rasterwert, statt einen arbitrary value zu erzwingen. Diesen Rundungsschritt nimmt dir der Tailwind Spacing Rechner direkt ab und zeigt zugleich, wie viele Pixel die vorgeschlagene Klasse tatsaechlich ergibt.
Fuer verwandte CSS-Aufgaben lohnt sich ein Blick auf weitere Tools: Mit dem Pixel-REM-Rechner rechnest du beliebige Pixelwerte in rem um, was beim Verstaendnis der Skala hilft, und der CSS Clamp Generator erzeugt fluide Groessen fuer responsive Layouts. Eine Uebersicht aller verfuegbaren Helfer findest du in unseren Webtools.
Haeufige Fragen
Warum 4px und nicht 8px?
4px ist die feinste sinnvolle Einheit, die noch sichtbare Unterschiede erzeugt, ohne das System unueberschaubar zu machen. Aus 4px lassen sich die gaengigen 8px-, 16px- und 24px-Schritte bilden, gleichzeitig bleiben feinere 4px-Abstufungen moeglich. Viele Teams nutzen in der Praxis trotzdem bevorzugt die geraden Vielfachen von 8px.
Aendert sich die Skala mit der Schriftgroesse?
Da die Werte in rem definiert sind, skalieren sie mit der Wurzel-Schriftgroesse. Setzt jemand im Browser eine groessere Basisschrift, wachsen auch die Abstaende proportional mit. Das ist ein Barrierefreiheits-Vorteil gegenueber festen Pixelwerten.
Kann ich die Skala anpassen?
Ja. In der tailwind.config.js kannst du unter theme.spacing eigene Werte ergaenzen oder die Skala komplett ersetzen. Das ist nuetzlich, wenn dein Designsystem auf einem anderen Grundraster aufbaut. Fuer die meisten Projekte reicht die Standardskala aber vollkommen aus.