1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz Tailwind spacing na px – klasy p-4, m-8, gap
Zamień spacing Tailwind na piksele natychmiast – bez liczenia w głowie, że p-6 to 24 px, a gap-8 to 32 px.
REKLAMA
REKLAMA
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.
REKLAMA
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 Piksele
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Ile px ma p-4 w Tailwind?
p-4 = 1 rem = 16 px (przy domyślnym font-size 16 px). System Tailwind: 1 jednostka = 0,25 rem = 4 px. Szybki wzór: wartość x 4 = piksele. Działa to samo dla margin (m-4), gap (gap-4) i innych klas spacing.
Jak obliczyć px z wartości Tailwind?
Pomnóż wartość przez 4. p-6 = 6 x 4 = 24 px. p-12 = 48 px. p-16 = 64 px. Dla wartości połówkowych: p-0.5 = 2 px, p-1.5 = 6 px. Konwerter robi to automatycznie, pokazując również wartości rem.
Jak użyć niestandardowej wartości w Tailwind?
Tailwind obsługuje arbitralne wartości: p-[13px], w-[500px], text-[17px]. Jeśli potrzebujesz wartości spoza standardowej skali, użyj nawiasów kwadratowych. Możesz też rozszerzyć skalę w tailwind.config.js w sekcji theme.extend.spacing.
Ile to text-xl w pikselach?
text-xl = 1,25 rem = 20 px. Pełna skala fontów Tailwind: text-xs = 12 px, text-sm = 14 px, text-base = 16 px, text-lg = 18 px, text-xl = 20 px, text-2xl = 24 px, text-3xl = 30 px, text-4xl = 36 px.
Czy można zmienić bazę spacing w Tailwind?
Tak, w tailwind.config.js możesz nadpisać całą skalę spacing lub dodać nowe wartości przez theme.extend.spacing. Jeśli zmienisz bazowy font-size projektu, wartości rem (a tym samym piksele) zmienią się automatycznie w całym projekcie.
Co to jest gap w Tailwind i ile to pikseli?
gap-4 = 16 px odstęp między elementami w Flexbox lub Grid. Ta sama skala co margin i padding. gap-2 = 8 px, gap-6 = 24 px, gap-8 = 32 px. gap-x kontroluje odstępy poziome, gap-y – pionowe.
Jak przeliczyć wymiary z Figma na klasy Tailwind?
Podziel wartość pikseli z Figma przez 4, by uzyskać jednostkę Tailwind. 32 px / 4 = 8, więc używasz p-8 lub m-8. Jeśli wynik nie jest całkowity (np. 14 px / 4 = 3,5), użyj p-3.5 lub arbitralnej wartości p-[14px].
Ile pikseli ma w-full i inne szerokości Tailwind?
w-full = 100% szerokości rodzica, w-screen = 100vw, w-auto = automatyczna. Numeryczne: w-96 = 384 px (maksymalna w domyślnej skali), w-64 = 256 px, w-32 = 128 px. Powyżej w-96 używaj arbitralnych wartości: w-[500px].
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.