1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz Tailwind CSS spacing na piksele
Ten konwerter przelicza wartości spacing z Tailwind CSS na piksele (domyślna skala: 1 unit = 4 px). Wynik pojawia się natychmiast po wpisaniu wartości.
Loading tool editor...
Jak działa system spacing w Tailwind CSS?
Tailwind CSS używa systemu spacing opartego na wielokrotnościach 4 px (0,25 rem). Klasa p-4 = 1 rem = 16 px. p-8 = 2 rem = 32 px. p-1 = 0,25 rem = 4 px.
System spacing obejmuje: margin (m), padding (p), gap, width (w), height (h), top/right/bottom/left. Wartości rosną: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96.
Font-size w Tailwind: text-xs = 0,75 rem (12 px), text-sm = 0,875 rem (14 px), text-base = 1 rem (16 px), text-lg = 1,125 rem (18 px), text-xl = 1,25 rem (20 px).
Ten konwerter przelicza wartości spacing Tailwind na piksele, zakładając domyślny font-size: 16 px (1 rem = 16 px).
Jak korzystać z konwertera?
2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
Debugowanie CSS
Ile px ma p-6? Odpowiedź: 24 px (1,5 rem).Konwersja z Figma
Projekt w px → odpowiednie klasy Tailwind.Pixel-perfect
Dopasowanie układu do wymaganego projektu graficznego.Współpraca z designerami
Designer podaje px, programista potrzebuje klas Tailwind.
Co wyróżnia nasz konwerter?
Pełna prywatność
Wszystkie obliczenia odbywają się lokalnie w przeglądarce. Żadne dane nie są wysyłane na serwer.Wynik w czasie rzeczywistym
Wynik aktualizuje się natychmiast podczas wpisywania – bez konieczności klikania.Obustronna konwersja
Przycisk Zmień kolejność pozwala przeliczać w obu kierunkach jednym kliknięciem.Tabela popularnych wartości
Gotowa tabela z najczęściej przeliczanymi wartościami i opisami kontekstowymi.
Jak działa konwersja Tailwind na px?
Tailwind CSS używa własnego systemu wartości odstępów (spacing scale), w którym jedna jednostka odpowiada 4 pikselom (0,25 rem przy domyślnym font-size 16 px). Oznacza to, że klasa p-4 ustawia padding na 16 px, a w-96 oznacza szerokość 384 px.
Aby przeliczyć wartość Tailwind na piksele, wystarczy pomnożyć ją przez 4. Na przykład p-6 = 24 px, m-8 = 32 px, a gap-2 = 8 px. System ten jest spójny i obejmuje marginesy, paddingi, szerokości, wysokości oraz odstępy w gridzie i flexboxie.
Warto pamiętać, że Tailwind generuje wartości w rem (nie w px) — p-4 to w rzeczywistości 1 rem, co przy domyślnym font-size 16 px daje 16 px. Jeśli zmienisz bazowy rozmiar czcionki, wartości pikseli również się zmienią.
Praktyczne wskazówki
- p-4 = 16 px, p-8 = 32 px, p-12 = 48 px, p-16 = 64 px.
- w-full = 100%, w-screen = 100vw, w-96 = 384 px (max domyślny).
- Powyżej w-96 użyj arbitralnych wartości:
w-[500px]. - text-base = 16 px, text-lg = 18 px, text-xl = 20 px, text-2xl = 24 px.
Tailwind spacing vs Piksele (px) – porównanie
| Cecha | Tailwind spacing | Piksele (px) |
|---|---|---|
| Typ | Abstrakcyjny (skala) | Absolutny |
| Baza | 1 = 0,25 rem = 4 px | 1 px |
| p-4 | 4 (1 rem) | 16 px |
| p-8 | 8 (2 rem) | 32 px |
| Customizacja | tailwind.config.js | Nie dotyczy |
Tailwind spacing
- Typ
Abstrakcyjny (skala) - Baza
1 = 0,25 rem = 4 px - p-4
4 (1 rem) - p-8
8 (2 rem) - Customizacja
tailwind.config.js
Piksele (px)
- Typ
Absolutny - Baza
1 px - p-4
16 px - p-8
32 px - Customizacja
Nie dotyczy
Konwertuj inne jednostki do px
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.