1. Introduceți valoarea
Scrieți un număr în câmpul de introducere. Puteți folosi punctul sau virgula ca separator zecimal.
Tailwind CSS în px
Acest convertor calculează instantaneu. Introduceți o valoare și rezultatul apare imediat.
Loading tool editor...
Când trebuie să folosiți: Tailwind CSS în px?
Tailwind CSS folosește o scară de spațiere unde fiecare unitate = 0,25 rem = 4 px (la root implicit de 16px). Deci p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px, w-64 = 16 rem = 256 px.
Acest convertor ajută dezvoltatorii să traducă rapid valorile de spațiere Tailwind în măsurători exacte de pixeli pentru depanare, predare design și documentație.
Tailwind are și valori speciale: 0.5 = 2px, 1.5 = 6px, 2.5 = 10px, 3.5 = 14px, și dimensiuni denumite precum full = 100%, screen = 100vw.
Toate calculele se efectuează local în browserul dumneavoastră.
Cum să utilizați convertorul?
2. Citiți rezultatul
Rezultatul conversiei apare instantaneu în câmpul adiacent – fără a da clic.3. Copiați sau inversați
Faceți clic pe Copiați rezultatul sau folosiți butonul Inversați.
Când este util acest convertor?
Dezvoltare web
Câți px are p-6? Răspuns: 24 px (1,5 rem).Conversie din Figma
Design în px → clasele Tailwind corespunzătoare.Proiectare și măsurare
Potrivirea layout-ului cu designul grafic necesar.Colaborare cu designeri
Designerul oferă px, programatorul are nevoie de clase Tailwind.
Ce face acest convertor special?
Confidențialitate completă
Toate calculele se fac local, în browserul dvs. Nicio dată nu este trimisă la vreun server.Rezultate în timp real
Rezultatul se actualizează instant pe măsură ce tastați – fără a apăsa vreun buton.Conversie bidirecțională
Butonul Inversare vă permite să convertiți în ambele direcții cu un singur clic.Tabel de referință
Un tabel gata cu valori convertite frecvent și descrieri contextuale.
Cum funcționează conversia?
Tailwind spacing = valoare × 0,25 rem. La root 16px: spacing × 4 = pixeli.
p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px, p-16 = 64px, p-32 = 128px, p-64 = 256px.
Dimensiunile fonturilor folosesc valori diferite: text-sm = 14px, text-base = 16px, text-lg = 18px, text-xl = 20px, text-2xl = 24px.
Sfaturi practice
- Spacing: p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-6 = 24px, p-8 = 32px.
- Width: w-1 = 4px, w-4 = 16px, w-12 = 48px, w-24 = 96px, w-48 = 192px, w-64 = 256px.
- Breakpoints: sm ≥ 640px, md ≥ 768px, lg ≥ 1024px, xl ≥ 1280px.
- Max-width: max-w-sm = 384px, max-w-md = 448px, max-w-lg = 512px, max-w-xl = 576px.
Tailwind spacing scale
| Tailwind | rem | px (at 16px root) |
|---|---|---|
| 1 | 0.25rem | 4px |
| 4 | 1rem | 16px |
| 8 | 2rem | 32px |
| 16 | 4rem | 64px |
| 64 | 16rem | 256px |
rem
- 1
0.25rem - 4
1rem - 8
2rem - 16
4rem - 64
16rem
px (at 16px root)
- 1
4px - 4
16px - 8
32px - 16
64px - 64
256px
Convertește alte unități în px
Explorează alte convertoare de unități
Întrebări frecvente
Ajutați-ne să ne îmbunătățim instrumentele
Aveți o idee, ați găsit o eroare sau doriți să sugerați o funcție? Scrieți-ne – răspundem în 24 de ore.